White Flash before Header Image - Javascript fadein? - Slideshow, opacity?

First up Sydney is an awesome theme! Looks really clean, super easy to build with compared to others I’ve used in the past.

But I’m having so much trouble trying to get rid of this weird white flash before header images load on my homepage (hidden), and on two other pages which I’ve customized the homepage functionality into (hidden, hidden).

I’ve had a heap of freelancers look over this and not be able to solve it yet. I’m guessing it’s a built in javascript animation or fadein of some sort.

It’s definitely not the image size or anything to do with the images loading slow. That’s why I’ve added a tiny 16kb image to the /partners page to show that it still happens no matter how small the images are.

If anyone has any idea how the heck to get rid of this that would be amazing.

Hello @mcleodx,

Please try to use the following CSS code to avoid that flash.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

div#slideshow div.slide-item {
    opacity: 1 !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thanks very much for the reply!

I added that code to the css editor and it doesn’t seem like it’s had any effect. Any more ideas on what the issue is?

Thanks
Joel

Okay Joel,

Did you try to clear browser cache?

Kind Regards, Roman.

That’s defintely an improvement! Clearing cache worked, thanks!

Appreciate you taking the time to help out Roman,

Kind Regards
Joel

What’s the best way to set individual background colours for each of the three pages as well Roman? I’ve set the bg colour for homepage before but want individual colours for each page to remove the white all together.

Thanks!

Hello Joel,

Please try to use the following CSS code to change background color of your home page to light blue.

body.page-id-71 {
    background-color: lightblue;
}

You can replace lightblue with any other color or color code.

If you want to know your pages’ IDs, you can provide links and I will tell you IDs.

Kind Regards, Roman.

Hi Roman

It’s definitely an improvement, the only issue is the white background areas below the header slider image also turn the same colour. I’ve tried to isolate only the background of the slider. So far no luck

Cheers for your help,
Joel

Okay Joel,

If you want to change only slider background, then please try to use this CSS code instead:

body.page-id-71 div#slideshow {
    background-color: lightblue;
}

Kind Regards, Roman.

Thanks so much for your help Roman! Really appreciate the effort.

Are you able to remove the urls in this thread. I’ve noticed that they’re showing in google already when searching for the site name.

Thanks for this!

You are welcome Joel!

I’ve removed URLs.

Have a nice day :slight_smile:

Kind Regards, Roman.

Cheers Roman!

Your as well