[Resolved] Heading Colors

[Frank]

Hi,

I’m trying to change my H2, H3, and H4 headings back to the color black. After I made the color changes, these headings are not consistently black in all the articles. Some of them are still the original colors. I did everything you suggest in your pre-question check, including clearing my cache.

Frank

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Frank]

Hi, Leo

It’s not one particular page with the problem. I put my website URL in the private info field so you can see the H2 & H3 colors I use. I want to change them to black. The H3 (green) will change to black, but not on all pages, and the H2 remains blue.

I put my site back to the original colors (blue & green) after my attempt failed. I can change it all back to black headings when I get home so you can inspect one of the pages if that would be helpful.

Frank

[Leo]

Can you clear and disable WP Rocket first?

[Frank]

Hi, Leo

I deactivated WP rocket, but it did not fix the problem, so I reactivated it. I don’t use the server cache on my hosting platform because I use WP Rocket.

I can’t get the H2 heading to change from blue to black.

Am I doing it correctly in GeneratePress: Colors -> Content -> change heading colors ???

[Leo]

I deactivated WP rocket, but it did not fix the problem, so I reactivated it.

Can you deactivate it for us to see and properly inspect the page?
https://www.screencast.com/t/kwjBMi7VZ72

Thanks!

[Frank]

Hi, Leo

I deactivated WP Rocket, so it is currently off. Sorry about that!

Thank You,
Frank

[Leo]

So the issue here is that the <h2> headings have HTML inline style which is overwriting the customizer setting:
https://www.screencast.com/t/ny53fnixTC

<h3> works correctly as it doesn’t have HTML inline style so the customizer setting would apply:
https://www.screencast.com/t/kw70uPJKtw8n

Hope this helps 🙂

[Frank]

So, How can I get rid of the HTML inline style on the H2 headings, so that I can change the color to black?

[Leo]

Hmm how did you add them in the first place?

You should try doing whatever did for <h2> as that’s the correct method.

[Frank]

As far as I know, I created them both the same way. I selected the text in the heading and then picked the blue color for H2 and the green color for H3. That was before your theme changed to the global color system, so those two colors were already available instead of the colors the theme now has.

I don’t know where to go from here to correct the problem with the H2 headings. I have 100 articles on this website, so I can’t manually change all the H2 headings in each article to the paragraph format and create them again.

Any ideas on how to proceed?

I noticed in Microsoft Clarity that most of the “dead clicks” in my articles are from visitors clicking on my H2 headings because they are in blue and they think they are links. That’s why I want to change them to black.

Thanks,
Frank

[Leo]

This wouldn’t have anything to do with the global colors – inline style always takes precedent over any other settings.

You can try this CSS for a very hacky solution but it should work:

.single h2.has-text-color {
    color: #000000 !important;
}

[Frank]

Where should I add that CSS code, in the header section of every page by creating a hook in elements?

[Leo]

The Additional CSS field in the customizer is the easiest way.

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Frank]

Yes, That worked!

Thank You so much,
Frank

[Author]

Posts