Firefox 4 – Increase the Width of the Active Tab in Firefox 4


Though many people are complaining about the new version of Firefox, there is a lot of good that has come out of it. One of the things that happened was the tabs have been moved to the top of the screen. This makes for much more screen real estate, but the downfall is that we can longer see the page title. This little userChrome tweak will help you increase the width of the tab in order to make more space to see the page title.

You just need to add a few lines to your userChrome.css file.

  1. In the Firefox button menu, select Help>Troubleshooting InformationTroubleshooting Information  menu
  2. In the about:support page, press the Open Containing Folder to access your profile folder
  3. In your profile folder, move to the chrome folder, and open the userChrome.css file. If it is not there copy the userChrome-example.css file as userChrome.css
  4. Add this code at the end of the file:
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    .tabbrowser-tab[selected]:not([pinned])[fadein] { min-width: 300px !important; }
  5. Restart Firefox to apply the change. Now the active tab will appear wider than the rest of the tabs so you can see more of the current page title.

Note: I wanted to have a very wide tab, so I set my min-width attribute to 300px – 200px is a good value to start with and you can adjust it from there.

Leave a Reply

Your email address will not be published. Required fields are marked *