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.
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!
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.
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.
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!
would be great to be able to set a page background color per project please @Readymag
Hi @timmee you could do this by adding the code injection into a code injection element onto the single page you wish to target.
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:
Hello Kevin! Some of the workarounds are listed by the users above.
In the meantime we’ve added your feedback to the feature wishlist.
@Readymag any progress on adding this feature? My website uses a black background and the white background loading between pages is pretty alarming.
Thanks!
Can you please make this a feature? It really ruins my website experience and I can’t find a workaround.
@drewgarza @Daniella_H Unfortunately, we cannot provide a timeline for now. We suggest using a workaround that was provided by other users in this thread.
I agree – this really needs fixing, it makes Readymade site look buggy.
Still no solution for this?
My site has a black background and the white flash between pages is pretty distracting,
Sorry if I’m missing something, but where do you add the code and is it this one?
.page {background-color: blue!important;}hey, yes its this…
you can add it in the css panel of the customcode section. or like in the exmaple in a widget code or /before body section, but encapsuled in a < style > code < / style > bracket.
Amazing - thanks! I was confused as it didn’t show on preview but works when published.
I’m not a code wiz, but I found that adding both these lines to the CSS & before /body section worked for me. (it didn’t work for me just adding one of the lines - I had to do both)
Also, it helped with the ugly default white background when the site zooms / scrolls beyond my page. Hope this helps!
<style> .page {background-color: #000000!important;} </style>
<style> body{ background-Color : #000000 } </style>