Making Firefox 89+ Look Better With Vista (Extended Kernel)

[asininetwat]

Whether or not you're a fan of the Firefox redesign, it looks like it's here to stay. Thanks to win32's Extended Kernel, it's also on Vista. Unfortunately it doesn't work well with Aero and kinda looks like this:

There's a weird white gradient covering the top of the browser including the windows buttons. It may be that I'm just bad at Googling but I didn't find a guide on how to fix this very simple (and very niche) problem. I'm also not a programmer so this took me an awful long time to figure out (considering it's just CSS).

Since us Vista holdouts probably appreciate the pretty glass transparency of Vista here's my sort-of fix for the gradient.

Step 1 - Enable Firefox customization

According to this, you'll need to toggle a setting before you can customize Firefox. To do this, go to about:config and look for the toolkit.legacyUserProfileCustomizations.stylesheets toggle and set it to true. Then go to about:profiles and open the root directory of the default-release profile. Here you need to make a folder named chrome where you will place the CSS file used to customize Firefox. This file will be named userChrome.css

Step 2 - Make everything transparent!

Everything in the copybox below literally just makes the different parts of the browser transparent. I've also made the URL box semi-transparent unless focused like IE 9 which I always thought was pretty neat. Just copy-paste this into userChrome.css.

/* Removes colour from the tabs bar */
#TabsToolbar{
	background-image: none !important;
	color: white !important;
}

/* Changes background and text colour for the navigation bar */
#nav-bar{
  background: transparent !important;
  color: white !important;
}

/* Makes the bookmark and add on bars transparent for more Aero goodness */
#PersonalToolbar, #addon-bar{
  background: transparent !important;
  color: white !important;
}

/* Changes the colour of the navigation buttons */
.toolbarbutton-1{
	fill: white !important;
}

/* Makes the URL bar semi-transparent like IE */
#urlbar > #urlbar-background{
	background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Makes the URL bar solid when in focus*/
#urlbar[focused] > #urlbar-background{
	background-color: rgba(255, 255, 255, 1) !important;
}

Step 3 - Restart the browser

Here's what it looks like with the changes:

That's all! It's embarrassing how long this took me and hopefully this helps someone save some time. r/FirefoxCSS and what remains of my high school web design class was what I used to figure stuff out.

It's a little hard to see the text in the inactive tabs behind a white background so I'm trying to figure out how to make it more legible. If anyone has any suggestions on how to improve this (and help my poor eyes see these better ) I would appreciate that.

[sunryze]

Interestingly, this problem happens on 7 as well. Seems to be an issue with Aero in general. I think Firefox does that on purpose to try and emulate Acrylic or something on older versions.

[Vistapocalypse]

Related thread in the Web Browsers forum:

https://msfn.org/board/topic/182991-firefox-broke-aero-intentionaly/