Firefox users have been asking for a semi-transparent Awesome Bar like the one found in Google Chrome for years now. Mozilla has finally given in and released an experimental version of the Awesome Bar that is semi-transparent. The Awesome Bar is a toolbar that sits at the top of the Firefox window and provides quick access to commonly used features such as bookmarks, history, web pages you’ve visited, and open tabs. The toolbar is currently opaque, but Mozilla is working on a version that is semi-transparent so you can see more of your browser window. Users who want to try out the new Awesome Bar can do so by installing the latest Firefox beta or using the “Experimental Web Platform Features” add-on. Once installed, click on “Tools” in the menu bar and select “AwesomeBar”. The new Awesome Bar will be visible at the bottom of the window. While it’s not perfect yet, this experimental feature is a step in the right direction for making Firefox more like Google Chrome. ..


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.

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

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:

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

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.

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

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.

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!

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!