[Resolved] Simple CSS: Override title on blog not working?

[Jon]

I’m having a little difficulty with a CSS override on the blog page.

The idea is to have sub-headings (such as titles) on our web page in a different font and color than the body (content). We can almost get there by setting the font in Appearance > Customize > Typography > Headings; here we can change the typeface of <h2> and <h3> tags but not the color.

On a regular page the CSS override works just fine.

h2 {
  color: #8C0C04;
  font-weight: bold;
}

On the blog page, the very same code does not. Using the inspector on the browser I obtained the class and tried to override it that way but it still does not work.

.entry-title {
  color: #8C0C04;
  font-weight: bold;
}

Am I using the wrong CSS or does it not work on blog pages?

By the way, we are using GP Premium with both Typography and Blog plug-ins enabled.

[David]

The customiser does have settings for H2, H3 etc. But if you’re still having issues:

Try adding !important to the code e.g color: #8C0C04 !important;

[Jon]

Thanks David but that did nothing.

Remember I can set the font for the headings (H2, H3, etc.) in the customizer just fine. It’s the color that is not in the customer and needs to be changed, so I’m trying to do it with Simple CSS.

[Jon]

I found the customizer has a setting to change color. So it appears that headings are set in one place (Appearance > Customize > Typography > Headings) and the color property of the headings is in another (Appearance > Customize > Colors > Content) where blog post titles can be changed.

Whew. I’d still like to know why the Custom CSS didn’t work, but that is just curiosity now.

[Leo]

The CSS should work from what I can see.

Hard to tell without seeing the site though but I would think something else was overwriting it.

[Author]

Posts