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;
}

https://www.ads-software.com/plugins/my-custom-css
https://www.ads-software.com/plugins/simple-custom-css

Best Regards,

Thanks for getting back to me so quickly!

I had already added that code (without !important) to the style.css file of my child theme. So my widget titles are universally aqua across the site. But now I would like to make the widget titles on one page orange. It is ok if these widget titles will be orange where ever they appear on the site.

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

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,

Ok, I’m new at this, so bear with me…

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

https://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.

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

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.

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?

Thank you!

Hi @queridamolly,

https://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,