Good morning! I just some moved some key CSS custom code from the bottom of my main style.css file to the SiteOrigin CSS plug-in. Here’s my website: WOUnited Website
Here’s the custom CSS code:
.genesis-nav-menu {
font-size: 20px;
font-size: 2.0rem;
}
.donate-nav-menu {
background-color: #CC0000 !important;
}
.donate-nav-menu a {
color: #FFFFFF !important;
}The Problem: As you can see, the custom CSS increases the size of the main menu text and specially formats the last menu item (“Donate”). Unfortunately, on nearly all browsers, the CSS original code from the style.css file visually loads first and then the CSS custom code (contained within the SiteOrigin CSS plug-in) finally loads. This causes a very discernible “flicker” of the main menu (when clicking on a menu item or during a page refresh). To be clear, this never happened when the code CSS code was located at the bottom of the style.css file.
Is there any way to prevent this from happening? Possible a site-wide fix to make sure all style sheets are loaded before a page actually loads?
Thank you,
Mark
Forum Support Folks,
Has anyone had a chance to look into this issue? To add to what I said above, the “flicker” I mention is more of a screen redraw … that is, the previous/original CSS appears (for a few milliseconds) and then the modified CSS appears (contained in the SiteOrigin CSS plugin). Very discernible at times.
Thank you,
Mark
Hi Mark,
Unfortunately, this is just how CSS works. The browser will render as it loads the page (top to bottom – it’s very fast so if the CSS is in the same file you won’t notice it) and due to the style.css being loaded prior to the SiteOrigin CSS Stylesheet, you’ll see a “flash” or even a jump in certain cases when the SiteOrigin CSS Stylesheet gets loaded by the browser. The only technical fix we could do is have SiteOrigin CSS output first, but that’s problematic for users with using basic selectors.
Your best bet would be to add any layout changing CSS to a prior stylesheet. I know it’s not ideal, and for that, I’m sorry. Sorry mate. :(
Hi Alex,
Good morning! And, of course, thanks for your prompt reply.
Ok, no problem … just wanted to make sure I wasn’t missing anything in regard to the SiteOrigin CSS. A few comments/questions:
1) Yes, adding the code to the main style.css eliminates the problem … but I lose the great benefits of the SiteOrigin CSS plugin (and there are many!).
2) Having SiteOrigin CSS load first would, indeed, probably be problematic since I have several basic selectors I’ve modified.
3) Quick question: Does SiteOrigin CSS “run” directly from the database or does it produce an actual CSS sheet that is loaded after the main style.css sheet? Truly, just curious.
Thank you so much,
Mark
Hi Mark,
1. I know, and for that, I’m sorry. Your best idea would be to use SiteOrigin CSS to write the script and move anything that results in a flash to your child theme style.css.
3. It creates a stylesheet upon saving your custom CSS and stores it at wp-content/uploads/so-css/