Chris's Wiki :: blog/web/FixingGoogleRedesign

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(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.google.com/search") {
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.)

Comments on this page:

From 75.160.49.65 at 2010-05-23 03:44:34:

I don't like the links on the left either. However, I do find them useful time to time… have you had any success moving them to the right side of the screen?

Also, since you're using Stylish, you should add this to userstyles.org so others can easily find it.

-- SamatJain

By cks at 2010-05-23 07:56:59:

I don't ever use those links, so I haven't made any attempt at relocating them instead of just making them disappear.

From 77.22.207.230 at 2010-05-23 12:39:30:

This puts the whole column to the right, but it might break down on narrow browser windows:

   @namespace url(http://www.w3.org/1999/xhtml);

   @-moz-document url-prefix("http://www.google.com/search") {
     div .lhshdr {float: right !important;}
     div #center_col {margin-left: 0px !important;}
   }

By rdump at 2010-05-23 14:42:11:

Google will break this when they decide too many of the sheep are revolting, but for now it works: http://www.google.com/webhp?hl=all

From 76.113.53.58 at 2010-05-24 00:25:13:

I just clicked one times on the minus near "Web Results" and voila, no more left column. It's sticky, as long as you're logging in at least.

By Dan.Astoorian at 2010-05-24 09:54:56:

This page may be of interest.

It provides a Firefox plug-in, a Chrome extension, and a Greasemonkey script to add a toggle button for the left-hand navigation bar.

--Dan

From 94.193.50.45 at 2010-05-29 16:45:03:

Greasemonkey and NoScript coexist quite happily; I use both in all my profiles.

Written on 22 May 2010.

«	Why I'm wrong about what sort of APIs C's stdargs allows

Replacing modules for testing (and fun)