Background Color - white flash

Custom code
1

Hi everyone,

I have a website where each page has a background Color which is not white. When I navigate between pages I get a white background first then the Color I have set comes in after. How can I overwrite the default white background. I tried adding a style tag in the head with background colour but when I inspect the code it looks like the code has been overwritten.

Any help would be great. Thanks in advance.

3 Likes
2

Hi @Harley_Johnston I too have noticed this! I’m not sure why this is happening hoping a member of the @Readymag team can chime in!

1 Like
3

do you mean: if you click on a link to another page in your RM website it shows first a white flash/background befor it shows your set backgroundcolor?

I figured out, that the container/class you want to set the background-color to prevent this whiteflash is the container with the class “.page”
But as you for sure have different backgroundcolor for each page in your project there is the difficulty, that each of your page has the classname “.page”. So the problem is, that all your pages have the same “.page” class and doesn´t have a misunderstandable classname like “.page” “.page1” “.page2”.

Therefore, if you would set

.page { background-color: blue!important;}

all the whiteflashes get exchanged into blueflashes. And that is not optimal I would guess.

With pure CSS it might be not that easily possible though. I´ve tried to set a codewidget on every page with different color values like:

<style> .page {background-color: blue!important;} </style>

But this isn´t working like expected.

Well, one solution would be to work with javascript/jquery and after first loading the webpage assign additional classes like “.page1” “.page2” … to your pages and set the background-color of this new pageclasses manualy.

This are my thoughts/inverstigations on this.

3 Likes
4

Good solution @neueMeta ! Should really be baked into Readymag as a default, setting a background colour / background image in the project should automatically make this a quality of life improvement for a better experience IMO.

1 Like
5

Hi NeueMeta,

Thanks for your response. That is the issue I am getting. Your tip was useful, I have a page for navigation which has a dark background, so I used this on the .page class which avoids the white flash. It’s not perfect but it’s better than white.

Cheers!

1 Like
6

would be great to be able to set a page background color per project please @Readymag

7

Hi @timmee you could do this by adding the code injection into a code injection element onto the single page you wish to target.

8

I would really like to solve this problem.
Are there any workarounds or upcoming features? @Readymag

My site is very dark and it’s very disruptive to the experience:

9

Hello Kevin! Some of the workarounds are listed by the users above.

In the meantime we’ve added your feedback to the feature wishlist.