I click on Home Page, using Site Builder, I add a row. I add the Vantage Headline widget to this row. On design I click on Font Color and make it an awful bright yellow. I save and refresh my page. The font color in this widget is not changing.
I inspect the page using Chrome Developer tools and try to see if I find the yellow color applied. I do not.
I see the following CSS Path contains the color:
#panel-24-1-0-0 > div > h1
I can apply that CSS to change the color of the font to yellow with no issues. However, should I have to? Since I’m selecting a font color in the widget editor, I would assume that it should be applied. Am I doing anything wrong?
Hi Lery
The Headline Widget has it’s own set of styles so we’ll unfortunately need to set those manually under Appearance > Custom CSS or use some more advanced targeting in the row or widget.
Try the following under Appearance > Custom CSS:
/* Vantage Headline Widget */ .widget_headline-widget h1 { color: #444444; } .widget_headline-widget h3 { color: #666666; }Edit as required.
Hope that helps :)
Hi Andrew. That did work but it changes all of the Vantage Headline’s. Is there a way to be more specific?
Sure, we can always be more specific. Do you want those changes to just apply to the home page? That would be:
/* Vantage Headline Widget - Home Page */ .home .widget_headline-widget h1 { color: #444444; } .home .widget_headline-widget h3 { color: #666666; }Each page has a unique body class which we can prefix selectors with.
That works perfectly, thank you. I’ll continue to try and find the selectors myself using inspector. The fact that I’m still learning makes it difficult at times. Have a great day!
Super, glad that helps. Let us know if you need any further help :)
All the best.
Andrew, something that I ran into I think you can help with. You said that each page has a unique body class. I’m inspecting the blog page I have. This has a body class of a few items. They include: blog logged-in admin-bar custom-background responsive layout-full mobilenav customize-support
With that in mind I’m trying to style all the h1 elements. I’m using the following:
.blog h1 {
color:yellow;
}
When I do nothing happens. The inspector looks to accept this, but I think it’s being inherited from somewhere else.
.blog is the page class there. You can hack this by adding !important to the value. The problem is that there is a more specific selector than yours so it wins the conflict.
For the Blog page it would need to be:
.blog article.post .entry-header h1.entry-title { color: yellow; }That worked perfectly. Now I’m going to have to figure out how you figured out that selector because I couldn’t :-) Thanks again!
Super, glad that helped. I’m using Google Chrome but all browsers have a developer tool. Using Chrome Developer I inspected the headings on the blog page. The lead me to the selector which I added .blog in front of to make it specific for the blog page.