How to Customize and Change Width or Length of Tabs in Mozilla Firefox?

Now-a-days all web browsers come with tab feature which allows you to open more than one webpage in a single browser window using tabs. Its more convenient and useful for the end user.

Each browser has its own built-in settings for tab width or length. When you open a new tab, its automatically assigned a fixed amount of space in the tab bar which is called maximum width of tab. As soon as you open multiple tabs in the browser, the existing tabs width is automatically reduced to provide space for new tabs, its called minimum width of tab.

Many times you may want to customize the width of tabs for example, you may want to reduce the maximum width of a tab or you may want to increase the minimum width of tab so that the browser doesn't reduce tab width below your defined limit.

Today in this tutorial, we are going to share the method to customize or change minimum and maximum width or length of tabs in Mozilla Firefox web browser. Recently an AskVG reader "Joseph" asked us about it, so this tutorial has been created as per Joseph's request.

In older versions of Mozilla Firefox, the minimum and maximum width of tabs can be customized using about:config preferences. You just needed to modify browser.tabs.tabMaxWidth and browser.tabs.tabMinWidth preferences in about:config window. But this feature was discontinued in Firefox 4.0 and later versions due to a bug.

Now you can customize tab width using CSS code which is stored in userChrome.css file present in your Firefox profile folder.

Customize_Tab_Max_Min_Width_Mozilla_Firefox.png

So if you want to customize or change tab width in Mozilla Firefox, check out following steps:

1. First of all you'll need to create a new file userChrome.css in "chrome" folder inside your Firefox user profile folder. If you are not aware of this file and your profile folder, check out following article:

All About Mozilla Firefox Profile Folder and Configuration Files

2. Once you create the userChrome.css file or if it already exists, open it in Notepad.

3. Now paste following piece of code in the file. If the file already exists and contains some text, paste the code at the end of the file:

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

4. The above code will tell Firefox to set maximum width of tab to 250px and minimum width of tab to 100px which is actually default settings for tabs.

So if you want to customize the width, you can just change the px values in the code. For example, if you want to decrease maximum tab width to 150px and want to reduce minimum tab width to 50px, then you'll need to use following code:

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

You can play around the values to achieve your desired result.

5. After pasting the code, save the file and run Mozilla Firefox and you'll see the desired width of tabs.

Check out following video to see this method live in action:

PS: If you don't want to add the CSS code in userChrome.css file, you can apply the same code using Stylish extension for Firefox. Check out step 4 in following tutorial to know how to apply CSS code using Stylish add-on:

How to Get URL Bar and Tab Bar in Same Row Similar to IE9 in Mozilla Firefox?

Feel free to share the tab width values which suite best for you...





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox


Other similar articles that may interest you


Comments

  • Nice VG!,
    Is there any tweaks in Google Chrome like this?

  • There is a Fx add-on "Custom Tab Width" that allows you to set the width, and "Stratiform" has a similar setting (along with a lot of other customizations for tabs).

  • Both informative and helpful.

    You gotta love this site!!

  • Thanks VG!
    :D

  • VG

    ^^ Welcome.

    @Joseph
    Thanks.

    @Rohugh
    Thanks for sharing the add-on but its better to do it manually rather than installing an extra add-on. :)

    @Asrin475
    Afaik, there is no way to do this in Chrome but 3rd party extensions may do it in Chrome. Not checked.

  • Nice! VG, what is the music for the video tutorial?

  • VG

    ^^ Its a sound clip which came bundled with screen capturing software. Dont know which song it is.

  • You have any idea why centering text in Firefox tabs does not work as it should, (as it worked in 15.0a1), it's too far in right though I used center command in Stylish: (or is there something wrong with this code?)

    .tab-text { text-align: center !important; }

  • VG

    ^^ Try following:

    .tab-text { text-align: -moz-center !important; }

  • Tried, does not work at all, something happened between 15.0a1 and 16.0a1 because some of the Stylish codes stopped working or some of are working but only partly.

  • VG

    ^^ Then you'll need to wait for the next update from Mozilla. ;)

  • thanks for this. This is just one of the plethora of tweaks that can be achieved usin userchrome.css. I hope you,vg can outline all of the possible ui codes in userchrome.css.

  • hiii VG there is a latest update for firefox browser ver 14.0.1

  • Hi there,

    your page is entirely missing any info on Date, which misleads readers thinking the information IS correct the day they read it.
    I do not doubt information here WAS correct some times ago, but the one and only time reference here is a user mentioning Firefox 14.
    (2013.12.18)

  • Thanks for posting this.

  • Ugh... The tabs don't resize themselves when I close one. I have gaps between my tabs now. How can I fix this without restoring default tab settings, or closing the browser?

Leave a Comment

(required)