Home>Support>CSS Text Styles in SiteOrigin Editor stopped working after editing font sizes

CSS Text Styles in SiteOrigin Editor stopped working after editing font sizes

By BoA, 7 years ago. Last reply by Alex S, 7 years ago.

Example CSS style:

{
font-size: 1.5em;
line-height: 200%;
}

This does no longer apply to H1 (H One) text in SiteOrigin Editor. Yesterday I made some ajustments on font sizes in “Appearance”. After ajusting the default font sizes all CSS tweaks on text has no longer any effect.

Can anybody explain?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi BoA,

    Your theme is likely outputting more specific CSS to ensure the changes settings you’ve adjusted work.
    Do you have a public URL where we can take a look at what’s going on?

    • 7 years, 6 months ago BoA

      Hi Alex S,
      Link to our site: http://boasykler.no

      • 7 years, 6 months ago Alex S
        Hi, I Work Here

        Hi BoA,

        Oh! Sorry! This didn’t appear in my notifications for some reason. :(

        Okay so the issue here is that yuou adjusted the font sizes via the customizer (WP AdminAppearanceCustomize, Theme DesignFonts). Your previous CSS is not as specific as the customizer CSS, which uses .entry-content h1. To override the customizers CSS, please try either:

        .entry-content h1 {
font-size: 1.5em;
line-height: 200%;
}

        Or:

        .site-main .entry-content h1 {
font-size: 1.5em;
line-height: 200%;
}
        • 7 years, 6 months ago BoA

          Hi Alex S,

          Thanks for the reply, but no, none of your suggestions helped. We use WP SuperCache and sometimes changes in editor or CSS do not show until you delete the cache for the page (which I did).

          We use automatic update of WordPress, and maybe there was an update during the period when customized Font CSS stopped working. We use the latest WordPress 4.7.3, and maybe the CSS rules has changed (?) We use Vantage Premium 2.5.4

          Any other suggestions?

          SiteOrigin Editor

  2. 7 years, 6 months ago BoA

    Hi Alex S,
    Link to our site: http://boasykler.no
    Spesific: http://boasykler.no/trek-spesial/hverdagssykkel-guide/
    Look at the headings (H1) above the large photos. CSS has no effect after ajusting font size in “Appearance”.

  3. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi BoA,

    The CSS styles field doesn’t actually support selectors. It only supports inline styling. So, for example, this will work:

    font-size: 1.5em;
line-height: 200%;

    This won’t:

    h1 {
    font-size: 1.5em;
    line-height: 200%;
}

    Does that make sense? Please try adding the CSS via SiteOrigin CSS or an equivalent method of adding full CSS.

    By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.

  4. 7 years, 6 months ago BoA

    Hi Alex, thanks for reply!

    I’m not sure if I understand what you mean by “selectors” and “inline styling”.
    Anyway, three weeks ago using CSS in SiteOrigin editor was no problem. Suddenly all CSS codes related to font size and line hight stopped working, after I as an experiment played with different font sizes in WP Admin > Appearance > Customize > Theme Design > Fonts. To me it seems as some functions from early Theme/SiteOrigin widgets was cancelled by changing font size preferances (?).

    We use SiteOrigin CSS, and Custom CSS for codes that covers the entire site.
    PS! I did’nt find the “support tab” for email support.

  5. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi BoA,

    The first CSS I mentioned (the working CSS) are inline styles. They’re directly applied to an element and do not require a selector – the second CSS I referenced is applied via a selector.

    Okay so the CSS you’re using was added to the CSS styles field (like the above picture), it should have never worked and I’m not too sure why it did. I can assure you it’s unintentional.

    Regarding using the customizer font settings (Theme Design > Fonts). The CSS generated by those font settings aren’t all that specific and are easily overridden by other CSS. For example, if you add the CSS pictured in the CSS Style field to SiteOrigin CSS it’ll override the theme default.

    The support tab (the tabs are vertical) is the last item on the left.

    • 7 years, 6 months ago BoA

      Hi Alex,
      OK, so if it never was intented to write CSS font styles in the editor field, its good to know that the Theme is working properly now. The CSS field in editor still put out font line hight, but not font size. Strange (?).
      Thank you for your patience, my skills with CSS are at absolute novice level. Can you recommend a site for learning CSS basics?

  6. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi BoA,

    Can you please clarify what CSS you’re working and where you added it? Sorry, I’m really not familiar with your website so I can’t really spot any differences. Sorry about this!

    I recommend CSS Tutorials by HTML Dog.

  7. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi BoA,

    Preface: you should remove the brackets as they’re invalid. With inline styles you only need to declare the properties (the stuff inside the brackets).

    As you’ve set the font size in the theme, the theme is overriding the CSS. You’ll need to use a selector to bypass this. Please set the widget class (the one pictured in the screenshot) to guide h1 and then save.

    Please then add the following CSS to WP AdminAppearanceCustom CSS:

    .entry-content .guide-h1 h1 {
    font-size: 1.5em
}

    How does that look?

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More