Firefox Tweak Guide
[Page 12] Advanced Tweaking (Pt.4)
Web pages often use CSS (Cascading Style Sheets) to define basic elements such as what color hyperlinks are, 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 define the basic elements of the user interface and web layout presented by Firefox. UserChrome.css can be used to customize various elements of the Firefox user interface, while UserContent.css can be used to customize the appearance of web pages displayed within Firefox.
By default neither of these files exist, and must be created in the \chrome subdirectory of your relevant Profile folder. For profile folder locations and instructions on creating these files, again refer to the start of the Advanced Tweaking section on page 9 - usually you can just rename the existing UserChrome-example.css and/or UserContent-example.css files under that directory by removing the -example portion of the name, and blank their contents. These files can be edited using a text editor such as Windows Notepad, and along with a good CSS Tutorial you will be able to learn how to generate and manipulate your very own CSS code to create the perfect customizations to suit your needs.
To perform some basic tweaks you don't need to know any CSS. Below I provide a range of useful tweaks which work in the latest version of Firefox, and which also demonstrate what is possible when using CSS to customize Firefox. You can copy and paste the code shown (highlighted in grey) exactly as is into the relevant CSS file to enable or disable different functionality, though make sure to read any notes beneath the code as some parameters may need to be altered. To undo any of these tweaks simply delete them from the relevant .css file, save the file, then close and restart Firefox:
UserChrome.css
Remove Toolbar Menu Items
/* Remove Menu Items */
#helpMenu { display: none !important; }
Note: 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; }).
Remove Open New Tab Button
/* Remove Open New Tab Button */
tabbrowser .tabs-newtab-button { display: none !important; }
Note: This removes the small '+' button on the tab bar.
Remove Bookmarks Toolbar Folder
/* Hide the 'Bookmarks Toolbar' folder in the Bookmarks menu */
#bookmarksToolbarFolderMenu { display: none !important;}
#organizeBookmarksSeparator { display: none !important;}
Note: This removes the Bookmarks Toolbar folder found under the Bookmarks menu.
Remove Bookmark Star
/* Remove the Bookmark Star */
#star-button { display: none !important; }
Note: This removes the Bookmark Star shown at the right of the Address Bar.
Use a Custom Background Image for Toolbars
/* Use a background image for the toolbars */
menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url("background.gif") !important;
background-color: none !important; }
Note the background.gif image mentioned above must be in .GIF format, and be placed in the same directory as the UserChrome.css file for this tip to work.
Change Color of Tabs
/* Change color of active tab */
tab{ -moz-appearance: none !important; }
tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important; }
/* Change color of normal tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important; }
Note: The first set of code is for the active tab, the second set is for other tabs. If you want to change the colors used, simply edit the values shown in the relevant rgb( ) and color: lines. To determine new RGB values, use this RGB Color Chart. For the color values, use common words like white, black, blue etc.
Display Sidebar on the Right
/* Place the sidebar on the right edge of the window */
window > hbox {
direction:rtl; }
window > hbox > * {
direction:ltr; }
Note: If you use the Sidebar (under the View>Sidebar menu in Firefox), this switches it from displaying on the left of the screen to the right side of the screen.
UserContent.css
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; }
Note: 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.
Block Flash Animations & Advertisements
/* Block Flash, using a placeholder you can click to unblock a desired Flash animation. */
/* Doesn't work for embed tags, which are less common than object tags - bug 190970 */
object[classid$=":D27CDB6E-AE6D-11cf-96B8-444553540000"],
object[codebase*="swflash.cab"] {
-moz-binding: url("http://www.cs.hmc.edu/~jruderma/flash.xml#obj"); }
Note: This removes/replaces all Flash advertising and Flash-based elements with a 'Click to Play' prompt. You can then play the flash animation if you wish, or you can continue to ignore it on a web page. Make sure to press CTRL+F5 to make it work for pages you have visited before, as some ads will already have been cached.
Remove All Embedded Content
/* Nuke all embedded objects, thanks to bertilow on Slashdot */
object, embed { display: none; }
Note: This is a very simple but very powerful tweak which removes completely all embedded content, usually flash and shockwave animations and so forth. This can remove much of the flashing advertising elements of web pages which are annoying.
As you can see, there is a wide range of possibilities when tweaking Firefox's interface and web display capabilities using these .css files. I recommend that if you're interested in having a browser completely suited to your needs you try to learn some CSS, as it's not very difficult to pick up the basics.
The next page brings the guide to a Conclusion, with some handy tips before we end the whole thing.
| 
|