Advanced: userChrome.css

Firefox supports using user-defined CSS (Cascading Style Sheets) to modify the browser UI. You could, for example, change the font size of menu items in the UI, remove unneeded menu items, disable rendering embedded content in pages and so on.

As with the user.js file; the userChrome.css which allows all this is not created by default. To do so, navigate to your profile directory and open the chrome subdirectory. Now manually create the userChrome.css file (If you donít know how to do this you can copy the userChrome-example.css, rename it and then place it in the chrome folder). This file can be opened with any text editor.

Described beneath is an example of utilizing CSS to alter the browserís UI.

Hide Menus/Menu Items

To hide menus or menu items from the browser modify the code beneath;

menu[label="X"] { display: none !important; }

X specifies the name of the menu/menu item to be hidden. This name is to be stated exactly as it is displayed in the menu itself, e.g. to hide the Character Encoding item from the View menu youíd enter;

menu[label="Character Encoding"] { display: none !important; }

Multiple menu/menu item can be hidden in this way be separating each entry with a comma and blank space (, ), e.g. to hide the Character Encoding, Release Notes and Go menu you would use the following code;

menu[label="Character Encoding"], [label="Release Notes"], [label="Go"] { display: none !important; }

Advanced Configuration - UserContent.css

In addition to modifying the browser UI, itís also possible to modify how the browser handles webpages (UserContent.css). You could, for example, modify how hyperlinks appear in pages, or hide embedded content.

The procedure is the same as with userChrome.css, i.e. navigate to your profile directory and open the chrome subdirectory. Now manually create the userContent.css file (If you donít know how to do this you can copy the userContent-example.css, rename it and then place it in the chrome folder). This file can be opened with any text editor.

Described beneath is an example of utilizing CSS to modify webpage rendering.

Hide Embedded Shockwave Content

To hide embedded Shockwave content from the browser use the code beneath;

embed[type="application/x-shockwave-flash"] { display: none !important; }

Note Ė This doesnít alter the appearance of the move, merely hides the content, i.e. no layout changes.

Change Cursor Over Javascript Links

This tip allows you to change the appearance of the cursor when moved over JavaScript links, in this case an unavailable icon;

a[href^="javascript:"] { cursor: not-allowed; }

These are just some examples of what can be achieved with CSS in Firefox; there are significantly more opportunities than these of course. A good place to begin looking for further such tips would be Mozilla.org.