Change Firefox interface

Facebookgoogle_plus

 

Firefox browser to all its generations uses CSS file to generate the interface. Actually, what you see after the Firefox installations is the based CSS installed by the installer to its default folder with its default interface values.
In earlier versions of Firefox 4, the tools < add-ons < themes section could handle the Firefox appearance settings but it was quite restricted in terms of changing colors or other settings in a flexibility way.
The way to control the Firefox’s interface is to make changes in a single CSS file (cascading style sheet) that stores the instructions data on how Firefox should ‘look and feel’.
The file name is userchrome.css (known in its default name after installation as userChrome-example.css).
You can find this file under the following location in deferent operating systems:
 
Windows XP:
C:\Documents and Settings\YourUserName\Application Data\Mozilla\Firefox\Profiles\StringValue(for example: boq2omx1.default)\chrome.
 
Windows Vista:
C:\Users\ YourUserName \AppData\Roaming\Mozilla\Firefox\Profiles\ StringValue(for example: boq2omx1.default)\chrome
 
Windows 7:
You should manually a ‘chrome’ subfolder under the C:\Users\ YourUserName \AppData\Roaming\Mozilla\Firefox\Profiles\ StringValue, then create a file named ‘userChrome.css’, notice that the file name is case sensitive.
Open the file and paste this code at the top:
 

‘ @namespace url ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

 

Below you can add your CSS code (or copy it from older version of Firefox).
 
Note that on windows 7 you can install stylish from here and save a lot of working with this add on.

In any way, on windows XP and Vista you should rename the ‘userChrome-example.css’ located under the placed we mentioned to ‘userChrome.css’.
For example, you can make changes to emphasize the active tab by inserting those lines to CSS:
 
/* active tabs colors */
tab[selected="true"] {
background-color: pink !important;
color: blue !important;
}
/* regular tabs color */
tab:not([selected="true"]) {
background-color: white !important;
color:  !important;
 
}

you can view more tweaks here:

Tweak 1, Tweak 2, Tweak 3