Firefox Add-Ons Puzzle

Firefox User Interface Customization

Introduction

Following are a few cool things you can do to customize the appearance of the Mozilla Firefox web browser or its derivatives, such as Waterfox. I’ve just started to put this resource together, but i’m sure many more items will be added in the near future.

Stuff to know

  • You will need to know how to create and edit a userChrome.css file if you haven’t got one.
  • If you need help with CSS selectors and what parameters they can take, see these two documents at w3schools.com which is an excellent resource:
  • If you’re using Classic Theme Restorer, some of this code may interfere with options in CTR and so you disable those options corresponding to the items below if you want to use my code instead
  • Classic Theme Restorer is a great source for popular and well written CSS code for customizing Firefox. Just download the package and extract it and you’ll find all sorts of goodies.

CSS: Move Status Panel to top and style it

The Status Panel is the pop-up text you see in the bottom left/right of the browser when you hover over a link. It also displays some information about the page loading process. As i recall, the link target text used to be located in the location bar before the Australis theme changed all that and dumbed-down Firefox. I’ve always hated that annoying pop-up text appearing at the bottom of the view port (the part of the browser that displays the web page) and so i changed its appearance and location.

The CSS below will move the Status Panel to the top of the view port, make it span the full width of the view port, make it appear semi-transparent with a black background and white text and change some other attributes. You can customize it to your liking.

Copy the code below and past in your userChrome.css file. At the very least you will probably have to change the pixel setting in the top property to get the Status Panel to appear where you want it vertically. If you like the appearance of the Status Panel but prefer to keep it on the bottom of the view port, just delete the line beginning with top:.

/* move status panel to top and style it */
statuspanel {
 top: 76px !important; /* distance from top of browser, not from top of viewport */
 z-index: 999 !important;
 width: 100% !important;
 box-shadow: none !important;
 border-bottom: 1px solid rgba(182,182,182,1.0) !important;
}
.statuspanel-label {
 background-color: rgba(0,0,0,0.5) !important;
 color: white !important;
 font-size: 13px !important;
 font-family:"DejaVu Sans Mono";
 width: 100% !important;
 margin: 0 !important;
}
/*
 * uncomment the below code if you want to change font and background colors for different status individually
*/
/*
statuspanel[type="overLink"] .statuspanel-label {
 background-color: rgba(255,255,255,0.85) !important;
 color: darkblue !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Looking"] {
 background-color: rgba(0,0,0,0.5) !important;
 color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Connect"] {
 background-color: rgba(0,0,0,0.5) !important;
 color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Waiting"] {
 background-color: rgba(0,0,0,0.5) !important;
 color: white !important;
}
statuspanel[type="status"] .statuspanel-label[value^="Transfer"] {
 background-color: rgba(0,0,0,0.5) !important;
 color: white !important;
}

CSS: Reduce navigation bar icon spacing

Reduce the horizontal space between the icons on the Navigation Bar. Adjust the -3 parameters to your liking.

@-moz-document url("chrome://browser/content/browser.xul") {
  /* nav bar icon spacing */
  #nav-bar toolbarbutton {
    margin-left: -3px !important;
    margin-right: -3px !important;
  }
}

CSS: Remove “Get Add-Ons” menu item from the add-ons panel

/* remove the Get Add-Ons button in the sidebar */
@-moz-document url("about:addons") {
  #category-discover {
    display: none !important;
  }
}

CSS: Adjust vertical space between the bookmark items

This will reduce the vertical space between your bookmarks in the sidebar.

/* adjust spacing between bookmark menu items */
.sidebar-placesTree treechildren::-moz-tree-row {
  height: 1.2em !important;
  border-width: 1px !important;
}

More coming! Stay tuned…

Leave a Reply

Your email address will not be published. Required fields are marked *