X
Tap here to go to the mobile version of the site.

Support Forum

How to change color of blank white background that shows before sites load?

Posted

The trick used to be to place a line in a UserChrome.css file. There was an update quite some time back and it seems Firefox doesn't even use this file anymore so I'm right back to seeing these eye-melting blank white pages on my monitor for a brief moment and then Firefox loads whatever site/page I clicked on.

Please tell me everybody isn't just living with this.

The trick used to be to place a line in a UserChrome.css file. There was an update quite some time back and it seems Firefox doesn't even use this file anymore so I'm right back to seeing these eye-melting blank white pages on my monitor for a brief moment and then Firefox loads whatever site/page I clicked on. Please tell me everybody isn't just living with this.

Additional System Details

Installed Plug-ins

  • Shockwave Flash 13.0 r0
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.07
  • Next Generation Java Plug-in 10.55.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • 5.1.30214.0
  • VLC media player Web Plugin 2.1.3
  • Battlelog Game Launcher (2.3.2)
  • LastPass Plugin
  • 0.3
  • 0.70.4

Application

  • Firefox 29.0.1
  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0
  • Support URL: https://support.mozilla.org/1/firefox/29.0.1/WINNT/en-US/

Extensions

  • Adblock Edge 2.1.2 ({fe272bd1-5f76-4ea4-8501-a05d35d823fc})
  • Add to Search Bar 2.5 (add-to-searchbox@maltekraus.de)
  • Color toggle 0.15 (background@toggle.wtf)
  • Context Search 0.6.3 ({902D2C4A-457A-4EF9-AD43-7014562929FF})
  • DownloadHelper 4.9.22 ({b9db16a4-6edc-47ec-a1f4-b86292ed211d})
  • Image Toolbar 0.6.15 ({A4732521-77D9-447E-A557-B279AC923F06})
  • Keyword Search 1.0.7 (keywordsearch@kaply.com)
  • LastPass 3.1.1 (support@lastpass.com)
  • NoSquint 2.1.9 (nosquint@urandom.ca)
  • PriceBlink 4.1 (info@priceblink.com)
  • Pterodactl 0.9.3 (pterodactl@zenlunatics.com)
  • Session Manager 0.8.1.3 ({1280606b-2510-4fe0-97ef-9b5a22eafe30})
  • The Camelizer - Amazon Price Tracker 2.4.6 (izer@camelcamelcamel.com)
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • about:addons-memory 8 (about-addons-memory@tn123.org) (Inactive)
  • avast! Online Security 9.0.2018.95 (wrc@avast.com) (Inactive)
  • RAMBack 1.0 (ramback@pavlov.net) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: AMD Radeon HD 6900 Series
  • adapterDescription2:
  • adapterDeviceID: 0x6718
  • adapterDeviceID2:
  • adapterDrivers: aticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64
  • adapterDrivers2:
  • adapterRAM: 2048
  • adapterRAM2:
  • adapterVendorID: 0x1002
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.2.9200.16571
  • driverDate: 12-6-2013
  • driverDate2:
  • driverVersion: 13.251.0.0
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (AMD Radeon HD 6900 Series Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: False
  • windowLayerManagerType: Direct3D 10

Modified Preferences

  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.places.smartBookmarksVersion: 6
  • browser.search.useDBForOrder: True
  • browser.sessionstore.upgradeBackup.latestBuildID: 20140506152807
  • browser.startup.homepage: about:home
  • browser.startup.homepage_override.buildID: 20140506152807
  • browser.startup.homepage_override.mstone: 29.0.1
  • browser.zoom.siteSpecific: False
  • dom.mozApps.used: True
  • extensions.lastAppVersion: 29.0.1
  • gfx.direct3d.last_used_feature_level_idx: 0
  • mousewheel.withcontrolkey.action: 3
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1402728764
  • places.history.expiration.transient_current_max_pages: 80725
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • plugin.state.npuplaypc: 0
  • privacy.donottrackheader.enabled: True
  • privacy.sanitize.migrateFx3Prefs: True
  • storage.vacuum.last.index: 1
  • storage.vacuum.last.places.sqlite: 1400788195

Misc

  • User JS: No
  • Accessibility: No
the-edmeister
  • Top 25 Contributor
  • Moderator
5425 solutions 40483 answers

http://kb.mozillazine.org/UserChrome.css It still works, but you need to create the /chrome/ folder and the userChrome.css file nowadays.

Or use this extension which automatically creates that folder and the 3 "user files". http://webdesigns.ms11.net/chromeditp.html

http://kb.mozillazine.org/UserChrome.css It still works, but you need to create the /chrome/ folder and the userChrome.css file nowadays. Or use this extension which automatically creates that folder and the 3 "user files". http://webdesigns.ms11.net/chromeditp.html

Question owner

Thanks for replying,

Maybe you can tell me what I'm doing wrong then.

In my profile folder (C:\Users\Me\AppData\Roaming\Mozilla\Firefox\Profiles\default) I have created a folder called chrome and in that folder I created a file called UserChrome.css and in that file I have this line

browser { background-color: #000 !important; }

Unless I'm missing something or doing something wrong, I think that's what I did before to get this working.

Thanks for replying, Maybe you can tell me what I'm doing wrong then. In my profile folder (C:\Users\Me\AppData\Roaming\Mozilla\Firefox\Profiles\default) I have created a folder called '''chrome''' and in that folder I created a file called '''UserChrome.css''' and in that file I have this line '''browser { background-color: #000 !important; }''' Unless I'm missing something or doing something wrong, I think that's what I did before to get this working.
jscher2000
  • Top 10 Contributor
8871 solutions 72573 answers

The file name should start with a lower case u

Hopefully that's the only issue.

The file name should start with a lower case u Hopefully that's the only issue.

Question owner

hmmm is that case sensitive? Well I'll change it and see if it works. I'll let you know if that's all there was to it. It might take me a while to notice. The blank screen doesn't always show up before loading a page.

Thank you.

hmmm is that case sensitive? Well I'll change it and see if it works. I'll let you know if that's all there was to it. It might take me a while to notice. The blank screen doesn't always show up before loading a page. Thank you.

Question owner

Ah hah I forgot about this. I've been doing a lot of night browsing again and I noticed I still get the eye melting blank page before websites load. I forgot I already made a thing about this until I stumbled on it in a search. So...

I looked at this again

browser { background-color: #000 !important; }

turns out, in the userChrome.css file I had a space before that line. Must be because I copied and pasted it that way. Woopsie!

I just got rid of that space and it looks like it worked. Now instead of a blank white page, I see a blank dark grey page (or w/e I have the background set to). Now I can stop slamming my keyboard with rage.

Ah hah I forgot about this. I've been doing a lot of night browsing again and I noticed I still get the eye melting blank page before websites load. I forgot I already made a thing about this until I stumbled on it in a search. So... I looked at this again browser { background-color: #000 !important; } turns out, in the userChrome.css file I had a space before that line. Must be because I copied and pasted it that way. Woopsie! I just got rid of that space and it looks like it worked. Now instead of a blank white page, I see a blank dark grey page (or w/e I have the background set to). Now I can stop slamming my keyboard with rage.

Modified by Taffer

paul-2014 0 solutions 6 answers

I just tried this using Chromedit but I'm still getting a while background between page loads, can you give me info on how you've fixed it? Thanks

I just tried this using Chromedit but I'm still getting a while background between page loads, can you give me info on how you've fixed it? Thanks

Modified by paul-2014

Question owner

You could try the file if you want https://dl.dropboxusercontent.com/u/7822180/chrome.7z

You would have that in your Firefox profile folder.

Like this:

C:\Users\You\AppData\Roaming\Mozilla\Firefox\Profiles\default\chrome\

And in the chrome folder I have a file called userChrome.css Make sure the extension is actually css

and in that file I have this:

browser { background-color: #000 !important; }

You can change the #000 color to whatever color you want using a color hex code.

You could try the file if you want https://dl.dropboxusercontent.com/u/7822180/chrome.7z You would have that in your Firefox profile folder. Like this: C:\Users\You\AppData\Roaming\Mozilla\Firefox\Profiles\default\chrome\ And in the chrome folder I have a file called userChrome.css Make sure the extension is actually css and in that file I have this: browser { background-color: #000 !important; } You can change the #000 color to whatever color you want using a color hex code.
paul-2014 0 solutions 6 answers

Tried that but it didn't work, I'm able to add other css instructions to hide and show other chrome items so it seems that I'm editing the correct file but the browser background color remains while.

I'm running the latest update.

Any other ideas? Thanks

Tried that but it didn't work, I'm able to add other css instructions to hide and show other chrome items so it seems that I'm editing the correct file but the browser background color remains while. I'm running the latest update. Any other ideas? Thanks

Question owner

I got a buddy to try it a little while back and he says it works. Got rid of the awful white. We are talking about the same thing here correct? The blank page that sometimes shows before a page loads?

Anyway, if that didn't work, I don't know have any other ideas. Sorry.

I got a buddy to try it a little while back and he says it works. Got rid of the awful white. We are talking about the same thing here correct? The blank page that sometimes shows before a page loads? Anyway, if that didn't work, I don't know have any other ideas. Sorry.
paul-2014 0 solutions 6 answers

Yes, that's exactly what I want to do, let me post some screenshots.

Yes, that's exactly what I want to do, let me post some screenshots.

Modified by paul-2014

paul-2014 0 solutions 6 answers

Here it is, attached.

Here it is, attached.

Question owner

I normally use an addon called color toggle. Even though the background color should be black, it's actually the sort of gray I set color toggle to.

Anyway, I put normal color back on and I tried going to a lot of different website to make sure it still works properly and it looked like it wasn't! I changed the color and now it's working again.

Try a different color, like #004444

I don't know why #000 didn't work (maybe it needs more 0s, I don't know heh). My friend said he changed it because he didn't like the black of 000, so I should still have shown black.

Regardless, does changing the color fix it for you?

I normally use an addon called color toggle. Even though the background color should be black, it's actually the sort of gray I set color toggle to. Anyway, I put normal color back on and I tried going to a lot of different website to make sure it still works properly and it looked like it wasn't! I changed the color and now it's working again. Try a different color, like #004444 I don't know why #000 didn't work (maybe it needs more 0s, I don't know heh). My friend said he changed it because he didn't like the black of 000, so I should still have shown black. Regardless, does changing the color fix it for you?

Modified by Taffer

Question owner

Wait wait, now I'm getting confused. I keep trying to get the blank page to make sure it's working. It looks like it stopped working again. ... It was working though, I don't understand.

Wait wait, now I'm getting confused. I keep trying to get the blank page to make sure it's working. It looks like it stopped working again. ... It was working though, I don't understand.

Modified by Taffer

paul-2014 0 solutions 6 answers

Yep, looks like things have changed on the latest Firefox releases, I'm trying to setup the browser for a public kiosk and this white background between the pages could be improved to blend with the system.

I'm still goggling and trying, let me know if you figure out first.

Yep, looks like things have changed on the latest Firefox releases, I'm trying to setup the browser for a public kiosk and this white background between the pages could be improved to blend with the system. I'm still goggling and trying, let me know if you figure out first.
jscher2000
  • Top 10 Contributor
8871 solutions 72573 answers

I think the browser{background-color} only appears during the brief delay before a page is loaded. For example, if you load a new tab (Ctrl+t) you should see a flash of the browser{background-color} before it loads. I also see it opening the bookmarks sidebar (Ctrl+b). (I'm testing with red, so it's pretty obvious.)

The about:blank page doesn't seem to have that kind of delay so I don't see a flash of browser{background-color} loading it, just the usual white background of about:blank.

To color the background of the about:blank page, you could try this rule in userContent.css:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:blank") {
  body {
    background-color: #888 !important; /* 50% gray */
  }
}

(Note: it's not part of the user interface, so that's why userContent.css instead of userChrome.css)

I think the browser{background-color} only appears during the brief delay before a page is loaded. For example, if you load a new tab (Ctrl+t) you should see a flash of the browser{background-color} before it loads. I also see it opening the bookmarks sidebar (Ctrl+b). ''(I'm testing with red, so it's pretty obvious.)'' The about:blank page doesn't seem to have that kind of delay so I don't see a flash of browser{background-color} loading it, just the usual white background of about:blank. To color the background of the about:blank page, you could try this rule in userContent.css: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:blank") { body { background-color: #888 !important; /* 50% gray */ } } (Note: it's not part of the user interface, so that's why userContent.css instead of userChrome.css)

Question owner

Interesting, it still works for my friend. We both have the latest version of Firefox. We are trying to find out why his works and mine doesn't.

Interesting, it still works for my friend. We both have the latest version of Firefox. We are trying to find out why his works and mine doesn't.

Question owner

We can't figure out why my friend doesn't have this problem. The only thing he has done is

browser { background-color: #191919 !important; }

in the userChrome.css . It works perfectly for him as it used to for me.

Anyway jscher2000, that userContent.css seems to work. At least, it's definitely gotten rid of the white I see when I load a session. I think I'm still seeing a flash of white from casual browsing, but I'm not sure.

It used to be that even with color toggle (changed site colors), I needed that background change in userChrome.css or else I'd have the white page. It doesn't work that way anymore for some reason. Now color toggle itself is changing the white page to it's background color setting (which is why I thought everything was still working).

I'm thinking about reseting/reinstalling my browser. Not just over this but another problem I am having where the browser pauses for a moment after I save an image file.

We can't figure out why my friend doesn't have this problem. The only thing he has done is browser { background-color: #191919 !important; } in the userChrome.css . It works perfectly for him as it used to for me. Anyway jscher2000, that userContent.css seems to work. At least, it's definitely gotten rid of the white I see when I load a session. I think I'm still seeing a flash of white from casual browsing, but I'm not sure. It used to be that even with color toggle (changed site colors), I needed that background change in userChrome.css or else I'd have the white page. It doesn't work that way anymore for some reason. Now color toggle itself is changing the white page to it's background color setting (which is why I thought everything was still working). I'm thinking about reseting/reinstalling my browser. Not just over this but another problem I am having where the browser pauses for a moment after I save an image file.

Modified by Taffer

Question owner

I am now using a fresh install of Firefox, new profile and all. The userChrome thing still doesn't work for me.

Changing the about:blank color like above helps get rid of some white, namely what I see when I load a session.

Just browsing the web and opening sites however, still gives me the white before a page loads. The only way to avoid that is to change the pages background color, which is conveniently done with the 'color toggle' addon. I wish The white didn't exist under 'normal' colors though.

I am now using a fresh install of Firefox, new profile and all. The userChrome thing still doesn't work for me. Changing the about:blank color like above helps get rid of some white, namely what I see when I load a session. Just browsing the web and opening sites however, still gives me the white before a page loads. The only way to avoid that is to change the pages background color, which is conveniently done with the 'color toggle' addon. I wish The white didn't exist under 'normal' colors though.
cor-el
  • Top 10 Contributor
  • Moderator
17757 solutions 160593 answers

Try this code in the userChrome.css file below the default @namespace line.


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

browser {background-color:#f0f0f0!important}

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

Try this code in the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css ---- <pre><nowiki>@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ browser {background-color:#f0f0f0!important} </nowiki></pre> ---- The customization files userChrome.css (user interface) and userContent.css (websites) are located in the <b>chrome</b> folder in the Firefox profile folder. *http://kb.mozillazine.org/Editing_configuration
paul-2014 0 solutions 6 answers
I think that this does the trick: http://stackoverflow.com/questions/26680708/customize-firefox-background-color-of-the-browser-between-page-load/26688457#26688457