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.

CSS style changes don’t stick

Resolved 5 replies premiumthemetheme-vantage
Buck Lawrimore
10 years ago · Last reply by Andrew Misplon 10 years ago

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/

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

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 10 years, 4 months ago

    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.

  2. Andrew Misplon Staff 10 years, 4 months ago

    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.

  3. Andrew Misplon Staff 10 years, 4 months ago

    And here is what CSS specificity is all about:
    https://css-tricks.com/specifics-on-css-specificity/

  4. Buck Lawrimore 10 years, 4 months ago

    AAA+ Solid Gold customer support. Thank you so much!

  5. Andrew Misplon Staff 10 years, 3 months ago

    Super :) Glad to hear that helped.

    All the best with your site.

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