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.
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:
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.
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.
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.