Customize Firefox Appearance

Use Windows XP styled menus

If you are running Windows XP and want your menus to fit in with the default (Luna) style, add the following code to your userChrome.css file:

/* Make menus XP style */
menupopup, popup {
border: 1px solid ThreeDShadow !important;
-moz-border-left-colors: ThreeDShadow !important;
-moz-border-top-colors: ThreeDShadow !important;
-moz-border-right-colors: ThreeDShadow !important;
-moz-border-bottom-colors: ThreeDShadow !important;
padding: 2px !important;
background-color: Menu !important;
}
menubar > menu {
border: 1px solid transparent !important;
padding: 2px 5px 2px 7px !important;
margin: 0 !important;
}
menubar > menu[_moz-menuactive="true"] {
background-color : Highlight !important;
color: HighlightText !important;
}

Use Windows Classic (9x/Me/2000) styled menus

If you want the menus to appear native to the Windows Classic appearance, add the following code to your userChrome.css file:

/* Windows Classic (9x/Me/2000) style Menus */
menupopup, popup {
border: 2px solid !important;
-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;
-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;
padding: 1px !important;
}
menubar > menu[disabled="true"] {
border: 1px solid transparent !important;
}
menubar > menu[_moz-menuactive="true"] {
border-top: 1px solid ThreeDHighlight !important;
border-right: 1px solid ThreeDShadow !important;
border-bottom: 1px solid ThreeDShadow !important;
border-left: 1px solid ThreeDHighlight !important;
background-color: transparent !important;
color: MenuText !important;
}
menubar > menu[_moz-menuactive="true"][open="true"]  {
border-top: 1px solid ThreeDShadow !important;
border-right: 1px solid ThreeDHighlight !important;
border-bottom: 1px solid ThreeDHighlight !important;
border-left: 1px solid ThreeDShadow !important;
}

Use your own background image for the toolbars

In addition to changing themes, you can personalize Firefox even more by using your own toolbar background image. Add the following code to your userChrome.css file:

/* Use a background image for the toolbars:
(Substitute your image file for background.gif) */

menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url("background.gif") !important;
background-color: none !important;
}

It's easiest to place the image file in the same location as the userChrome.css file. The image can be of any image format supported by Firefox.

Make the active tab easier to distinguish

In order to make the active tab easier to distinguish among the currently opened tabs, you can also change the colors for the tabs. Add the following code to your userChrome.css file:

/* Change color of active tab */
tab{
-moz-appearance: none !important;
}
tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important;
}

/* Change color of normal tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important;
}

Don't use bold text on the active tab

If you don't want the title of the active tab to be bold, add the following code to your userChrome.css file:

/* Make the active tab not bold */
tab[selected="true"] {
font-weight: normal !important;
}

Remove the close button from the tab bar

You can remove the close button from the tab bar by adding the following code to your userChrome.css file:

/* Remove the close button on the tab bar */
.tabs-closebutton-box {
display: none !important;
}

You can still close tabs by right clicking on them and select Close Tab, or by pressing Ctrl+W

Remove items from the main menu

Some people like to place all their toolbar items on the same row as the menu. In order to save horizontal space, you can remove top menu items that you don't use. Add the following code to your userChrome.css file:

/* Remove the Go and Help menus
Id's for all toplevel menus:
file-menu, edit-menu, view-menu, go-menu, bookmarks-menu, tools-menu, helpMenu */
#go-menu, #helpMenu {
   display: none !important;
}

Remove extra padding from the Navigation Toolbar

This tip will make the toolbars use less space around the buttons, allowing Firefox to use more space for the actual webpages. This also affects additional toolbars such as the Googlebar. Add the following code to your userChrome.css file:

/* Remove extra padding from the Navigation Bar */
.toolbarbutton-1, .toolbarbutton-menubutton-button {
padding: 2px 3px !important;
}
.toolbarbutton-1[checked="true"], .toolbarbutton-1[open="true"],
.toolbarbutton-menubutton-button[checked="true"],
.toolbarbutton-menubutton-button[open="true"] {
padding: 4px 1px 1px 4px !important;
}

Change the window icon

You can change Firefox's default window icon to any icon you want, by following these steps:

1. Go to the folder you installed Firefox in (e.g. C:\Program Files\Mozilla Firefox\) and then go to the subfolder chrome.
2. While in chrome, create a new subfolder called icons, then go to that folder and create yet another subfolder called default. The full path to this folder could be C:\Program Files\Mozilla Firefox\chrome\icons\default\.
3. Choose the icon you want to use (on Windows use .ico files, on Linux use .xpm files) and then place it in this folder and rename it to main-window.[ext], e.g. main-window.ico on Windows and main-window.xpm on Linux.

In addition to the main window, you can also change the icon on the Bookmark Manager and JavaScript Console. The icon names are bookmark-window.[ext] and jsconsoleWindow.[ext], respectively.

After this is done, restart Firefox and you should be able to see your chosen icon in the title of the browser windows.

Display Sidebar on the right

To display the Sidebar on the right side of the window instead of the left, add the following code to your userChrome.css file:

/* Place the sidebar on the right edge of the window  */
window > hbox {
direction:rtl;
}
window > hbox > * {
direction:ltr;
} 

Change the width of the Search Bar

By default, the Search bar on the toolbar is relatively small. To specify your own width in pixels, add the following code to your userChrome.css file:

/* Make the Search box flex wider
(in this case 400 pixels wide) */
 #search-container, #searchbar {
   max-width: 400px !important;
   width: 400px !important;
}

Download Firefox
Source: Mozilla.org