Loading ...Tweak Firefox 3 location bar autocomplete menu
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:
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.
Subscribe RSS
Subscribe email
March 10th, 2008 at 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]
March 10th, 2008 at 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]
March 10th, 2008 at 4:07 pm
Great tip. I’m going to keep the titles as they are but make the URLs a medium grey.
[Reply]
March 10th, 2008 at 4:14 pm
Anyone know how to set the colour when the items are hovered?
[Reply]
March 10th, 2008 at 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]
March 10th, 2008 at 4:35 pm
@David, thanks for the tip! I’ve updated the post.
[Reply]
March 22nd, 2008 at 6:02 pm
“While the default colors and sizes is…”
“Is” should be “are.”
[Reply]
March 24th, 2008 at 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]
April 4th, 2008 at 5:54 am
Thanks! I have compiled the thing into userstyle:
http://userstyles.org/styles/6162
[Reply]
June 1st, 2008 at 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]
asdfgJune 6th, 2008 at 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.
[Reply]
June 10th, 2008 at 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]
June 10th, 2008 at 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]
VasuJune 27th, 2008 at 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!.
[Reply]
June 14th, 2008 at 2:58 pm
I don’t see what the big deal is, but maybe thats because I have dual 32″ displays
[Reply]
June 16th, 2008 at 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]
June 18th, 2008 at 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]
June 18th, 2008 at 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]
June 19th, 2008 at 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]
June 19th, 2008 at 5:19 pm
I am wondering exactly the same thing as matt. I want Firefox 2 style autocomplete.
[Reply]
AlfJuly 1st, 2008 at 5:03 am
The ‘one click’ solution is Seth Spitzer’s add-on: https://addons.mozilla.org/en-US/firefox/addon/6227
[Reply]
August 14th, 2008 at 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]
September 18th, 2008 at 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]
ShumSeptember 18th, 2008 at 3:42 pm
Ah, I figured it out. Silly me got the wrong profile folder. Now it works beautifully. :)
[Reply]