Customizing FireFox 4 Tabs. Small icon on inactive, Hover and Active Expanded

FireFox 4 added CSS 3 support to their chrome interface. As I typically have 50+ tabs open at one time and hate horizontal scrolling in the tab bar I wanted to maximize the space available. The style below makes all inactive tabs 1px wide showing only the favicon. Hover and Active tabs get expanded to 150px wide allowing you to easily tell what tab you are currently on as well as being able to hover over inactive tabs showing the title information.

To accomplish this, edit –> If C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[PROFILENAME]\chrome\userChrome.css with the code below. If the file doesn’t already exist, create a new file.

@namespace url(""); /* set default namespace to XUL */

/* DRR Make tabs small */

/* Shrink tab text by 20% */
.tabbrowser-tabs .tab-text {
font-size: 80% !important;

.tabbrowser-tab:not([pinned]) {
  min-width: 1px !important;

.tabbrowser-tab[selected="true"] {
width: 150px !important;

/* If the tab isn't selected, but is being hovered on, show the text, make it min 128px wide 
.tabbrowser-tabs *|tab:hover {
width: 150px !important;

/* DRR Make Tabs small end */

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s