Blue color loading first

Hi,
When I change the color theme, looks like the blue color always load first. Any solution to fix this?
And when I change the font, ex: post content font, looks like the default font loading first?

regards,
st

I have same problem.

same problem

me too!…thanks.

This is common problem with all WordPress themes. This is a variant of what is called a “flash of unstyled text” — or where the default CSS is loading first, and then the “over ride” in your custom CSS is then loading. This can also impact font loading in some cases, where the font changes after a moment from default to custom font. Same issue, just different flavor.

The *only* surefire way to avoid this 100% of the time is to put your custom CSS changes at bottom of your style.css file.

Issue is also more noticeable with child themes usage since that is effectively a CSS redirect, and slows down the site (which is why Google doesn’t like child themes, but WordPress folk do).

Inherent issue with how WordPress works, and with the fact you’re loading two sets of CSS for the same classes. With a super fast page/server, it’s not very noticeable. With slower servers (e.g., slower than .05 seconds) or with child themes, more moticeable.

Adding your custom changes to bottom – or revising the actual classes in – style.css is *only* way to fix this for all users, sadly.

• This reply was modified 11 years by simchris. Reason: custom css, fout, flash of unstyled text

Hi,
As Christopher said, the theme read style.CSS first (including default color, font, etc) then render other customization. However, I put my code in child theme – style.CSS. Why this method can not render straight from customization? Or should I put the code in theme setting?

Emil, if we have to change original style.css, we will have problem with new update.
Not mentioning there are some customization on font, etc…

regards,
st

Unfortunately, this is how the CSS works with WordPress.

When using child theme

a) child theme CSS loads
b) redirects to main theme CSS
c) custom CSS loaded in head of document

the delay is unavoidable on some servers.

Not using child theme can help with issue, but best bet is to mods to the main style.css and just do that with each update. Worth doing for removing the flash of unstyled text (“FOUT”) issue.

Quick and dirty method is just paste your custom CSS at bottom of the style.css file. You’re loading some things twice, but it can cut down on the perception due to ONE file loading both CSS (try it!). I’ve done this during development sometimes. Works pretty well. 🙂

• This reply was modified 11 years by simchris.

Note it can also be issue with testing locally as that sometimes works differently than running on a real web server.

Ok. thanks for your help.

In the meantime, I just change the original CSS, and I just put the note on top, so that if there is an update, I will know which part I need to modified.

thanks for your and this community support.
st

Good choice 🙂

I have a little cheat sheet I keep with my mods to four files, style.css, and functions.php

and I just change those each update vs dealing with the unpredictable child theme stuff.

I believe, every theme has unique functions and learning curve to master. There is problem here and there. But I am really happy with the theme. Thanks Simchris for the great tip.

st

I want my main menu to have white background with black text. What changes do I need to make in the original css file to prevent default main menu backgound color and the blue line above it from loading first?

I tried changing:

.td-header-main-menu {
background-color: #222222;
position: relative;
z-index: 2;
/* responsive portrait phone */
}

to this:

.td-header-main-menu {
background-color: #ffffff;
position: relative;
z-index: 2;
/* responsive portrait phone */
}

but it didn’t work, the default color and blue line still loads first.

What do I need to edit?