• ARTICLES
SEARCH

How-To Geek

Make the Firefox Awesome Bar Semi-Transparent Like Google Chrome

Would you like to make the Firefox Awesome Bar drop-down menu semi-transparent like in Google Chrome?  Here’s a quick trick that can make your Firefox Awesome Bar a bit more awesome.

When you type an address or search query into the address bar in Google Chrome, the drop-down list of history and search suggestions that appears is slightly transparent.  Nothing extreme, but it adds a nice touch.

sshot-2010-06-04-[12-59-18]

Firefox’s Awesome bar, on the other hand, is fully opaque by default.

sshot-2010-06-03-[15-26-42]

We can change that with a simple change.  Exit Firefox, then open your Firefox profile folder by entering the following in the address bar in Explorer or in the Run command:

%appdata%\Mozilla\Firefox\Profiles\

Open the default folder, and then open the Chrome folder in it.

sshot-2010-06-03-[16-04-43]

Now, open the userChrome.css file in an editor such as Notepad.  If you do not have a userChrome.css file, open the userChrome-example.css file instead.

sshot-2010-06-03-[16-05-53]

Now, add the following to the end of the file:

#PopupAutoCompleteRichResult[type="autocomplete-richlistbox"]
{
    opacity: 0.9 !important;
}

You can change the opacity value, but 0.9 seemed the closest to Chrome’s transparency while keeping the text readable.

Save the file as userChrome.css in that same folder.  If you’re editing with Notepad, make sure to select to save as All Files so the file won’t be saved with a .txt extension.

sshot-2010-06-03-[23-51-30]

Open Firefox, and now your Awesome Bar’s drop-down list will be transparent.  Actually, it may look even more awesome than Google Chrome’s address bar!

sshot-2010-06-04-[00-01-17]

Conclusion

With this simple trick, you can make your Firefox Awesome bar a bit more awesome.  With tweaks like this, it’s no wonder Firefox is still so popular.

Special thanks to Daniel Spiewak for the tip!

Matthew digs up tasty bytes about Windows, Virtualization, and the cloud, and serves them up for all to enjoy!

  • Published 06/4/10

Comments (12)

  1. Andrew

    In case anyone is trying to do this on a Mac, the userChrome.css file is found in /Library/Application Support/Firefox/Profiles/.

    @jaledwith

  2. Francisco

    thanks for the tip!! it looks awesome :D

  3. vistual

    worked nicely – looks good.
    thanks !

  4. o0k

    very nice, thx for the tip

  5. van

    thankx

  6. Ryan

    It’s not working for me. I have the Silvermel theme, could that be causing an issue? Otherwise I followed each step and there appears to be no change in transparency.

  7. bobbylight

    I couldn’t get this to work either, my files didn’t say .css would that matter?

  8. Maja

    This didn’t work for me either, and I really can’t figure out why not. Any ideas?

  9. Ryan

    Finally figured it out. The spacing of characters you have in the text box is different than the character spacing in the screen shot. Once I switched it to look like the screen shot it worked for me. Thanks for the tip!

  10. bobbylight

    @ Ryan can you copy and paste what you did, I still can’t get it

  11. robin

    Use this addon much easier:
    All-Glass Firefox mod, based on glasser https://addons.mozilla.org/en-US/firefox/addon/12181/
    ive been using this version and the ones before for years it works great!

  12. John

    Doesn’t work at all. Waste of time…

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!