Display Colored URLs in Firefox 3 Awesome Bar

Martin Brinkmann
Jul 4, 2008
Updated • Apr 27, 2014

The Firefox 3 Location Bar which is also known as the Awesome Bar displays different kinds of data.

One user complaint is that one cannot visually distinguish the data that is displayed here as Firefox makes no distinction between bookmarks, history items or tags.

Note: Mozilla Firefox highlights bookmarks now in the address bar on the right side of the listing, but it is not as easy distinguishable as the following method.

The user -=Ben=- created a style to display different colors depending on the type of data that is displayed in the address bar suggestions listing.

Basically tags are displayed in light yellow, bookmarks in blue and history items in light green after installing the user style in Firefox.

This does work pretty well in conjunction with the Cybersearch add-on by Ryan from Cybernetnews that displays search results on a white background. All in all you got three or four background colors instead of just one which is great for distinguishing results on the first glance.

The easiest way to install this style is by installing the Stylish add-on first and then that new user style.

firefox address bar colors

The colors of the style can be easily changed if you edit the style in the extension's options. Just right-click on the icon of the add-on and select Manage Styles. Then select the user style and click on Edit to edit it.

Just replace the background color value displayed in the style information with different values. Use something like this HTML color chart for that.

The style works in all recent versions of the Firefox web browser and not only Firefox 3 for which it was designed initially. It is also compatible with the majority of full browser themes that you may install Firefox.

If you want to distinguish between different address bar suggestions visually, this is one of the best options to do so as it will highlight the different types in different colors.

Now Read: How to customize the Firefox address bar output

software image
Author Rating
no rating based on 0 votes
Software Name
Awesome Bar Background Color Based on Type
Landing Page

Tutorials & Tips

Previous Post: «
Next Post: «


Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.