Theme a site with Greasemonkey and Stylish

Motivated by Gmail's Terminal theme, I hacked a similar theme for an internal Web site using Firefox's Greasemonkey and Stylish add-ins. My approach was to write some small Greasemonkey scripts to touch up different parts of all pages independently, then use Stylish to apply style definitions (the theme) from one CSS file. If you want to create another theme for this site, just create a new CSS file.

1. First, I identified logical components of each web page, for example navigation bar, header, footers, forms and tables.
2. Wrote a Greasemonkey script for each logical component that:
   1. Removed any physical formatting such as border or bgcolor.
   2. Labelled each component with an ID and / or a class name.
3. When naming each script, prefixed each script name with the site name to make them easy to find in Greasemonkey's Manage User Scripts dialog.
4. Configured Greasemonkey's Included and Excluded pages to call each script as required.
5. Wrote a site-wide CSS file, using the IDs and class names that were previously defined.
6. Added the CSS file to Stylish. The CSS file name is prefixed with the site and theme name.

Instant theme!

See Also

• (08-10-25) Reusing Custom Page Styles With @-moz-document