Chrome

Linnhe Web Site for Mark S Baines and of Linnhe Observatory, Highlands, Scotland

Copyright 2002-2010 Mark S Baines All Rights Reserved
Last Updated: 04 03 2010

 

The userChrome.css file can be used to modify the default style of the user interface. You can change the complete look and feel of Firefox by placing the appropriate Cascading Style Sheet (CSS) code in this file. If you don't know about CSS then don't worry, you can copy what I've got below and maybe fiddle with some bits to see what happens.

The userChrome.css file is normally created by default in your profile folder. Here's how to locate your Firefox profile folder. For instance, for Windows XP it should be somewhere like:
C:\Documents and Settings\<username>\Application Data\Mozilla\Firefox\Profiles\<random number>.default
<username> is your Windows login account name. In this folder there should be a folder called 'chrome'.

If the chrome folder or userChrome.css file isn't there then create your own. The userChrome.css file is just a text file called 'userChrome.css'! For Linux (and Mac users?), the upper case C in the middle is significant.

The first line of the file should be:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */

After this you can insert your code. Here's some I've discovered and others I've collected from various sources. I don't, by any means, suggest that you add all of this code - I've no idea what would happen, some of it is contradictory at best. These are examples of what is possible. It's up to you to choose what suits you best and experiment. To learn more and experiment further then use the DOM Inspector extension. Not the easiest extension to get to grips with but helps you identify the elements you want to play with. Have fun!

NEW If you've used some of this code, please give your userChrome.css file a look over when upgrading to Firefox 3. Some code will not work and some will be unnecessary. It is probably best to use an empty userChrome.css file to see what Firefox 3 looks like then add the bits you want a few at a time to see the effects.

I don't have Firefox 1 nor 2 installed any more and so it will be up to you to see what code works and what doesn't. Where I have indicated FF3 the code is specifically Firefox 3 and works here. There are enormous changes between Firefox 1 and 3 so a good deal of what is below may work in Firefox 3 or may not. Anything to do with Bookmarks won't probably work in Firefox 3. Most of the rest still does although I've deleted Firefox 1 specific items. Suck it and see!

Change fonts in Address url toolbar (Awesomebar) drop down list - FF3
Hide the Address url toolbar Bookmark Star if the link is already bookmarked - FF3
Remove Back-Forward button dropmarker - FF3
Hide the dropdown markers on the Forward and Backward buttons - FF2
Bookmarks menus scrollbar - FF3
Bookmarks menus scrollbar - FF2
Hide toolbar borders - FF3
Hide toolbar borders - FF2
Change colour of progress bar in status toolbar in Windows XP
Widen Bookmarks Properties dialog
Resize Options dialog
Resize Element Properties dialog
Change the font for the whole of Firefox
Remove menu toolbar
Hide menu icons
Remove spacing between the menus
Hide specific menus
Hide specific menu items
Hide keyboard shortcuts in menus
Hide menu separators
Menu colours
Menu items font size
Menus and menu items font size
Back, Forward and Stop buttons
Background image all toolbars
Tab colours
Tab toolbar height
Hide tab tooltips
Align tab text to the left
Hide tab toolbar bottom border
Tab text height
Active tab text position
Tab Close button position
Remove tab Close button border when clicked
Active tab border colour
Active tab border colour 3D effect
Increase tab rounded corners
Active tab focus ring
Fade inactive tabs
Tab toolbar and side bar Close buttons
Tab toolbar Close button
Hide throbber on busy tab
Hide favicon on inactive tabs
Hide favicons on all tabs
Vertical tab toolbar
Go button
Remove the box from around the url Go and Search Go buttons in Firefox 2
Hide Go button in Firefox 2
Hide Search Go button in Firefox 2
Hide Bookmarks Toolbar Folder - FF3
Hide Bookmarks Toolbar Folder - FF2
Bookmark menu Open All in Tabs menu item - FF3
Bookmark menu Open in Tabs menu item - FF2
Bookmarks toolbar folders - individual
Bookmarks toolbar folders - all
Hide Bookmark toolbar icon labels
Hide Bookmark toolbar icons
Hide Bookmark toolbar folder name
Bookmark toolbar label font
Bookmark toolbar icons space
Multiple Bookmarks toolbars
Bookmark menu maximum length - FF2
Bookmark menu maximum length - FF3
Bookmark menu width - FF2
Bookmark menu width - FF3
Close up Bookmark menu items
Hide Bookmark icons
Moving toolbars
Toolbar heights
Address url toolbar height
Search textbox height
Address url toolbar and Search textbox style
Address url toolbar and Search textbox rounded corners
Address url toolbar security colour changes
Hide Address url toolbar security colours
Hide favicon placeholder in Address url toolbar
Hide Live Bookmark icon in Address url toolbar
Hide Address url toolbar history dropmarker
Hide Search textbox dropmarker
Status toolbar colours
Status toolbar background image
Status toolbar font and height
Status toolbar panels
Change all fonts to the same style
Sidebar font style
Sidebar header
Sidebar maximum width
Horizontal Sidebar
MR Tech Local Install extension

Without a doubt the default font sizes in the url toolbar drop down list is too large. You can change the colour of the text and the url and  when selected as well.

/* Change fonts in Awesomebar drop down */
.ac-comment {
  font-family: Verdana !important;
  font-size: 100% !important;
  color: #000000 !important;
}
.ac-comment[selected="true"] {
  font-family: Verdana !important;
  color: #000000 !important;
}
.ac-url-text {
  font-family: Verdana !important;
  font-size: 100% !important;
  color: #0000FF !important;
}
.ac-url-text[selected="true"] {
  font-family: Verdana !important;
  color: #0000FF !important;
}

Not much point in showing the Bookmark Star if you already have the url address bookmarked.

/* Hide the urlbar Bookmark Star if it is already bookmarked */
#urlbar-icons > #star-button[starred="true"]{
  display:  none !important;
}

The Back and Forward dropmarker to show the list of recent urls is awkwardly placed and redundant. You can right-click on the buttons instead.

/* Remove back-forward button dropmarker */
#back-forward-dropmarker {
  display:none !important;
}

The drop down menus still appear if you place the mouse cursor where the dropdown marker should be.

/* hide the dropdown arrows on forward and back buttons */
#back-button .toolbarbutton-menubutton-dropmarker,
#forward-button .toolbarbutton-menubutton-dropmarker {
  display: none !important;
}

This places a scrollbar on each of the Bookmarks menus, meaning faster and easier access to long lists of items. Change the "max-height" and "width" numbers to suit. The "width" statement keeps the menus the same width and stops them resizing to their contents. Delete or change to "min-width" instead if you want menus to have a minimum width. Changing "max-height" isn't really necessary, it depends if you want long menus to scan the whole height of your screen.

/* bookmark menus scrollbar */
#bookmarksMenuPopup menupopup,
#personal-bookmarks menupopup {
  max-height: 750px !important;
  width: 250px !important;
}
#bookmarksMenuPopup autorepeatbutton,
#personal-bookmarks autorepeatbutton {
  display: none !important;
}
#bookmarksMenuPopup scrollbox,
#personal-bookmarks scrollbox {
  overflow-y: auto !important;
}

This places a scrollbar on each of the Bookmarks menus, meaning faster and easier access to long lists of items. Change the "max-height" and "width" numbers to suit. The "width" statement keeps the menus the same width and stops them resizing to their contents. Delete or change to "min-width" instead if you want menus to have a minimum width. Changing "max-height" isn't really necessary, it depends if you want long menus to scan the whole height of your screen.

/* bookmark menus scrollbar */
#bookmarks-menu menupopup,
#personal-bookmarks menupopup {
  max-height: 750px !important;
  width: 250px !important;
}
#bookmarks-menu autorepeatbutton,
#personal-bookmarks autorepeatbutton {
  display: none !important;
}
#bookmarks-menu scrollbox,
#personal-bookmarks scrollbox {
  overflow-y: auto !important;
}

This hides the horizontal lines between toolbars. It gives a very clean and uncluttered appearance. Use spaces between icons instead of separators to improve the look.

/* hide toolbar borders */
toolbar {
  -moz-appearance: none !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
  border-top: 0px !important;
}

This hides the horizontal lines between toolbars. It gives a very clean and uncluttered appearance. Use spaces between icons instead of separators to improve the look.

/* hide toolbar borders */
menubar,
toolbox,
toolbar {
  border-style: none !important;
}

The default Windows XP progress bar colour is green. I hate green! Here's blue (surprise)!

/*change colour of progress bar - default green on XP */
.progress-bar {
  -moz-appearance: none !important;
  background-color: rgb(160,206,254) !important;
}

This dialog is usually too small to comfortably read its contents. Change the number of pixels to suit.

/* widen Bookmarks Properties dialog window */
#bmPropsWindow {
  width: 350px !important;
}

There is a bug in Firefox and Thunderbird that causes some dialogs to be sized wrongly whereby buttons or fields at the bottom can't be accessed. In Firefox it is the Options dialog. You can adjust its height with this code. Again, you might need to change the numbers.

/* to make Options dialog fit contents */
#BrowserPreferences {
  width: 43em !important;
  height: 43em !important;
}

When you right-click on a page element and then click on "Properties", this dialog is again often too small. Although the ID is correct, doesn't want to work in Firefox 3 yet.

/* change size of Element Properties popup */
#metadata {
  width: 825px !important;
  height: 500px !important;
}

This changes the default font for the whole program, everything will appear as this style. Anything else you add to the userChrome.css file after this code may override this, so you can make individual settings, such as a larger font for the menus.

/* global font */
* {
  font-size: 9pt !important;
  font-family: Verdana !important; 
}

This removes the menu toolbar. You'll have to provide other means of accessing the menu items through an extension or theme.

/* remove menu toolbar */
#toolbar-menubar {
  display: none !important;
}

Notice how I've commented out the View menu because this often has icons I want to see, such as ticks. Remove the /* and */ characters around it if you want it included as well.

/* don't display menu icons in some menus */
menu[label="File"] menuitem,
menu[label="Help"] menuitem,
/*menu[label="View"] menuitem,*/
menu[label="Edit"] menuitem,
menu[label="Tools"] menuitem,
menu[label="Tools"] menu {
  list-style-image: none !important;
}

Close up the menu headings in the menu bar. You could use all that space to the right of the Help menu to drag icons onto, or better still, drag the Address url bar , throbber and Go icons there (right-click and "Customize...") or the Search box.

/* remove spacing between menus on menu bar */
menubar > menu {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

You may wish to hide a menu that you don't use, such as the History menu. Change the label to the menu you wish to get rid of.

/* hide the Go and Help menus */
menu[label="History"] {
  display: none !important;
}

Some menu items are superfluous, some just take up space and clutter. The label is the name of the menu item displayed.

/* hide some menu items */
menuitem[label="Work Offline"],
menuitem[label="Release Notes"] {
  display: none !important;
}

To get an even cleaner, uncluttered look to the menus you can hide the keyboard shortcuts strings.

/* don't display keyboard shortcuts in menus */
/* with Cutemenus or MR Tech Local Install extensions */
.menu-iconic-accel {
  display: none !important;
}
/* Firefox */
.menu-accel {
  display: none !important;
}

Add this to strip menus to their barest!

/* hide the menu separators */
menuseparator {
  display: none;
}

As with everything, colours can be changed, font and background. This page provides a list of all the colours you can use on web pages and here in Firefox. You can use the names or their hex values - or create your own!

/* change font color of popup menus */
menupopup > menu,
menupopup > menuitem,
popup > menu,
popup > menuitem {
  font-weight: bold !important;
  color: darkslateblue !important;
  background-color: linen !important;
}

The text of dropdown menu items can be changed like anything else. Here it is changed to 9pt. You can also change the font family, style etc as above. This affects menus such as folder dropdowns in the Bookmarks toolbar as well.

/* change font size of menu items */
menupopup > * {
  font-size: 9pt !important;
}

If you just want to change the font size (or family etc) of the main menus and items then this will do. If you only want to change the menu bar and not the dropdown menu items then leave out the "*" after the word "menu".

/* change font size of menu items */
menubar > menu *,
popup > * {
  font-size: 12pt !important;
}

This hides these three buttons when they are disabled.

/* hide the Back button when there's nothing to go back to */
#back-button[disabled="true"] {
  display: none !important;
}
/* hide the Forward button when there's nothing to go forward to */
#forward-button[disabled="true"] {
  display: none !important;
}
/* hide the Stop button when there's nothing to stop */
#stop-button[disabled="true"] {
  display: none !important;
}

With this you can give the whole Firefox window a new look, almost create your own theme. This places an image "background,gif" in all of the toolbars. Place your image in the chrome folder.

/* background image for all toolbars */
toolbox,
#toolbar-menubar,
#nav-bar,
#PersonalToolbar,
#FindToolbar,
tabbox,
sidebarheader,
#sidebar-box,
window statusbarpanel {
  -moz-appearance: none !important;
  background-image: url('background.gif') !important;
  background-color: transparent !important;
}

If you want the menus to match, you need to do this as well.

/* background image for all menu items */
menupopup > *,
popup > *{
  background-image: url('background.gif') !important;
  background-color: transparent !important;
}

Colour changes make it easier to see which tab is currently being viewed and what other tabs are doing. Experiment and mix-and-match! Background colour changes don't work in Firefox 2 and 3 due to the background being an image not a colour in the default theme.

/* change text and background colours of tabs */
tab {
  -moz-appearance: none !important;
}
/* change background to light blue and font colour to dark blue and not bold */
.tabbrowser-tabs > tab[selected="true"] .tab-text {
  color: navy !important;
  font-weight: normal !important;
}
/* change colour of inactive tabs to grey */
.tabbrowser-tabs > tab:not([selected="true"]) .tab-text {
  color: black !important;
}
/* change font colour to red and italic whilst loading */
.tabbrowser-tabs > tab[busy] .tab-text {
  color: red !important;
  font-style: italic !important;
}
/* change font colour of un-read tabs to red */
#content tab:not([selected]) {
  color: red !important;
}

Watch out for icon distortion. Keep both items the same height. I also like to add a little padding space to the right of the tab to stop a tab label running all the way to the right edge. However, this breaks multi-row tabs in Tab Mix Plus extension in Firefox 3. I'm working on it. The code is OK in Firefox 2.

/* change the tab toolbar height */
.tabbrowser-tab {
  height: 24px !important;
  padding-right: 4px !important;
}
.tabbrowser-strip {
  height: 24px !important;
}

The tooltips just get in the way at times.

/* hide tooltips on tabs */
.tabbrowser-strip tooltip {
  display: none !important;
}

Some themes centre the tab text. Align it back to the left with this.

/* Text align tab text to left */
.tabbrowser-tabs {
  text-align: start !important;
}

In Firefox 2 and 3  you'll need this if you want to get rid of the double line at the bottom of the tab toolbar.

/* hide strip along bottom of tab bar */
.tabs-bottom {
  display: none !important;
}

However, in Firefox 2 and 3 this leaves a thick grey bottom to the tabs and removes the bottom border which delineates the tabs from the browser page. You might prefer this instead which removes it without leaving a gap.

/* hide strip along bottom of tab bar */
.tabs-bottom {
  height: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 1px !important;
}

Especially with the above changes, the tab text can sit a little too high.

/* move text down in tabs */
.tabbrowser-tabs .tab-text {
  padding-top: 4px !important;
}

I used to have the text in an active tab higher than the inactive ones, this solved it. It is in addition to the above. The amount of padding depends on your font and style etc, so experiment.

/* Move text up in selected tab */
.tabbrowser-tabs > tab[selected="true"] .tab-text {
  padding-top: 1px !important;
}

If you tabs have individual Close buttons, this centres them vertically and moves them to the right a little. Again, experiment to get them in the right place.

/* move close button down in tabs */
.tabs-closebutton {
  vertical-align: middle !important;
  margin-right: -6px !important;
}

I sometimes see this, when you click the Close buton on a tab a faint square appears around it. Nasty!

/* Remove close button border when clicked */
.tabs-closebutton, .tab-close-button {
  -moz-outline: none !important;
}

Another way of making the active tab more visible is to change the border colour.

/* Change border colour of selected tabs */
.tabbrowser-tabs > tab[selected="true"] {
  -moz-appearance: none !important;
  -moz-border-top-colors: blue !important;
  -moz-border-right-colors: blue !important;
  -moz-border-left-colors: blue !important;
}

An alternative to the above.

/* Change border colour of selected tabs to 3D effect */
.tabbrowser-tabs > tab[selected="true"] {
  -moz-appearance: none !important;
  -moz-border-top-colors: lightgrey !important;
  border-top-width: 2px !important;
  -moz-border-right-colors: black !important;
  border-right-width: 2px !important;
  -moz-border-left-colors: white !important;
  border-left-width: 1px !important;
}

The default tabs have small rounded corners almost to tiny to notice. This makes them slightly more rounded.

.tabbrowser-tab {
  -moz-appearance: none !important;
  -moz-border-radius-topleft: 6px !important;
  -moz-border-radius-topright: 6px !important;
}

When you click on the text of an active tab you get a dotted rectangle around the text. Very ugly!. This hides it.

/* hide focus rings around active tab */
.tabbrowser-tabs > tab:focus .tab-middle {
  -moz-outline: none !important;
}

Sometimes that doesn't work, depends on your extensions. If it doesn't try this.

/* hide focus rings around active tab */
.tab-text {
  border: none !important;
}

One way to make inactive, non-selected tabs appear less significant is to change their colour - perhaps grey (see above). Another is to make them slightly transparent and thus fainter. Works best with background image on tab toolbar.

/* make inactive tabs fainter */
#content tab:not([selected="true"]) {
  -moz-opacity: 0.7 !important;
}

Hide the tab toolbar and sidebar Close buttons.

/* hide the close button on the tab toolbar and side bar */
.tabs-closebutton {
  display: none !important;
}

Hide the tab toolbar Close button.

/* hide the close button on the tab toolbar */
tabbrowser .tabs-closebutton-box {
  display: none;
}

Hides the throbber when a tab is loading a page.

/* hide tab throbbers */
tab[busy] .tab-icon {
  visibility: hidden !important;
}

This hides the tab favicon on inactive, non-selected tabs.

/* hide the tab favicon on non-selected tabs */
tab:not([selected="true"]) .tab-icon {
  display: none !important;
}
/* hide all tab favicons */
.tab-icon {
  display: none !important;
}

This can be quite effective if you have enough horizontal screen estate. It places the tab toolbar on the left, forming a vertical column of tabs. Useful if you usually work with a lot of tabs open.

/* tab toolbar on the left */
#content > tabbox {
  -moz-box-orient: horizontal;
}
.tabbrowser-strip {
  -moz-box-orient: vertical;
  overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
  -moz-box-orient: horizontal;
  min-width: 10ex; /* you might need to increase this value */
  -moz-box-pack: start;
  -moz-box-align: start;
}
.tabbrowser-tabs > hbox {
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  -moz-box-pack: start;
}
.tabbrowser-tabs > hbox > tab {
  -moz-box-align: start;
  -moz-box-orient: horizontal;
}
.tabbrowser-tabs > stack {
  display: none;
}

Is it necessary to have space taken up with the word "Go" next to the Go button?

/* hide the 'Go' word in Go Button and correct the button size */
#go-button .toolbarbutton-text {
  display: none !important;
}
#go-button .toolbarbutton-icon {
  margin-right: 0px !important;
  margin-left: -2px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

The default theme for Firefox 2 has the Go buttons joined to their respective input boxes with a surrounding box. I prefer separate buttons.

/* remove the box from around the Go Button */
#go-button, .search-go-button {
  -moz-image-region: rect(0px, 20px, 22px, 5px) !important;
}
.go-button-background, .search-go-button-bkgnd {
  display: none !important;
}

Some don't like the new button style.

/* hide the Go Button */
#go-button-stack {
  display: none !important;
}

Some don't like the new button style.

/* hide the Search Go Button */
.search-go-button-stack {
  display: none !important;
}

This hides the menu item "Bookmarks Toolbar" under the Bookmarks menu. The toolbar will still show, but you can switch that off in the View...Toolbars menu.

/* hide Bookmarks Toolbar */
#bookmarksToolbarFolderMenu {
  display: none !important;
}
#organizeBookmarksSeparator {
  display: none !important;
}

This hides the menu item "Bookmarks Toolbar Folder" under the Bookmarks menu. The toolbar will still show, but you can switch that off in the View...Toolbars menu.

/* hide Bookmarks Toolbar Folder */
menu[label="Bookmarks Toolbar Folder"] {
  display: none !important;
}

Makes menus untidy and a pain to hit by accident. I don't use it.

menuitem[label="Open All in Tabs"], menuseparator[builder="end"]{
  display:none !important;
}

I find this unnecessary and a pain to hit by accident.

/* hide last item 'Open in Tabs' in Bookmarks menu */
.openintabs-menuseparator,
.openintabs-menuitem {
  display: none !important;
}

You can change the folder icon in this toolbar to your own. Here, I've an icon called "mozillafolder.png" which is placed in the chrome folder where the userchrome.css file is. You can use .gif or .ico files if you wish. The folder in the toolbar is called "Mozilla  " - that's "Mozilla" with two spaces after it. Why? Because you can add the drop down marker as well to the right of the icon and the two spaces after the name makes it look neater. Up to you. Do this same code for every folder you want to change.

/* change folder icons for bookmark toolbar folders */
#personal-bookmarks toolbarbutton[label="Mozilla  "] .toolbarbutton-icon {
  display: block !important;
  list-style-image: url('mozillafolder.png') !important;
  -moz-image-region: auto !important;
}

If you want the drop down marker next to the icon then put this after the above.

.bookmark-item > .toolbarbutton-menu-dropmarker {
  display: -moz-box !important;
}

Instead of individual folder designs, you can change them all with a new folder icon, here called "foldericon.ico". Place the new icon image in the chrome folder.

/* change all folder icons for bookmark toolbar folders */
.bookmark-item[container="true"] {
  list-style-image: url('foldericon.ico') !important;
}

If you have too many icons to display and the labels take up too much room. This also saves manually deleting them all and is, like everything else here, reversible.

/* hide the bookmark toolbar icon labels */
.bookmarks-toolbar-items .toolbarbutton-text {
  display: none !important;
}

Perhaps it's not the labels that you want to hide but the icons.

/* hide bookmark toolbar icon images */
#personal-bookmarks .toolbarbutton-icon {
  display: none !important;
}

This hides the folder named "Mozilla" in the bookmark toolbar.

/* hide bookmark toolbar folder name */
#personal-bookmarks toolbarbutton[label="Mozilla"] .toolbarbutton-text {
  display: none !important;
}

Change the icon labels in the bookmark toolbar. You can use style and colours as well. Have a look here (for instance at the status toolbar stuff below) for ideas.

/* change bookmark toolbar label font */
#personal-bookmarks .toolbarbutton-text {
  font-size: 8pt !important;
  font-weight: bold !important;
}

You can change the amount of space around the icons by increasing or decreasing the margins and padding around them. You can also use negative numbers. For margins and padding the order of the amounts listed is top, right, bottom, left. So here we effectively remove all margins and padding except for 2 pixels right and left of the icons. This makes them quite close.

/* change space around bookmark toolbar icons */
#personal-bookmarks toolbarbutton {
  margin: 0px 2px 0px 2px !important;
  padding: 0px 0px 0px 0px !important;
}

You can have more than one Bookmark toolbar with this code. As more bookmarks are created they are added to an additional toolbar below. Doesn't work in Firefox 3 but there is an extension.

/* multiple Bookmarks toolbars */
#bookmarks-ptf {
  display:block;
}
#bookmarks-ptf toolbarseparator {
  display:inline;
}

If you have a long list of bookmarks it can extend from the top to bottom of your screen. Change the number to suit.

/* set max length for Bookmark menu list */
menupopup,
popup {
  max-height: 800px !important;
}

If you have a long list of bookmarks it can extend from the top to bottom of your screen. Change the number to suit.

/* set max length for Bookmark menu list */
#bookmarksMenuPopup menupopup, #personal-bookmarks menupopup {
  max-height: 1100px !important;
}

Sometimes bookmarks can be very long making the dropdown menu very wide. You can limit this.

/* change maximum width of bookmarks menu items - default is 26em */
menu.bookmark-item,
menuitem.bookmark-item {
  max-width: 15em !important;
}

Sometimes bookmarks can be very long making the dropdown menu very wide. You can limit this.

/* change maximum width of bookmarks menu items */
#bookmarksMenuPopup menupopup, #personal-bookmarks menupopup {
  width: 300px !important;
}

This closes up the Bookmarks menu items a little.

/* decrease space between bookmark items */
/* main menu - folders */
menu.bookmark-item > .menu-iconic-left {
  margin-top: -1px !important;
  margin-bottom: 0px !important;
}
/* menu items */
menuitem.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

This hides favicons for bookmarks in the Bookmarks menu.

/* hide bookmark favicons */
menuitem.bookmark-item > .menu-iconic-left {
  display: none;
}

This hides the folder icons in the Bookmarks menu.

/* hide icons for bookmark folders */
menu.bookmark-item > .menu-iconic-left {
  display: none;
}

This hides the favicons for bookmarks in the Bookmarks toolbar.

/* hide bookmark favicons in the Bookmarks toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
  display: none;
}

By changing the number in the last line you can move the bookmark toolbar up or down. Here it is the third toolbar.

/* move bookmark toolbar down */
#PersonalToolbar {
  -moz-box-ordinal-group: 2 !important;
}

In an attempt to get all the toolbars to have the same height (especially Googlebar), changing the button heights helps enormously.

/* make all toolbars the same size, esp Googlebar */
/* Address url toolbar still larger than others though */
toolbarbutton {
  padding: 0px 4px !important;
  border: 0px !important;
  height: 24px !important; /* default size of normal toolbars */
}

To adjust the url toolbar to match the above. If you want it small and the deformed favicon disturbs you, then you can hide it - see 'Hide favicon placeholder' below.

/* make Address url toolbar same size, any smaller and icons are corrupted */
#urlbar {
  height: 24px !important; /* default size of normal toolbars */
}

To adjust the Search textbox to match the above.

/* make Search textbox height same size */
#searchbar .searchbar-textbox{
  height: 24px !important;
}

This changes the text in the Address url toolbar and Search textbox to fixed width font. Again, experiment as shown elsewhere on this page.

/* change font family of Address url toolbar and Search text box */
#urlbar,
#searchbar .searchbar-textbox {
  font-family: monospace !important;
  background-color: azure !important;
}

This rounds off the corners of these text boxes.

/* rounded Address url toolbar and Search textbox corners */
#urlbar,
#ggb_search_criteria,
#searchbar .searchbar-textbox {
  -moz-appearance: none !important;
  -moz-border-radius: 3px !important;
  -moz-border-corner-fit: scale !important;
  padding-right: 1px !important;
}

Windows XP already has slightly rounded dropmarkers (the little square on the right of the text boxes that bring down the Address history). If you have Windows 2000 or use the Classic style in XP then include this section after the above to round these as well.  To be honest this is pretty poor code and it's best to use the WellRounded extension or better go to http://userstyles.org/style/show/666 and insert the code into your userChrome.css file.

#urlbar > .autocomplete-history-dropmarker,
#ggb_search_criteria > .menulist-dropmarker {
  -moz-appearance: none !important;
  -moz-border-radius: 2px !important;
  -moz-border-corner-fit: scale !important;
}

There are three levels of security for sites which Firefox attempts to convey using background colour changes to the url toolbar background. Images can also be used instead. Here are the images used in the code below, right-click on each one, select "Save Image As..." and place them in your chrome folder. This still works for Firefox 3 although probably unnecessary and it now uses a different method to display security and is more comprehensive.

           

/* Address url toolbar background image for high security site */
#urlbar[level="high"] > .autocomplete-textbox-container {
  background-image: url('highsec.png') !important;
}
/* Address url toolbar background image for low security site */
#urlbar[level="low"] > .autocomplete-textbox-container {
  background-image: url('lowsec.png') !important;
}
/* Address url toolbar background image for broken secure site */
#urlbar[level="broken"] > .autocomplete-textbox-container {
  background-image: url('brokensec.png') !important;
}

If you don't like the background colour changing whilst browsing, this keeps it white. Firefox 3 uses a different method to show the security level so this isn't necessary.

/* hide the yellow shading in the Address url toolbar */
#urlbar[level="high"] > .autocomplete-textbox-container,
#urlbar[level="low"] > .autocomplete-textbox-container,
#urlbar[level="broken"] > .autocomplete-textbox-container {
  background-color: transparent !important;
}

If you don't want the little icon in the Address url toolbar then this hides it. This can enable you to make the height of this toolbar smaller without an ugly deformed icon getting in the way.

/* hide favicon placeholder in Address url toolbar */
#page-proxy-deck {
  display: none !important;
}

If you don't want this icon in the Address url toolbar then this hides it.

/* hide live feed icon in Address url toolbar */
#feed-button {
  display: none !important;
}

If you don't use the autocomplete history then hide the dropmarker (on the far right of the box).

/* hide the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker {
  display: none !important;
}

This tidies up the Search textbox and hides that little black triangle dropmarker.

/* hide the Search bar dropmarker */
.searchbar-dropmarker-image {
  display: none !important;
}

This changes the status toolbar panels to black with white text.

/* change colours of status toolbar panel */
#status-bar statusbarpanel {
  -moz-appearance: none !important;
  background-image: none !important;
  background-color: black !important;
  color: white !important;
}

This instead places an image "background,gif" in the status toolbar panels instead. Place your image in the chrome folder.

/* change background of status toolbar */
window statusbarpanel {
  -moz-appearance: none !important;
  background-image: url('background.gif') !important;
  background-color: transparent !important;
}

Change the font size and family, even style. Also the height of the status toolbar. Mix and match with the above.

/* change status toolbar height and font */
#status-bar {
  max-height: 17px !important;
  font-size: 8pt !important;
  font-family: Comic Sans MS !important;
  font-style: italic !important;
  font-weight: bold !important;
}

This hides the borders between every panel in the status bar including the bottom border giving a cleaner look which complements that of not having toolbar separators above.

/* hide status toolbar panel borders */
statusbarpanel {
  -moz-appearance: none !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
}

Instead of messing about with individual parts of Firefox, you can change the font, family, style etc with this. It should cover about everything except dialogs.

/* change all the fonts together */
menubar,
menubutton,
menulist,
menu,
menuitem,
textbox,
toolbar,
.tab-text,
tree,
tooltip,
sidebarheader,
statusbar {
  font-size: 10pt !important;
  font-family: Times New Roman !important;
}

This will change the font style of the Sidebar history and bookmark trees. Again, edit to suit using font style code from elsewhere on this page.

/* change sidebar font style */
#historyTree, #bookmarks-view tree {
  -moz-appearance: none !important;
  font-size: 10pt !important;
  font-family: Times New Roman !important;
}

You might want to make the Sidebar column header the same size as the tab toolbar.

/* increase Sidebar header height */
sidebarheader { height: 28px !important;
}

The Sidebar has a maximum width it can be pulled to. This removes this restriction.

/* remove Sidebar maximum width restriction */
#sidebar {
  max-width: none !important;
  min-width: 0px !important;
}

This code moves the Sidebar to the bottom of the window, so I suppose it ought to be called Bottombar?

/* make sidebar horizontal at the bottom */
#browser {
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
}
#sidebar-box {
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse;
}
#appcontent {
  -moz-box-orient: horizontal;
}
#sidebar {
  max-width: inherit !important;
  min-height: inherit !important;
}
#sidebar-box > sidebarheader {
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -moz-box-pack: end;
  border-left: 1px solid ThreeDHighlight;
  margin-left: 1px;
}

To remove the space before the Restart icon inserted by this extension.

/* remove space in Extension/Theme manager window just before the Restart icon */
#restart-spacer {
  display: none !important;
}

To remove the spacer before the Find Update button so that it sits with the other buttons.

/* remove spacer before Extension/Theme manager Find Update button */
#commandButtonContainer + spacer {
  display: none !important;
}

More to come...

 

Home Start Extensions Chrome