Change Firefox’s Minimum, Maximum Tab Width

I just stumbled upon the Firefox extension Custom Tab Width which adds functionality to Firefox to change the minimum and maximum tab width. The default values are a minimum width of 100 pixels and a maximum width of 250 pixels. Custom Tab Width adds a small configuration window to Firefox where users can change the maximum and minimum tab width.

I did seem to recall however that this setting was available in the advanced configuration of the web browser. I’m not sure if I have written a guide in the past about this. I think I did but I cannot find it.

Firefox offers two parameters to change the minimum and maximum tab width of the browser. To change these parameters users need to enter about:config in the Firefox address bar and hit enter. This opens the advanced configuration. Users who never opened the configuration before see a warning page before the configuration is displayed to them.

The configuration holds many parameters and it is usually a good idea to use the filter at the top to display only those parameters that need to be edited. Enter browser.tabs.tab in the filter form, this should display the following parameters:

browser.tabs.tabMaxWidth defines the maximum width of each individual tab in the browser. The default value is set to 250 pixels.

browser.tabs.tabMinWidth defines the minimum width of each tab in the Firefox web browser. The default value is set to 100 pixels.

Why is there a minimum and maximum value for the tab width? Firefox changes the size of the tabs dynamically based on those values. A few open tabs are shown with 250 pixels which is reduced gradually until the minimum width 100 is reached.

A good value for the minimum width parameter is 25 which reveals enough so that the tabs can be identified. Some users may want to reduce the minimum width so that only the favicon of the site is displayed. These users need to reduce the minimum width further and test the setting with dozens of open tabs.

Update: The parameters are no longer working in Firefox 4 or newer versions of the web browser. The only available option is to use CSS to define the maximum and minimum tab width. The following entries need to be added to the userChrome.css file in the Firefox profile folder:

.tabbrowser-tab:not([pinned]) {
max-width: 250px !important;
min-width: 40px !important;
}

The easiest way to find the right profile directory is to enter about:support in the address bar to load the page. It contains, among other options, a button to open the active profile directory. Open the Chrome subfolder and look for the file userChrome.css. If it does not exist create it. This is best done by creating a new text document and renaming its name and file extension. Windows users right-click in the directory and select New > Text Document.

Now copy and paste the code into the file. You can append the CSS code at the bottom in case the file existed previously. Please note that the above instructions change the maximum width to 250 pixels, and the minimum width to 40 pixels. You may want to play around with the values to find the one best suitable for you. Restart the browser after making the change to see the changes in action.

Related Articles:

Author: Martin Brinkmann, Wednesday February 2, 2011 -
Tags:Firefox, firefox add-ons, firefox tabs, firefox tips, userchrome.css

Responses so far:

1. Paul(us) says:

   February 2, 2011 at 6:14 pm

   Or for those whou thing that doing all above is a hustle there is a much more simple way by the Firefox add-on Tab mix plus 0.3.8.4
   With this add-on there is even much more possible than only the tab wide.

   Reply
   • Jim says:

     February 2, 2011 at 7:55 pm

     Tab Mix Plus is one of the first extensions I install. It offers a dizzying array of modifications to tab appearance and operation. Two thumbs up here!

     Reply
2. rickxs says:

   February 3, 2011 at 1:21 am

   yep Tab Mix Plus , once set up save the TMPpref file under ‘settings ‘ -export.
   can save a heap of work

   Reply
3. Yehoshua says:

   February 3, 2011 at 7:37 am

   I like Faviconize Tab. My GMail and Google Reader tabs always open only the width of the favicon. With GMail’s new unread-count-in-favicon lab and Better Greader showing unread count, it works great!

   Reply
4. JB says:

   March 11, 2011 at 1:18 am

   Hello,

   Looks nice, but does not seem to be available on Firefox 4.
   Any idea?

   Reply
   • Martin Brinkmann says:

     March 11, 2011 at 1:43 am

     This did work in a previous build but is not working anymore. I’m not sure why. Thanks for posting the link to another option to change the tab dimensions.

     Reply
5. JB says:

   March 11, 2011 at 1:21 am

   For the record, the answer is there:
   http://blog.miranda.or.at/mozilla/firefox-4-and-minimum-maximum-tab-width

   Reply
6. JB says:

   March 11, 2011 at 10:57 am

   Or http://en.design-noir.de/mozilla/tab-width/

   Reply
7. jay says:

   March 30, 2011 at 10:44 pm

   did this but it made all of my close buttons disappear. . . trying to figure out how to force firefox to get them back!

   Reply
8. User says:

   June 8, 2011 at 9:59 pm

   In latest Firefox 4/5, add the settings to the ‘userChrome.css’ file:

   C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\default\chrome\userChrome.css

   .tabbrowser-tab[fadein]:not([pinned]) {
   min-width: 0px !important;
   max-width: 30px !important;
   }

   Need to adjust the path to suit your system and the pixels desired. The above will show just the tab icon, which I find enough to identify them. Plus they’re placed consistently instead of shrinking & expanding depending on when more/less tabs are open.

   Reply
9. someone says:

   October 1, 2011 at 3:42 pm

   Thanks a lot! always prefer to do this kind of thing without installing an addon.

   Reply