Tweaking Firefox 4

I made the shift to Firefox 4 a couple weeks after it came out. As regular readers of my blog will know, I hate change, and so I tweaked it to look as close to 3.6 as I could. Tabs on bottom, regular drop down menus, etc. One thing I didn't like was the removal of the Status Bar from the bottom. I wasn't alone in that sentiment though, removing it had caused quite a bit of debate I guess, and Mozilla has a support webpage already created. It links to an Add-on which basically recreates the status bar. One thing I didn't like about it though, was lack of a top border. The first picture below shows it, the status bar is gray until its top, and then cuts off. It felt unfinished. So, I did some research, and found a pretty simple fix.

Firefox is built partially in CSS itself, and you are provided with a CSS file in which you can add tweaks. These override default settings. The problem is that I hadn't been able to find a listing of the names of features. From searching the web though, I did find what I needed.

The Status-4-Evar Add-on is built inside the Add-on bar. It has 3 sections, lined up horizontally, each with a separate id. Since it is inside the Add-On bar, I can give it a white top border, and give the Add-on bar a gray border. This will give a 3D finishing effect.

The code below is what I added to by userChrome.css file. I added the dark border, black but only .6 transparent. I also set the bottom border to zero, because for some reason setting the -moz-appearance added one, I'm not sure why. I then did the same thing for each of the 3 Status bar sections, but white instead of gray.

#addon-bar {
-moz-appearance: none !important;
border-top: 1px solid solid rgba(0,0,0,.6) !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status-bar{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status4evar-progress-widget{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status4evar-status-widget{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

The two images below are before and after screenshots. Click to view the entire window for reference.