CSS code for changing a text widget title color

Hi @queridamolly,

I hope you are well today and thank you for your question.

To change the color of text widget titles, Add following CSS code in the style.css file of your child theme or add it in your site using any of the following plugins.

.sidebar h3 {
    color: #f57021 !important;
}

http://wordpress.org/plugins/my-custom-css
http://wordpress.org/plugins/simple-custom-css

Best Regards,

Hi @queridamolly,

But now I would like to make the widget titles on one page orange.

You can do this by using page specific selector in the CSS rule.

Just share me the page link where you want to display widget title in orange so that i can provide the specific CSS code.

Where can I find the individual identifiers for each widget (ie. .widget-1 from my first message in this thread)?

You can change your sidebar registration code like following using before_widget and after_widget parameters which you can use to add unique id to widgets.

register_sidebar( array(
		'name'          => __( 'Content Sidebar', 'twentyfourteen' ),
		'id'            => 'sidebar-2',
		'description'   => __( 'Additional sidebar that appears on the right.', 'twentyfourteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h1 class="widget-title">',
		'after_title'   => '</h1>',
	) );

Alternatively you can also use the CSS3 :nth-child() Selector to target specific widget title as following.

.sidebar > div:nth-child(2) > h3 {
color: #000;
}

Kind Regards,

Hi @queridamolly,

http://turnerdaviscoaching.com/our-team/
The page-id is 68 so this code makes the widget titles orange (they are h3s), but it also makes any other h3 on this page orange too, which I don’t want.

In this case you can use sidebar class in the CSS selector as following to apply orange color to only widget titles h3

body.page-id-68 .sidebar h3 {
color: #f57021;
}

I think the ‘id’ is what I was after in the first place, isn’t it? Where do I find or change the sidebar registration code?

There isn’t any ID associated with your widgets which you have specified in your initial code.

You should find the sidebar registration code in your theme files mainly in functions.php file.

If you find editing sidebar registration code difficult then you can consider using alternate solution posted in my previous reply, that is using the CSS3 :nth-child() Selector.

Regards,