Firefox Tweak Guide

[Page 12] Advanced Tweaking (Pt.4)

Web pages often use CSS (Cascading Style Sheets) to customize their basic elements, such as the color of hyperlinks, or the size and type of fonts used to display text in various parts of the page, and so forth. The Firefox files UserChrome.css and UserContent.css are described at the start of the Advanced Tweaking section, but essentially they work on the same theory - they allow users to customize the basic elements of the user interface and web layout presented by Firefox. UserChrome.css relates to elements of the Firefox user interface, while UserContent.css affects the appearance of web pages displayed within Firefox.

New to Firefox 4.0, By default neither of these files exist as of the latest version of Firefox, and neither does the directory in which they normally reside. Each of these must first be created under your profiles directory - refer to the start of the page 9 for more details of profiles. The first step is to create a \Chrome directory under your profiles directory, with the end result looking like this:

Windows XP: \Documents and Settings\[Username]\Application Data\Mozilla\Firefox\Profiles\[profilename]\Chrome

Windows Vista or 7: \Users\[username]\AppData\Roaming\Mozilla\Firefox\Profiles\[profilename]\Chrome

Next, right-click in this new directory and select New>Text Document, then rename this newly created file to UserChrome.css; repeat the same steps to create a UserContent.css blank file under the same directory. Make sure the .txt extension does not remain on either of these files, e.g it must not be UserChrome.css.txt. These files can be edited using a text editor such as Windows Notepad, and along with a range of custom code from places like the Userstyles site, and a good CSS Tutorial you will be able to learn how to manipulate CSS code to create the perfect customizations to suit your own needs.

Click to enlarge

To perform some basic changes you don't need to know any CSS. Below I provide a range of tweaks which work in the latest version of Firefox, and which provide a handy demonstration of what is possible when using CSS to customize Firefox. You can copy and paste the code portion shown (highlighted in grey) exactly as is into the relevant CSS file to enable or disable different functionality. Make sure to read any notes beneath the code. You can add as many tweaks as you like to a single .css file, and to undo any of them simply delete the relevant portion of code from the file. Note that you must close all instances of Firefox and restart the browser to implement any changes to the .css files.


Change Firefox Button Color & Transparency

/* Change Firefox Button Color & Transparency*/
#appmenu-button {background: -moz-linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1) 95%) !important;}

This changes the color of the orange Firefox button, as well as its transparency. The code above makes a transparent uncolored button. To customize the color and opacity, edit the values in the two rgba() sections to match, or use different values to get a gradient effect. The first three values in rgba brackets are for color (Use this RGB Color Chart), the final value is for Alpha transparency, ranging from 0 (fully transparent) to 1 (fully opaque).

Remove Bookmark Star

/* Remove the Bookmark Star */
#star-button {display: none !important;}

This removes the Bookmark Star shown at the far right of the Address Bar.

Remove Search Box from Downloads Window

/* Remove Downloads Window Search Box */
#searchbox {display:none !important;}

This removes the Search box at the bottom right corner of the Downloads window.

Customize Address Bar Width

/* Custom Width for Address Bar */
#urlbar {max-width: 500px !important}

This sets a custom width for the main Address Bar - alter the 500px value above to whatever pixel size you wish (e.g. 300px for 300 pixels wide, 900px for 900 pixels wide, etc.).

Make Inactive Tabs Transparent

/* Make Inactive Tabs Transparent */
.tabbrowser-tabs tab:not([selected="true"])
{background-image: white !important; opacity:0.5;}

This makes all inactive tab bars relatively transparent. The actual level of transparency is determined by the opacity value - raise it closer to 1 (e.g. 0.8) and the inactive tabs become less transparent; lower it closer to 0 (e.g. 0.3) and the inactive tabs become more transparent.

Make the Link Box Transparent

/* Make Link Box Transparent */
.statuspanel-label[value=""] {display: none !important;}
.statuspanel-label:not([value=""]){opacity: 1 !important;
-moz-transition-property: opacity: 0 !important;
-moz-transition-delay: 2000ms !important;}
.statuspanel-inner{margin: 0 1px !important;}
.statuspanel-label {color: Windows Text !important;
border-color: Transparent !important;
background: Transparent !important;}

The link box is the popup URL text box which appears at the bottom of the screen whenever you hover your mouse over a hyperlink. This tweak changes its background color from white to transparent.

Remove Toolbar Menu Items

/* Remove Menu Items */
#helpMenu {display: none !important;}

This is only applicable if the Menu bar is visible in Firefox. In the example above the Help menu will be removed. However you can remove any menu items you want by inserting their names (#file-menu, #edit-menu, #view-menu, #bookmarksMenu, #tools-menu, #helpMenu). To remove multiple menus at once add a comma and a space between each one (e.g. #helpMenu, #tools-menu, #file-menu { display: none !important; }).


Change Cursor for Links that Open in New Tabs/Windows

/* Change cursor for links that open in new tab/window */
:link[target="_blank"], :visited[target="_blank"],
:link[target="_new"], :visited[target="_new"] {
cursor: crosshair; }

This changes your default cursor to a crosshair whenever you hover over a link which opens in a new tab or window as opposed to opening in the current tab/window.

Remove the Google 'Everything' Sidebar

/* Remove Google Everything Bar*/
@-moz-document url-prefix(
{div#leftnav { display: none !important;}
#center_col { margin-left: 0px !important;}}

This removes the 'Everything' Sidebar shown when you conduct Google searches. Change the portion shown above to exactly match the address of the Google Search domain you use. For more details and other Google tweaks, see the Google Customization Guide.

In practice, rather than using UserContent.css, it's actually much easier to customize the appearance of web pages using the settings available under the 'Fonts & Colors' section of the Firefox Options, hence the relative lack of UserContent.css tweaks. See the Firefox Settings section for details.

The ability to customize Firefox simply by using CSS code provides a great deal of potential in tweaking Firefox's interface and web display capabilities with no need to install additional software in the form of add-ons. This reduces the potential resource usage and conflicts which can occur if you have lots of add-ons installed simply to make relatively simple adjustments to the Firefox UI.

The next page brings the guide to a Conclusion, with some handy tips before we end the whole thing.