Change color of side box headings

[bondimedical]

I am trying to change the color of the side box headings, eg "Best Sellers" which appear to be using h3 tags. I have used the following css

h3 {
	color: #024c6e;
}

h3 tags elsewhere in the site change color but the side boxes don't?

[bsmither]

<h3> tags elsewhere probably are "stand alone" (I don't know the proper terminology).

But these side "panels" are a specific target. So, in the CSS, use:

.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl {
  color: #333333;
}

or just the .panel h-tag you want to change.

[bondimedical]

Thanks. I would also like to fill the top part of these panels where the title is with a background colour, much like how top-bar is. How can I do that?

[bsmither]

In the same CSS rule you created above, add the property:

background-color: #2ba6cb

Then, the .panel class will need to adjust the padding so that the <h3> tags will span edge-to edge.

Padding: 0 0 1.25rem 0;
 

[bondimedical]

I am finding that whatever changes I do to the side boxes, also occur on the latest products on the homepage because they are panels. How do I make it so only the side boxes are affected?

[bsmither]

Unfortunately, there is no ID or CLASS associated with the sidepanel (but you could add one).

That leaves, for now, just the more specific identifiers. Change what you added from .panel h3 to the respective identifier below:

#box-featured h3
#box-popular h3
#box-media h3
#box-sale_items h3

 

[bondimedical]

Thanks for your help. You are very smart with CSS!