Wednesday, October 28, 2009

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.

No comments:

Post a Comment