Skip to main content

Firefox 4 smaller tabs (concerning height)

I've searched long enough for this to put it here for other searchers (especially concerning spacing or margins). If you want the height of your tabs to be a bit smaller (including text of course), you can do that by editing your "C:\Users\[YourUSername]\AppData\Local\Mozilla\Firefox\Profiles\[Your profile]\chrome\userChrome.css".  Create one from "userChrome-example.css" if it doesn't exist.
Here is the code you should add after "@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul")":
.tabbrowser-tabs {
    height: 18px !important;
}
.tabbrowser-tabs .tab-text {
    font-size: 80%;
}
.tabbrowser-tab
{
    margin-top:0 !important;
}
.tabbrowser-tabs tab label
{
    margin-top:-2px !important;
    height: 16px !important;
}




Labels:

Comments

Michael said…
I'm trying to resize the tab bar but not the tabs themselves; there's a gap above the tabs of just a pixel or two that I want to get rid of, so I want to change the height of the tab bar to equal the height of the tabs.

.tabbrowser-tab {
margin-top:0 !important;
}

made no difference at all. I've been searching for a while now with no luck. Any ideas?

Thanks in advance!
4/28/2011 2:36 PM
Ruby said…
Not really or I forgot. :-)

It all comes down to finding the right class and style (margin, padding, line-height, ..).
Maybe google around a bit for all the existing css classes for tabs and find the right one by settings something as 100px or background-color:#f00. Once found, you can set what you need.

Here are some topics with classes:
http://www.mozilla.org/unix/customizing.html
http://forums.mozillazine.org/viewtopic.php?t=208761
http://www.mvps.org/dmcritchie/firefox/tabs.htm
4/28/2011 3:06 PM
Post a Comment