firefox address bar snapshot.png

There are some Firefox themes that I absolutely love, but they don’t always get everything the way that I like them. One of the areas I’m rather particular about is the Address Bar drop-down menu that appears once you start typing. A good example of this was a theme I tested out recently that styled both the title and URL in the exact same fashion. Both were the same font size, same color, and they blended together so well that it made differentiating one result from another that much more difficult.

Using some of the same tools I use for developing CyberSearch I was able to pinpoint exactly what items needed to be styled, and thought I’d share this info in case I’m not the only one who’s come across this. If you’ve got the Stylish extension installed these changes will be a breeze, and you’ll be able to preview your adjustments very easily. These changes can be made using the userchrome.css, but for the sake of simplicity I’ll assume we’re all using Stylish.

–Tip for the Non-CSS Savvy–

If you’ve never worked with CSS before this whole thing can easily become frustrating and time consuming. In that case I’d recommend heading on over to this site to help you with the generation of the code necessary for this little project. Some of the properties may not have an affect on the Address Bar, but it should at the very least point you in the right direction.

One thing I want to point out, however, is when asked for the selector name enter in the corresponding identifier seen in the example code from the next section (either .ac-comment or .ac-url-text). Here is what that field will look like:

css builder.png

–How to Style the Firefox Address Bar–

There are two CSS identifiers we’ll be using to style both the title and URL of each item in the drop-down menu.

This is the code you’ll use for the name/title of each result:

.ac-comment {
  font-size: 110% !important;
  font-weight: bold !important;
  color: #333 !important;

And this is the code you’ll use for the corresponding URL that appears below each title:

.ac-url-text {
  font-size: 90% !important;
  color: gray !important;

Please note that the “!important” on each line should be included to help ensure that your entries will override those specified by your theme.

Once you come up with the CSS you want to use just click on the Stylish icon in the Firefox Statusbar, hover over the “Write new style” option, and choose “Blank style“:

stylish new style.png

Then go ahead and make up a name for your style, and paste in the code:

firefox address bar css.png

Now that you have it entered in you should hit the Preview button, and then switch back to your browser window to see what the drop-down menu looks like. If you like the results go ahead and hit Save to finalize the process, otherwise keep tinkering around until you get it just right.

–The End Result–

So what kind of change did I get with the code seen above? Here is a before and after shot:

firefox address bar 1.png

firefox address bar 2.png

Now you can easily adjust the Firefox Address Bar to your own liking… regardless of what theme you’re using! Oh, and in case you’re wondering the results in the Address Bar are from our extension, which in this case is pulling in Google search results for the word “news.” Shameless plug, I know. :)