Firefox – Change Firefox theme locally with CSS (without any extension)

cssfirefox

I have some modifications I want to make WITHOUT installing extensions.

eg: max width of tab and height of menu,

In previous versions you could have it done via:

about:config ->browser.tabs.tab.maxWidth

Since FF4 it should be done with CSS. Now I searched the default theme:

C:\Users\wetcat\AppData\Roaming\Mozilla\Firefox\Profiles\feriz.default
and
C:\Program Files (x86)\Mozilla Firefox

In the second I could find the extension -> theme but without any CSS. In the AppData I couldn't find any CSS or theme folder.

WHERE is the file to create or alter the CSS??

I'm using Firefox 11.

Best Answer

Go to your Firefox user profile directory. There, open the folder chrome (create it if it doesn't exist) and rename userChrome-example.css to userChrome.css (or create a copy and rename that, like it says right in the file).

Add the following CSS to the file userChrome.css:

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

Save, and you're done.

enter image description here

Some issue comments mention that all of the CSS changes have some flaws though, compared to the earlier preferences. On my system, they tabs to the right (and the new tab button) don't slide to the left when I close a tab at the left side.

enter image description here

Related Question