Widgets color change

  • Author
  • #888633

    I want to change the widgets header color. How can I do it and I am new to this. Please help me.

    The blog I need help with is searchwebmarketing.wordpress.com.


    Are you talking about the green bar or the text color?


    I’m going to go with green bars…

    To change the widget heading color (or green bars) in the Mystique theme, first note that you can select from one of six pre-built color schemes in the Appearance → Theme Options page for that theme. Also see the Mystique theme showcase page for more details.

    To change the widget headings to something completely different compared to the color schemes that are already available on Mystique’s Appearance → Theme Options page, you can create your own version of the widget title background image, upload your new image to your media library, and use CSS to swap out the image used in the theme with your new image. Here is an example using the pink image that already exists for one of the other color schemes:

    h3.widget-title span {
    	background-image: url("http://s1.wp.com/wp-content/themes/pub/mystique/colors/images/pink/widget-title-pink-large.png");
    body.sidebar-content-sidebar h3.widget-title,
    body.sidebar-sidebar-content h3.widget-title,
    body.content-sidebar-sidebar h3.widget-title,
    body.sidebar-sidebar-content h3.widget-title span,
    body.content-sidebar-sidebar h3.widget-title span,
    body.sidebar-content-sidebar h3.widget-title span {
    	background-image: url("http://s1.wp.com/wp-content/themes/pub/mystique/colors/images/pink/widget-title-pink-large.png");

    Replace http://s1.wp.com/wp-content/themes/pub/mystique/colors/images/pink/widget-title-pink-large.png with your custom image URL.

    I found that CSS by looking at the color-pink.css file referenced in the HTML header for the pink color scheme version of the Mystique theme. Here is a direct link for reference:

The topic ‘Widgets color change’ is closed to new replies.