How to Custom Colorize Firefox

The following is a method to customize the appearance of firefox using personal profile Chrome.css settings.

Steps
1. Editing Firefox Chrome settings is difficult, but an add-on extension called ChromeEdit Plus makes it easy. For whatever reason Mozilla has made it difficult to get. It can be found on the following page: "ChromeEdit Plus 2.7.0"
2. This Addon is unsigned but seems to be ok. Open ChromeEdit and in userChrome.css enter code, clicks save and restart. Sometimes it takes experiment. Code may be removed at any time and browser will revert to old form.

• UserChrome.css is fairly exacting. It looks like this:
  

/* Menu and toolbar color */
   navigator-toolbox {background: #efcb87 !important;
   }

• However css code takes all sorts of forms. Not all codes that one may find on the internet work. The one's shown below work for me with the latest Firefox edition.

3. The code /*...*/ does not affect Firefox settings. It is meant merely as a descriptive title. Listed below is a series of codes that affect color and remove things like go or help buttons, set spaces or customize tab bar. One can substitute their own values. Colors may be either text (red) or numerical (#000000)

• This one changes the color of the top two browser tiers or menu and navigation toolbar.

/* Menu and toolbar color */
   navigator-toolbox {background: #efcb87 !important;
   }

• This changes the font size and color of the address or URL bar.

/* Change address bar font */
   #urlbar{ font-family: Arial !important; font-size: 11pt !important;
   color: brown !important; background-color: #9fddef !important;
   }

• Changes background color of the booksmark toolbar.

/* Booksmark toolbar color */
   PersonalToolbar { background: #a8d787 !important;
   }

• Self-evident with no border.

/* Change tab bar background color */
   #browser tabs {-moz-appearance: none !important;
   border: 0 !important;
   background-color: #df8453 !important;
   }

• This one changes font size on the browser search window. Cannot find how to change font color.

/* searchbar font type size */
   #searchbar { font-family: Arial !important; font-size: 12pt !important;
   }

• Changes background color to search window and seems to need to be separate from the forgoing font color.

/* Search bar color */
   #search-container .searchbar-textbox {
   -moz-appearance: none !important;border: 0 !important;
   background-color: gold !important;
   }

• Go button

/* remove go button*/
   #go-button-stack, .search-go-button-stack {
   display: none !important;
   }

• Help menu

/* Remove the helpMenu */
   #helpMenu, #help-menu {
   display: none !important;
   }

• Throbber

/* Eliminate the throbber */
   #throbber-box { display: none !important;
   }

• Tab

/* Tab width */
   #browser.tabs.tab {
   ClipWidth", 50; MinWidth", 50);
   important;
   }

• Search bar

/* Slightly rounded address and search bar corners */
   #urlbar {>br>
   -moz-appearance: none !important;
   -moz-border-radius: 3px !important;
   padding-right: 1px !important;
   }

• Progress bar

/* Change the progress bar color */
   .progress-bar {
   -moz-appearance: none !important;
   background-color: #660000 !important;
   }

• Status bar

/* Change status bar text color/size*/
   #status-bar {-moz-appearance: none !important;
   color: brown; font: bold 10pt Arial; !important;
   }

• Status Bar Overide

/* Statusbar override display of default text color & bg */
   window statusbarpanel {
   -moz-appearance  : none !important;
   color: blue !important;
   border-top: 1px solid ThreeDShadow;
   border-left: 2px solid ThreeDHighlight;
   border-right: 2px solid ThreeDHighlight;
   border-bottom: 1px;
   background-color: #df8453;
   min-height: 22px;
   } 

4. More user chrome codes: " mozillaZine"
" The latest Mozilla chrome codes:"
5. Adjustments in appearance and color can also be made with add-on extensions: " Addons"
6. BOOKMARKS TOOL BAR: You can use favicons of choice, remove text and create spacing. To add favicons to Bookmarks Toolbar: Place cursor on favicon in address window and drag to toolbar. To remove text from favicons on tool bar: right click the favicon/Properties/Delete name. The latest updates to Firefox allows one to choose one's own favicon. Right click on a favicon one wants to change on Bookmarks Toolbar. Properties/icon/Browse/ and select from a folder you have created containing favicons either downloaded from a favicon sight or one you have created.

• UserChrome.css:

/*allows increase or decrease of padding 

or margin around icons selected for bookmarks */

   #personal-bookmarks toolbarbutton {
   margin: 0px 8px 0px 8px !important;
   padding: 4px 4px 4px 4px !important
   }

• To remove text: right click the favicon/Properties/Delete name.

7. TABS TOOL BAR:

• One might begin with the extension:

" Tab Mix Plus This has a lot of options for control of tabs. However this is so complicated doubt anyone could figure it out. A more simple tab control tool is " Tab Browser Preferences. This shows up as after download as 'Tabbed Browsing' on your Options/Tab menu. To get new tabs to open in window: Tab Focus/Mouse Tab Focus/Select/New tabs created by links.

• To get rid of text and shrink tabs: Download the add-on extension:

" Faviconize Tab

• Enable auto faviconize. Enter URLs of favorites to faviconize. Shrinks the size of tab eliminating text.

• To make every tab a different color:

" Colorful Tabs This add-on assigns random colors to each tab. With the new Firefox2 may have to uninstall and reinstall this.

• For permanent tabs 'Tab Mix Plus' has lock tab. The lock symbol can be

removed by: Tab Mix Plus Options/Display/Tab/Uncheck: Tab icons for lock and protected. Another add-on to accomplish this is: " PermaTabs

• To clear all impermanent tabs at once download:

" Close All Tabs which is a toolbar button from your customize toolbar.

• Another means to control tabs is:

" Tab Control

• Another neat add-on is

CollorZilla which gives an Eye Dropper and Color Picker, and with the cursor will give the give the hex colors codes from and in the status bar.

source : www.wikihow.com