The Top Part of My FireFox Screen is All Foggy White (Aero)
When using the Aero theme, the top of my screen (where the tabs are located) have a weird foggy white color. The only parts unaffected by this problem, are the top left and a little of the top right. I don't have High Contrast enabled. I'll attach a picture.
When using the Aero theme, the top of my screen (where the tabs are located) have a weird foggy white color. The only parts unaffected by this problem, are the top left and a little of the top right. I don't have High Contrast enabled. I'll attach a picture.
https://imageshack.com/i/5nzwdoj
Chosen solution
Note that you're using Firefox 29. It's currently a beta version that will become the stable release at the end of the month.
- Install Stylish and restart Firefox when prompted.
- Click the ≡ Menu Button and choose Add-ons.
- In the Add-ons Manager, click the User Styles category on the left.
- Click the Write New Style button at the top. Paste the following in the text box, give the style a name, then click the Save button.
- You can adjust the opacity value from 0 to 1.
- This is the Australis Tab Defogger style. I just changed ::before to ::after because it doesn't work otherwise.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#TabsToolbar:not(:-moz-lwtheme)::after {
opacity: 0.1 !important;
}
tab[selected="true"] {
color: black !important;
text-shadow: none !important;
}
tab {
color: white !important;
text-shadow:0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 3px #000 !important;
}
#main-window .tabs-newtab-button,
#main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/tabbrowser/newtab-inverted.png") !important;
}
#main-window #alltabs-button[type="menu"],
#main-window .toolbarbutton-1 .dropmarker-icon {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png") !important;
}
#main-window #tabview-button {
list-style-image: url("chrome://browser/skin/tabview/tabview-inverted.png") !important;
}
Read this answer in context 👍 1
All Replies (2)
Chosen Solution
Note that you're using Firefox 29. It's currently a beta version that will become the stable release at the end of the month.
- Install Stylish and restart Firefox when prompted.
- Click the ≡ Menu Button and choose Add-ons.
- In the Add-ons Manager, click the User Styles category on the left.
- Click the Write New Style button at the top. Paste the following in the text box, give the style a name, then click the Save button.
- You can adjust the opacity value from 0 to 1.
- This is the Australis Tab Defogger style. I just changed ::before to ::after because it doesn't work otherwise.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#TabsToolbar:not(:-moz-lwtheme)::after {
opacity: 0.1 !important;
}
tab[selected="true"] {
color: black !important;
text-shadow: none !important;
}
tab {
color: white !important;
text-shadow:0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 1px #333, 0 0 3px #000 !important;
}
#main-window .tabs-newtab-button,
#main-window #TabsToolbar #new-tab-button > .toolbarbutton-icon {
list-style-image: url("chrome://browser/skin/tabbrowser/newtab-inverted.png") !important;
}
#main-window #alltabs-button[type="menu"],
#main-window .toolbarbutton-1 .dropmarker-icon {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png") !important;
}
#main-window #tabview-button {
list-style-image: url("chrome://browser/skin/tabview/tabview-inverted.png") !important;
}
It worked! Thank you so much! You won't believe how many hours I've been on the Internet just trying to find a solution.