How I fixed Google's search results redesign

May 22, 2010

I really dislike Google's redesign of their search results, because they commit one of my great irritations; they put site navigation on the left side (where it cuts off content in narrow windows) instead of on the right (or on the bottom, or nowhere). After a few days of staring at the new design and grinding my teeth, I decided to fix it.

Since I use Firefox, the modern way of fixing this is probably a Greasemonkey script. However I don't use Greasemonkey for various reasons; partly because I use NoScript and I don't know how the two would interact, and partly because I've never wanted the kind of high-powered rearrangement of web pages that is Greasemonkey's stock in trade (if a website needs that much rearrangement to be nice, I'm not likely to use it to start with). So my weapon of choice in this situation is the Stylish extension, which lets me add and override CSS settings.

(The drawback to Stylish is that it only really works well if the website has annotated their HTML with class and ID labels, so that you can precisely target your CSS restyling. Fortunately this is usually the case when people are doing obnoxious styling tricks that I want to override, since they're usually using CSS to style things in the first place.)

The problem with Stylish-based alterations is figuring out what to change, which requires reverse engineering the HTML and CSS to see what creates the bad design in the first place. Usually I can read things by hand, but Google uses such densely packed HTML and CSS that I gave up and temporarily installed Firebug and used it to pick through the mess. The net result is the following Stylish style:

@namespace url(;

@-moz-document url-prefix("") {
  div #leftnav {display: none !important;}
  div #center_col {margin-left: 0px !important;}

For the most part this is brute force CSS bashing; it first deletes the left navigation area and then overrides an attempt by the search results to keep reserving space for it. The most useful thing (and a feature not directly exposed by Stylish) is using the url-prefix option to force this style to apply just to Google search results instead of everything at Google.

(See the @-moz-document documentation for a tiny bit more on this. Stylish directly exposes the other two options it has.)

Written on 22 May 2010.
« Why I'm wrong about what sort of APIs C's stdargs allows
Replacing modules for testing (and fun) »

Page tools: View Source, Add Comment.
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Sat May 22 23:52:00 2010
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.