[Support request] Change color of text in pages / posts

[John]

Hello GP !

I’m into my third day with GP Premium and I am very, very happy. Thank you.

I try not to submit a new topic if it is not necessary. Please be patient with me.

In my pages and posts I would like to be able to change the color of the text
independent of the color of the H2, H3 or H4 headers. This should not be a global
color change, but instead only in pages and posts.

Is that possbible?

John

[Elvin]

Hi John,

It’s possible by hooking in a <style> .your-selector { css-property: value; } </style> on wp_head using Hook element with display rule location set to specified pages or posts you want the CSS to apply to. 🙂

[John]

Super fast, Elvin. Let me give it a try. Thank you !

John

[Elvin]

Let me know if you need further help with it. No problem. 😀

[John]

Hi Elvin,

I have never used CSS or hooks. Is it simple? If yes, can you, please, describe the steps I need to take? Thank you.

John

[Elvin]

Here’s a sample video:
https://share.getcloudapp.com/12u4RYe0

In this video, I created a Hook element through Appearance > Elements.

I then wrote a CSS here contained in a style tag w/ CSS for h1.

I then on this video that I’ve set the display rule location to Post - Hello World!. This is basically the condition.

It’s saying "Apply this hook on the post named <strong>Hello World!</strong>".

[John]

That video, Elvin, was very helpful. Thank you I think I can do this. However, I am not sure what the code should look like between “style”. I know what I want, however. I GP you can find it at: customize … typography … body … colors … text color.

For example, I would like to test this color: #7c7c7c.

What does the CSS look like? Can you write that for me, please? I will then proceed based on your video.

John

[Elvin]

What does the CSS look like? Can you write that for me, please? I will then proceed based on your video.

You can try this:

<style>
body {
color: #7c7c7c;
}
</style>

[John]

Yes, that’s it, Elvin. Thanks !

However, I have not yet found in Display Rules the option to choose Body. In other words, when I choose, for example, pages, all of the content on a page is changed to gray, whereas I want only the body of the page in gray. The H3-block should remain in black.

John

[Elvin]

You can explicitly set the color of H3 on Appearance > Customize > Colors > Headings.

By default, it’s set to inherit. Set its color to Black or #000000 so it doesn’t inherit the CSS you’ve added. 😀

[John]

Excellent !

But what should be: Hook – Setting?
And what should be: Display Rules?

So many options. I am not sure which to choose?

[John]

I think I have it, Elvin !

I’ll get back to you if I run into a problem. Thanks.

[John]

I got it solved, Elvin. You were a great help. Thank you !

[Elvin]

Nice one! Thanks for letting us know. Glad you got it sorted. 😀

[John]

And I gave a 5 of 5 review on WordPress.org. Where else can I give positive feedback? On GP somewhere?

John

[Author]

Posts