Archived topic
Color Headings in sections
11 replies · Started by Henk on February 13, 2017
Hi,
I work on a page with sections and I would like to change the color of the headings.
In the settings of the section I can change the color of the paragraph text but that doesn't change the color of the headings.
I tried to fix it with an id+css but unfortunately I keep struggling with finding right css-code
I tried something like this:
In settings section:
id=white
In CSS
#white H1{color="ffffff;}
I hope someone can help me. Thank you very much.
Cheers,
Henk
Hi Henk,
Have you tried changing them in Customizer > Colors > Content > H1/H2/H3?
Or you are wanting to have specific settings just for that page?
Let me know.
Hi Leo,
Thank you for your prompt reaction!
The color of my headings is set in the customizer, black. In this situation I use a section with a background (photo) and black does not stand out enough.
Thanks
I see. Are there a lot of them that need to be changed specifically for the background?
The easy way would be change them directly inside that section You can see it if you use the visual editor.
https://docs.generatepress.com/article/sections-overview/#adding-content
But if you have to do this to a lot of them I can give you a quicker way :)
Thanks. I tried that but unfortunately that's not the best option for me. Do you know how I can fix it with an "id" in the settings of the section and some css in the "extra css" part in the customizer. This solution gives me also the possibility to play with the fonts.
Of course - that was going to be my second suggestion.
Add this CSS:
.custom-section-header h1 {
color: #ffffff;
}
Then you can add custom-section-header class to the Custom Classes field in Section settings.
Let me know if this helps.
Edited the code above :)
Goodmorning Leo!
It works!!
Beside your solution, I found another one (while I was sleeping;-)
I give the <H1> an id in the text-editor and style it with some CSS in "Extra CSS" in the cusomizer.
How simple:-)))
Thanks for your assistance and ideas!
Glad I could help!
Hi Henk!
I had the same issue with the headlines in sections that you had.
Like you, I had a colour set for H1, in the Customizer.
This setting seems to override what you do in the sections panel when it comes to colour and headings.
As my H1-colour was the same as my text-colour, I changed H1 to inherit the colour instead and - voilá - it worked. (Don't know why I explicitly set a colour for the heading, as it was the same...)
I can now change the headline colour in sections using the settings panel.
To GP: This "solution" only works if you have the same colour for headings and text. So if you want things to tweak this could be something to look into: If I set another colour for text in a section, this should always override the colour I have set in the Customizer.
/Cecilia
The text color in section's settings would only change the <p> color.
For people who want different <h1> color, my solution is needed :)
That may have been your intention but it does not work that way - which I think is great since I got the result I was after. I just changed both <h1> and <p> using only the colour setting in sections.
(With the setting inherit for H1 in Customizer).