Thom Nichols

Thom

Technology is evolution outside the gene pool

Darken Google and other UserContent CSS tricks

So Stylish is a popular FireFox extension that allows you to change the way certain websites look.  Being a minimalist, I'm generally happy with the way websites are presented by default (once ads are removed, of course) and don't want to install another FireFox extension.

There are, however, a couple rare sites that I do have the desire to change.  The main culprit being Google.  More specifically, Google is too white (no that's not racist.)  Luckily, I can darken Google (that is, _real_ Google, not the Google Dark site.  Mostly because if I want to use Google's new search sandbox, Caffeine, the customized Google frontends can't do that.

Getting to the point, I can modify the CSS for any site I want using FireFox's UserContent.css file.  Here's a CSS snippet to darken Google's search results pages:

@-moz-document url-prefix(http://www.google.com/search),
 url-prefix(http://www2.sandbox.google.com) {

 body, #gsr {
 background-color: #111 !important;
 color: #ccc !important;
 }

 #ssb, #tbd, #bsf, #mbEnd, #tads {
 background-color: #222 !important
 }

 #mbEnd { border-left-color: transparent !important }

 a, .link { color: #7bC !important }
}

Here's a screenshot of the result:

And here's another handy trick: You can also remove those huge iframe ads from Google Reader in the same way:

@-moz-document url-prefix(https://www.google.com/reader/),
 url-prefix(http://www.google.com/reader/) {

 #viewer-container iframe {
 display: none !important
 }
}

You can find more information on customizing FireFox here and here.

(Comments are closed)

1 Comments

  1. avatar Re: Update Dec. 8, 2009 Thom

    Update: This is no longer strictly necessary now that Google's Caffiene sandbox has been rolled into their normal search results.  However, it is still a good demonstration of custom styling via usercontent.css.