Custom theme 'blinks' Core colors when loading (video inside)

[James Gryphon]

The theme my forum uses is based on the Core theme, but with changes to the background, colors, etc. I'm not sure whether there's any way to succinctly describe what happens (I know the title of this topic makes no sense), so here's a video I took to show this irritating phenomena. This occurs every once in a while (not all of the time) when you load or reload the page. It works fine after a moment, but just knowing that it's there irks me.

Has anyone seen something like this before, and if so, do y'all know how can it be fixed?

[Antechinus]

I assume you're talking about what is commonly called FOUC. Have you inserted any calls in the template for javascript files before CSS files? That's one known cause.

[James Gryphon]

I guess that's possible, but unfortunately, I have no idea where to begin to look for them. From what I can tell, index.template.php looks pretty much the same as the original Core file. There've been a few mods installed, but the trouble happens the same without them as with them.

[Antechinus]

The Youtube link doesn't work for me. Which theme is it?

[James Gryphon]

The Youtube link doesn't work for me.

Not at all? Well, that's fine; I'll do my best to describe what happens without it. Or you can even go to the forum itself if you care to spend the time (it shows up under Google/Bing searches as the "Loamhedge Abbey" forum, at Soopergrape.com).

Anyway, the video shows an obvious derivative of Core (with a picture background and red bars). At the two second mark, I reload the page, and it briefly shows a white background with blue, non-gradiented bars, before finishing loading and working properly.

Which theme is it?

When I started out, the theme was a duplicate of Core. I made numerous changes to the CSS (to change the color of links, and to add in a background) and new .gifs and .jpgs. After I noticed some mods automatically installed correctly on Core, but not my theme, I violated multiple good programming practices by overwriting Core directly, so as to 'fool' mods into installing more easily. It's seemed to work, without creating any problems that didn't exist before.

[Sir Osis of Liver]

It's loading default Core colors and background, then switches to custom.

http://www.soopergrape.com/RAF/

[Antechinus]

Oh that. That's just a common problem with lazy "themers" doing variants. They change the images for certain areas (catbg.gif etc) but don't change the background colours in the CSS. The result is that if you hit the page without the images already cached in your browser, or if you clear your browser cache, you'll see the background colours while your browser is acquiring the images.

Two ways you can deal with it. The old school way is to change the CSS so the background colours more or less match the images that will be called over the top of them. This is what we used to do back before we had CSS3 gradient support.

Better option, and not much more work, is to just ditch the images entirely and use custom CSS3 gradients instead. No image caching required, so will always look right.

[James Gryphon]

Two ways you can deal with it. The old school way is to change the CSS so the background colours more or less match the images that will be called over the top of them. This is what we used to do back before we had CSS3 gradient support.

The trouble is, I've spent considerable time scouring the CSS files trying to find those colors so I can tear them out, and none of it has seemed to do any good. I've changed just about every color that's a variant of blue in index.css and rtl.css that I can find and it still shows up the same as it always has.

If I'm missing something blindingly obvious, I'd love to be enlightened to it. This is the most minor problem that the forum has right now, but it's the one that's driving me the craziest.

[Antechinus]

Ignore rtl.css, unless you're running a multilingual forum that includes Hebrew, Arabic, etc. That file will never be called unless someone has selected an RTL language.

Here's one leftover:

Code Select Expand

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: #000;
font-style: normal;
background: url(../images/titlebg.jpg) #E9F0F6 repeat-x;


Here's another:

Code Select Expand

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers. */
.catbg, tr.catbg td, .catbg3, tr.catbg3 td
{
background: url(../images/catbg.jpg) #88A6C0 repeat-x;


And another:

Code Select Expand

.catbg2, tr.catbg2 td
{
background: url(../images/catbg2.jpg) #A1BFD9 repeat-x;


That appears to be all of them.

[James Gryphon]

That was it. I feel like an idiot having checked everything with color: , and eventually everything with a # next to it and still missed those... but I guess the problem's 'fixed', and better knowledgeable late than a fool forever, even if somebody else had to figure it out for me (an option I hate to have to resort to).

As for y'all's other suggestions, thanks; I'll look into eventually getting some CSS3 templates in and ditching the images, once I have a good length of time to spare.

[Antechinus]

The thing to look for in this case was "background".

And you don't need CSS3 templates as such. You could just leave the background colour in case someone is using an old browser that won't do gradients (although that is unlikely these days) and throw in the gradient as a background-image declaration.

So for this one:

Code Select Expand

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: #000;
font-style: normal;
background: url(../images/titlebg.jpg) #E9F0F6 repeat-x;

You could use:

Code Select Expand

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: #000;
font-style: normal;
background-color: #E9F0F6;
background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);

Where you just set your 0% and 100% hex codes to whatever colour you like (the example is a basic white to black gradient, coz I'm lazy).

[Squash]

 Antechinus...

Thanks for the gradient tip. It help me change my forum to a different gradient of 2 colors, that I have been trying to do forever.

Many thanks!!!

[Antechinus]

Cool.

[Squash]

I took advantage of your gradient and did my background as well.

Because of your post my site now looks like this....

www.wps-soccer.com

[hilerytom]

oh really...... i m also facing the same problem....... 

[Antechinus]

So use the same solution.