Stylish

The Stylish Firefox extension is to CSS what Greasemonkey is to Javascript.

Styles which alter the appearance of the browser (equivalent to userChrome.css) start with

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

while styles which alter the appearance of pages (equivalent to userContent.css) are wrapped with @-moz-document domain(){} or url-prefix(){} or url(){}, or nothing, depending on where you want them to apply. All CSS styles added to Stylish are applied automatically without having to restart the browser.

For example, these styles apply to visited links in del.icio.us:

@-moz-document domain(del.icio.us){
    .desc a:visited { text-decoration: line-through ! important; }
}

These add markers after any link to certain file formats:


a[href$=".pdf"]:after { content: ' [PDF]'; }
a[href$=".mp3"]:after { content: ' [MP3]'; }
a[href$=".mov"]:after { content: ' [MOV]'; }
a[href$=".rm"]:after { content: ' [RM]'; }

and these make some changes to the browser appearance:


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* Force the Back label to be visible, even in no text */
toolbar:not([mode=full]) #back-button .toolbarbutton-text {
  display: -moz-box !important;
}
/* Put the Back label to the right of the button */
toolbar:not([mode=full]) #back-button .toolbarbutton-menubutton-button {
  -moz-box-orient: horizontal !important;
}
/* Put some spacing around the Back button icon */
toolbar:not([mode=full]) #back-button .toolbarbutton-icon { 
  margin-left: 8px; 
  margin-right: 8px; 
}
/* Remove Forward button when there's nothing to go forward to */
toolbar:not([mode=full]) #forward-button[disabled="true"] {
    display: none;
}
/* make the search bar a usable size */
.searchbar-textbox {
    width: 32em !important;
}