userChrome.css

[FirefoxWiz]

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:

Code:

/* 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;
}

If you want the menus to appear native to the Windows Classic appearance, add the following code to your

userChrome.css file:

Code:

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

file:

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:

Code:

/* 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.


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:

Code:

/* 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;
}

If you don't want

the title of the active tab to be bold, add the following code to your userChrome.css file:

Code:

/* Make the active tab not bold */
tab[selected="true"]

{
   font-weight: normal !important;
}

You can remove the close button from the tab bar by adding the following code to your

userChrome.css file:

Code:

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

!important;
}

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:

Code:

/* Remove the Go and Help menus
   (These

are just examples. Try changing "Go" to "Edit" or "Bookmarks") */
menu[label="Go"], menu[label="Help"] {
   display: none

!important;
}

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:

Code:

/* 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;
}

To display the Sidebar on the right side of the window instead of the left, add the following code to your

userChrome.css file:

Code:

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

direction:ltr;
}

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:

Code:

/* Make the Search box flex wider
   (in this case 400 pixels wide) */
#search-container, #searchbar {
  

-moz-box-flex: 400 !important;
}