Home>Support>New SiteOrigin CSS plugin is deleting my CSS code in Custom.css

New SiteOrigin CSS plugin is deleting my CSS code in Custom.css

By QQuax, 9 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I am using the Vantage Premium theme and the only plugins I have installed are all from SiteOrigin. They are: Page Builder by SiteOrigin; SiteOrigin CSS; and the SiteOrigin Widgets Bundle.

Whenever I use the new SiteOrigin Advanced CSS editor, this is what happens.

Before:

/**---------------------------Responsive Typography-----------------------------------**/
h1, h2, h3 {
  text-transform: uppercase !important;
}

body {
  line-height: 1;
  font-size: 100% !important;
}

body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: .5 !important;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5 !important;
}

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25 !important;
  /* equivalent to 20px */
}

@media (min-width: 43.75em) {
  #page {
    font-size: 1em !important;
    /* equivalent to 16px */
    line-height: 1.375 !important;
    /* equivalent to 22px */
  }
}

h1 {
  font-size: 2em !important;
  /* 2x body copy size = 32px */
  line-height: 1.25 !important;
  /* 45px / 36px */
}

@media (min-width: 43.75em) {
  h1 {
    font-size: 2.5em !important;
    /* 2.5x body copy size = 40px */
    line-height: 1.125 !important;
  }
}

@media (min-width: 56.25em) {
  h1 {
    font-size: 3em !important;
    /* 3x body copy size = 48px */
    line-height: 1.05 !important;
    /* keep to a multiple of the 20px line height and something more appropriate for display headings */
  }
}

h2 {
  font-size: 1.625em !important;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615 !important;
  /* 30px / 26px */
}

@media (min-width: 43.75em) {
  h2 {
    font-size: 2em !important;
    /* 2x body copy size = 32px */
    line-height: 1.25 !important;
  }
}

@media (min-width: 56.25em) {
  h2 {
    font-size: 2.25em !important;
    /* 2.25x body copy size = 36px */
    line-height: 1.25 !important;
  }
}

h3 {
  font-size: 1.375em !important;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364 !important;
  /* 25px / 22px */
}

@media (min-width: 43.75em) {
  h3 {
    font-size: 1.5em !important;
    /* 1.5x body copy size = 24px */
    line-height: 1.25 !important;
  }
}

@media (min-width: 56.25em) {
  h3 {
    font-size: 1.75em !important;
    /* 1.75x body copy size = 28px */
    line-height: 1.25 !important;
  }
}

h4 {
  font-size: 1.125em !important;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111 !important;
}

@media (min-width: 43.75em) {
  h4 {
    line-height: 1.22222222 !important;
    /* (22px / 18px */
  }
}

blockquote {
  font-size: 1.25em !important;
  /* 20px / 16px */
  line-height: 1.25 !important;
  /* 25px / 20px */
}

@media (min-width: 43.75em) {
  blockquote {
    font-size: 1.5em !important;
    /* 24px / 16px = */
    line-height: 1.45833333 !important;
    /* 35px / 24px */
  }
}

AND THIS IS THE RESULT WITH DOING NOTHING MORE THAN HITTING THE ICON TO GO TO THE ADVANCED EDITOR AND THEN COMING BACK TO THE CUSTOM.CSS WITHOUT MAKING ANY CHANGES:

/**---------------------------Responsive Typography-----------------------------------**/
h1, h2, h3 {
  text-transform: uppercase !important;
}

body, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: .5 !important;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5 !important;
}

#page {
  font-size: 1em;
  /* equivalent to 16px */
  line-height: 1.25 !important;
  /* equivalent to 20px */;
}

@media (min-width: 43.75em){
  blockquote {
    font-size: 1.5em !important;
    /* 24px / 16px = */
    line-height: 1.45833333 !important;
    /* 35px / 24px */;
  }

}

h1 {
  font-size: 2em !important;
  /* 2x body copy size = 32px */
  line-height: 1.25 !important;
  /* 45px / 36px */;
}

@media (min-width: 56.25em){
  h3 {
    font-size: 1.75em !important;
    /* 1.75x body copy size = 28px */
    line-height: 1.25 !important;
  }

}

h2 {
  font-size: 1.625em !important;
  /* 1.625x body copy size = 26px */
  line-height: 1.15384615 !important;
  /* 30px / 26px */;
}

h3 {
  font-size: 1.375em !important;
  /* 1.375x body copy size = 22px */
  line-height: 1.13636364 !important;
  /* 25px / 22px */;
}

h4 {
  font-size: 1.125em !important;
  /* 1.125x body copy size = 18px */
  line-height: 1.11111111 !important;
}

blockquote {
  font-size: 1.25em !important;
  /* 20px / 16px */
  line-height: 1.25 !important;
  /* 25px / 20px */;
}

It deletes a good portion of my custom.css.

Can anyone help me out as to what is the cause of this?

Thanks.

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

  1. 9 years, 11 months ago Magus
    Hi, I Work Here

    Hi QQuax

    Thanks for letting us know about this. I have tested and am able to replicate the issue exactly. I’ve logged this as a potential bug in our issue tracker. We’ll investigate this as soon as possible and try come up with a fix.

    Thanks

    Magus

  2. 9 years, 9 months ago QQuax

    Any progress with the fix for this issue?

    Was I the only person that was experiencing the conflict? Is it yet known why the CSS Editor was deleting some of my custom CSS?

    I suppose I could always use a Child Theme and put that particular CSS code for the Responsive Typography in the style.css file and then use the Siteorigin CSS editor normally?

    Does that make sense? Or does the Vantage Premium theme already have Responsive Typography similar to what I am attempting to do with my custom CSS?

  3. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi QQuax

    Sorry to hear about the hassle.

    For the moment, inserting your CSS in a child theme style.css file and then using SiteOrigin CSS addons for other new rules would be the hotfix I can think of. I’ll be sure to follow-up on this and ensure it’s properly logged and the issue is worked soon.

    (Vantage doesn’t have responsive typography like this so best to stick with your extra rules).

  4. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi QQuax

    Thanks for reporting the problems you’ve run into. Our developers have taken a look. The issues arise from media queries and !important, specifically when switching between the text and visual modes of the plugin. We’ve adding a safeguard to prevent media queries being stripped when switching modes but !important is still a problem. Both media queries and !important rules won’t be editable in the visual editor, they won’t be visible either.

    Summary: We’ve stopped media queries being stripped when changing plugin modes. Rules with media queries or !important won’t be visible in the visual editor so there is the possibility of overwriting styles.

    Not perfect :) We’re working on a better, more complete solution.

    Thanks

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