Tweak Firefox 3 location bar autocomplete menu
Posted by Percy Cabello on March 10th, 2008 • Tags:
ShareThis

A common complaint about Firefox 3′s location bar is that the autocomplete menu is too long because of the big font sizes, that the page title grabs too much attention compared to the address or that the address is too difficult to read.

While the default colors and sizes is still under review, you can tweak it right now to better suit your taste. Just add this code to your userChrome.css file:

.ac-comment {
font-size: 100%! important;
color: #444444 ! important;
}

.ac-comment[selected=”true”] { color: #FFFFFF !important; }

.ac-url-text {
font-size: 100% ! important;
color: #000077 ! important;
}

.ac-url-text[selected=”true”] { color: #FFFFFF !important; }

.ac-comment refers to the title styling which I have changed to be the same size (100%) as the address and a lighter gray. .ac-url-text refers to the address which I have set to blue.

It looks like this now:

Tweak Firerfox 3 location bar autocomplete menu

You can play with different font-size values and proportions and colors. For color codes, check W3Schools.

You can also reduce the number of suggestions in the autocomplete menu with this tip.

Update: Added CSS code to change the text color when selected. Thanks David.

Comments
Firefox 3 Beta 4 review : Mozilla Links said on March 10, 2008, 1:59 pm:

[...] Tweak Firefox 3 location bar autocomplete menu [...]

Jeton said on March 10, 2008, 2:21 pm:

I love this time when betas come and I get to learn all kind of tweaks. :)

Thank you for sharing this. This was really something that i wanted to change.

Now, if only you could make a post with some FX3 only extensions, and if they have anything special.

Reply

Pelle said on March 10, 2008, 3:35 pm:

Wow – your styling of it makes it look much more beautiful! Hopefully Mozilla will change it into something like this before the final release.

Reply

David said on March 10, 2008, 4:07 pm:

Great tip. I’m going to keep the titles as they are but make the URLs a medium grey.

Reply

David said on March 10, 2008, 4:14 pm:

Anyone know how to set the colour when the items are hovered?

Reply

David said on March 10, 2008, 4:23 pm:

Ok, I found it for myself. Here’s an addition to the tip:

If you want to change the colour for selected items, use the following rules:

.ac-comment[selected="true"] { color: #fff !important; }

.ac-url-text[selected="true"] { color: #fff !important; }

Reply

Percy Cabello said on March 10, 2008, 4:35 pm:

@David, thanks for the tip! I’ve updated the post.

Reply

关于Firefox3 - Someus.cN said on March 11, 2008, 12:14 am:

[...] 我终于抛弃Firefox2了，投送到Firefox3的怀抱了，Firefox3刚发布了一个Beta4的，但还要继续发布一个Beta5版本，主要是为了解决一些尚未解决的bug，估计对正式版的发布也有一些影响。 从现在的Firefox3Beta4来看，改进还是不少，最大的就是Javascript引擎的改进，用Gmail是明显感觉快了不少，主题也和操作系统关联了，XP、Vista、Mac、Linux一个不少。但地址栏自动完成却有点主次不分，网页标题太大，很多用户都很难看清网址，幸好找到方法修改它，打开userChrome.css，加入以下内容： .ac-comment { font-size: 100%! important; color: #444444 ! important; } .ac-comment[selected=”true”] { color: #FFFFFF !important; } .ac-url-text { font-size: 100% ! important; color: #000077 ! important; } .ac-url-text[selected=”true”] { color: #FFFFFF !important; } [...]

Про Firefox Українською » Архів » Секрети Firefox 3 (!): змінюємо вигляд адресної п said on March 14, 2008, 10:39 am:

[...] стиль адрес. Тут встановлено блакитний колір. Джерело: mozillalinks Написав Фарбований Лис У розділі [...]

Qwertyu said on March 22, 2008, 6:02 pm:

“While the default colors and sizes is…”

“Is” should be “are.”

Reply

Andrzej said on March 24, 2008, 7:15 pm:

Much much better know.

Autocomplete was really getting on my nerve.
Thanks to you I get to keep this feature.
Was about to get rid of it.

Reply

Timothy Babych said on April 4, 2008, 5:54 am:

Thanks! I have compiled the thing into userstyle:
http://userstyles.org/styles/6162

Reply

thebadness.org » Hardy? Hardly said on April 24, 2008, 6:39 pm:

[...] used some changes to the userChrome.css file to modify the way the location bar looks. Just a few basic adjustments [...]

www.rdoering.net said on May 20, 2008, 4:19 am:

Firefox 3RC1 im “personal Test”…

Nach ich irgendwo aufgeschnappt habe, das der aktuellen Firefox 3RC1 wohl zum Release wird, wenn nicht doch noch Fehler auftreten, habe ich mir mal meine persönliche Meinung mit einer Installation in meinem Homeverzeichnis gebildet….

yackediyack said on June 1, 2008, 1:18 pm:

Very nice tweak!
Love the new search function in location bar, I really think it is a big improvement. But have to say I also find the default dropdown design to big.
Couldn’t really figure out what part of the code that does it, but for some reason, Percy Cabello (thread author) your code makes the results totally blue, when chosen, so you can’t read them.
The code from Timothy Babych’s userstyle doesn’t…
Here is a image illustrating the matter: http://img47.imageshack.us/img47/5169/3differentlookscomparisvq4.png
I experienced a bit and took the (in my opinion) best part from the two codes and made my own. Here is my code:
.ac-comment {
font-size: 100%! important;
color: #333 ! important;
}

.ac-comment[selected="true"] { color: white !important; }

.ac-url-text {
font-size: 100% ! important;
color: #000077 ! important;
}

.ac-url-text[selected="true"] { color: #FFFFFF !important; }

Here is another image with a comparison of the 4 different color codes of the two scripts: http://img47.imageshack.us/img47/7249/the4colorscomparisonuy6.png

Reply

asdfg replied on June 6th, 2008, 9:27 am:

The reason Percy’s code makes selected text go totally blue is because of a small error.
Where it has [selected="true"], it uses closing-style quotation marks on both sides. If you copy and paste that, Firefox doesn’t seem to like it. Best to change it to straight style quotation marks.

Still a very useful tweak though.

Vasu said on June 10, 2008, 8:19 am:

Even better is to set the url-text size to 0. Also tweaked some other stuff. Use the following chrome. (Tested on ubuntu)

.ac-comment {
font-family: monospace !important;
font-size: 95%! important;
color: #444444 ! important;
}

.ac-comment[selected=”true”] { color: #FFFFFF !important; }

.ac-url-text {
font-size: 0% ! important;
color: #000077 ! important;
}

.ac-url-text[selected=”true”] { color: #FFFFFF !important; }

Reply

yackediyack said on June 10, 2008, 6:26 pm:

@asdfg:
Aha! you’re right.
The two places it says [selected="true"], changing the ” to ‘ resolves “selected text go totally blue” problem
This fix makes my previous posted code unnecessary…

@Vasu:
You’re code make it look like this for me: http://img168.imageshack.us/img168/8521/vasucodegy9.png
= Links is no longer showed… I don’t like that appearance. But of course: We all have some different tastes
Peace

Reply

Vasu replied on June 27th, 2008, 4:18 pm:

yackediyack :
The fonts are too small on the machine I guess. My objective was to remove the URLs. The reason is, for many website the information that is shown is good enough. Also, if you scroll down the location bar items, you can see the URL in the address bar. I like it that way!.

Matthew said on June 14, 2008, 2:58 pm:

I don’t see what the big deal is, but maybe thats because I have dual 32″ displays

Reply

yackediyack said on June 16, 2008, 10:00 am:

@Matthew:
LOL :P. Yeah I believe that is why you don’t see that much difference… I only have a single 17″ monitor. Your is almost double as big :O.

Reply

drale said on June 18, 2008, 2:03 am:

Thank you. I thought it was hard to skim through with all the same color text. I pay more attention to URLs than page titles whenever remembering where I was and wanting to get back.

Reply

Richter said on June 18, 2008, 7:12 pm:

My Firefox 3 address bar is broken. It doesn’t auto-complete URL’s the way FF2 did, or for that matter, the way IE, Safari and Opera do. Instead, it seems my bookmarks, search results and other stray pages I’ve visited are leaking into the address bar. Is there a way to fix this or do I have to upgrade to Netscape Navigator Gold?

Reply

matt said on June 19, 2008, 2:05 am:

thats great and all, but what about those of us who want the new firefox to behave just as the old firefox.. that is, i dont want to see anything except URLS appear in the URL auto complete. i dont give a damn about the font size, i just dont want to see the website titles at all.. how would i go about this??

Reply

Josh replied on February 19th, 2009, 2:28 pm:

.ac-comment {
display: none;
}

Veky said on June 19, 2008, 5:19 pm:

I am wondering exactly the same thing as matt. I want Firefox 2 style autocomplete.

Reply

Alf replied on July 1st, 2008, 5:03 am:

The ‘one click’ solution is Seth Spitzer’s add-on: https://addons.mozilla.org/en-US/firefox/addon/6227

vipul said on August 14, 2008, 4:26 am:

hey nice thing,
but i have one question?
where to find this auto complete list means where the Mozilla store all the information?

Reply

Shum said on September 18, 2008, 3:25 pm:

Hello, I’m new to this & I’m experiencing some difficulty that I don’t know how to solve. It’s driving me crazy!!

So I opened Notepad, pasted the code, and renamed the file to “userChrome.css”. Then, I copied it into Mozilla Firefox / defaults / profile / chrome because that was where I could find the “chrome directory of your profile folder.” It worked for the title styling, which shrank to the same size as the URL. However, the colors stayed true: jet black title and bright blue URL. I even tried to use the code for crimson, then restarted Firefox, but the color wouldn’t even tint!!!! Argh!!

I seriously don’t know where I went wrong. Please help me out. Thank you very much!

Reply

Shum replied on September 18th, 2008, 3:42 pm:

Ah, I figured it out. Silly me got the wrong profile folder. Now it works beautifully. :)

skaizun said on June 17, 2009, 1:42 pm:

I tried looking for “userChrome.css” but there’s no such thing on my Vista computer; all I found was “userChrome-example.css”, but there’s no “profile” directory or file, either. Suggestions?

Reply

Aku said on August 10, 2009, 3:59 am:

Does anyone know where I can find a reference of *all* these style classes used by firefox?

Reply

GL said on October 26, 2009, 1:05 am:

Helpful article but there’s nothing like (NOT) implementing an obvious, easy, menu-driven checkbox way of turning OFF the annoying firefox “inventions”. Firefox developers: Where’s the checkbox that says “Don’t display location bar page titles” or where’s the config option of say, browser.urlbar.titledisp=0 etc. Come on, stop force-feeding hardcoded user interfaces to everyone.

Reply