Custom Colorize Firefox

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

Steps

ChromeEdit Plus Codes

  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, click save and restart. Sometimes it takes experimenting. 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 ones shown below work for me with the latest Firefox edition.
  • 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 */
  1. urlbar{ font-family: Arial !important; font-size: 11pt !important;
   color: brown !important; background-color: #9fddef !important;
}
  • Changes background color of the bookmarks toolbar.
/* Booksmarks toolbar color */ 
   PersonalToolbar { background: #a8d787 !important;
}
  • Self-evident with no border.
/* Change tab bar background color */
  1. browser tabs {-moz-appearance: none !important;
   border: 0 !important;
   background-color: #df8453 !important;
}
  • This one changes the font size on the browser search window. Cannot find how to change font color.
/* searchbar font type size */
  1. 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 */
  1. search-container .searchbar-textbox {
   -moz-appearance: none !important;border: 0 !important;
   background-color: gold !important;
}
  • Go button
/* remove go button*/
  1. go-button-stack, .search-go-button-stack {
   display: none !important;
}
  • Help menu
/* Remove the helpMenu */
  1. helpMenu, #help-menu {
   display: none !important;
}
  • Throbber
/* Eliminate the throbber */
  1. throbber-box { display: none !important;
}
  • Tab
/* Tab width */
  1. browser.tabs.tab {
   ClipWidth", 50; MinWidth", 50);
   important;
}
  • Search bar
/* Slightly rounded address and search bar corners */
  1. 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*/
  1. status-bar {-moz-appearance: none !important;
   color: brown; font: bold 10pt Arial; !important;
}
  • Status Bar Override
/* 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;
}
  • UserChrome.css:
/*allows increase or decrease of padding

or margin around icons selected for bookmarks */

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

Other Info

  1. More user chrome codes: " mozillaZine" and " The latest Mozilla chrome codes:".
  2. Adjustments in appearance and color can also be made with add-on extensions: " Addons"
  3. 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 you want 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. To remove text: right click the favicon/Properties/Delete name.
  4. 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, I doubt anyone can figure it out. A more simple tab control tool is " Tab Browser Preferences. After downloading, it shows up 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, you 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 shows an Eye Dropper and Color Picker that gives you the hex color codes on the status bar to whatever you point to.

Related Articles

Retrieved from "https://kipkis.com/index.php?title=Custom_Colorize_Firefox&oldid=322241"