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.
Comments
Jeton
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.
关于Firefox3 - Someus.cN
[...] 我终于抛弃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 (!): змінюємо вигляд адресної панелі
[...] стиль адрес. Тут встановлено блакитний колір. Джерело: mozillalinks Написав Фарбований Лис У розділі [...]
Andrzej
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.
Timothy Babych
Thanks! I have compiled the thing into userstyle:
http://userstyles.org/styles/6162
thebadness.org » Hardy? Hardly
[...] used some changes to the userChrome.css file to modify the way the location bar looks. Just a few basic adjustments [...]
www.rdoering.net
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
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
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.
Vasu
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; }
yackediyack
@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
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!.
yackediyack
@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.
Richter
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?
matt
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??
Veky
I am wondering exactly the same thing as matt. I want Firefox 2 style autocomplete.
The ‘one click’ solution is Seth Spitzer’s add-on: https://addons.mozilla.org/en-US/firefox/addon/6227
Shum
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!
ShumSeptember 18th, 2008 at 3:42 pm
Ah, I figured it out. Silly me got the wrong profile folder. Now it works beautifully. :)
skaizun
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?
Firefox 3 Beta 4 review : Mozilla Links
[...] Tweak Firefox 3 location bar autocomplete menu [...]