When I add new css style in the Custom CSS section or Edit CSS sections of the Vantage Premium theme, they do not affect the typography of the resulting pages. We installed Google fonts and it does not seem to change the typography either. Specifically we are trying to change all h4 heads to a custom blue color. Only when we manually enter that color in the Pagebuilder cell editor (tiny mce) will it stick.
What must we do to change the h4 color once and have it apply to all instances on the website?
See the test site where h4 heads on the left have been manually altered in the page builder editor, and heads on the right are styled h4 but the blue color is not picked up from the css entries.
URL: http://lcitest.com/wp/faqs-common-questions-and-issues-facing-private-equity/
Hi Buck
The issue with Easy Google Fonts for example is that it targets:
h4 { }and Vantage targets:
.entry-content h4 { }which is more specific so it wins.
Try prefixing your heading declarations like h1, h2 etc with .entry-content and your Custom CSS should take effect.
If you’re not already using your browser’s developer tool to inspect elements, please, check out our quick video here:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
When you use the inspector it’ll become clear what is happening. In a case like this you’d see your rule being overwritten and then can make adjustments.
Hope that helps.
Appearance > Custom CSS, just prefix the selector:
.entry-content h4 { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #00518b; font-size: 17px; line-height: 19px; font-weight: bold; }Here is a mini tutorial using just the Chrome Developer Tool and it’s built in inspector:
Click the image for a larger view.
And here is what CSS specificity is all about:
https://css-tricks.com/specifics-on-css-specificity/
AAA+ Solid Gold customer support. Thank you so much!
Super :) Glad to hear that helped.
All the best with your site.