Make Firefox 3 use green for secure web pages

My last posting was about how Firefox 3 no longer changes the color of the address bar to indicate encrypted Web pages. It was a feature I liked in version 2, and I explained how to restore the yellow address bar in Firefox 3 for Windows.

However, I never got the concept behind yellow. To me, yellow means "warning" rather than "good" and Web pages displayed using the HTTPS protocol are good things, not something anyone needs to be warned about.

Green means good. Firefox 3 uses dark green for the new site identification button. IE7 uses a light green address bar (see below) when the phishing filter is enabled and you're looking at a Web page with an Extended Validation certificate (IE7 doesn't color the address bar for normally encrypted Web pages).

So, if you're going to force Firefox 3 to color the address bar for encrypted HTTPS pages, why not use green?

Follow the instructions from my previous posting, but insert the below into the userChrome.css file. The only difference is the background color; this specifies the same light green that IE7 uses.

#urlbar[level] .autocomplete-textbox-container
{ background-color: #D0F2C4 !important; }

Here are three screen shots from Firefox 3 of the same page, the NewEgg user log-on page. This is a normal, secure, HTTPS page, it does not use extended validation. Chose the behavior you prefer.

The default behavior in Firefox 3--a white address bar

Firefox 3 with the yellow address bar (color borrowed from version 2)

Firefox 3 with a green address bar (color borrowed from IE7)

Update June 27, 2008: This also works with Firefox version 2.

My next posting is about expanding the blue site id button to make HTTPS pages more visually obvious.

See a summary of all my Defensive Computing postings.

[FrankTurd]

Awesome! Thanks for the tip. I noticed that FF3 lacked the "yellow", but I like your idea of using green. Much better.

[AXG]

In Windows Vista, go to Control Panel, Folder options and turn on the "Show Hidden Files and Folders" option. Go to C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<some number>.default\chrome to find the user-Chrome-examples.css file and do the editing. It works. Any extensions like Stylish etc. will mess up the URL bar color.

[josh_nippon]

I tried the insert in to Chrome file. It worked...sort of. The URL field isn't green, it has a green frame around it. Suggestions???

[avoidz]

Great tip, thanks. I always liked the colored address bar; I hardly even notice the favicons. Green is preferable to the yellow, too