03-21-2006, 11:27 AM
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:
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:
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:
If you don't want
the title of the active tab to be bold, add the following code to your userChrome.css file:
You can remove the close button from the tab bar by adding the following code to your
userChrome.css file:
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:
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:
To display the Sidebar on the right side of the window instead of the left, add the following code to your
userChrome.css file:
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:
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;
}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;
}