This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Headline and Font Color Not Applying

Open 9 replies premiumthemetheme-vantage
Lery
11 years ago · Last reply by Andrew Misplon 11 years ago

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?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 11 years, 1 month ago

    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 :)

  2. Lery 11 years, 1 month ago

    Hi Andrew. That did work but it changes all of the Vantage Headline’s. Is there a way to be more specific?

  3. Andrew Misplon Staff 11 years, 1 month ago

    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.

  4. Lery 11 years, 1 month ago

    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!

  5. Andrew Misplon Staff 11 years, 1 month ago

    Super, glad that helps. Let us know if you need any further help :)

    All the best.

  6. Lery 11 years, 1 month ago

    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.

  7. Andrew Misplon Staff 11 years, 1 month ago

    .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;
}
  8. Lery 11 years, 1 month ago

    That worked perfectly. Now I’m going to have to figure out how you figured out that selector because I couldn’t :-) Thanks again!

  9. Andrew Misplon Staff 11 years, 1 month ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread