Fixing iGoogle with User Styles

Posted October 21, 2008

Recently, Google updated their iGoogle Homepage. As happens with most UI changes, people were not terribly pleased with it. One of the main complains, and my biggest problem with it, was that it added a tab sidebar that ate up screen real estate.

It is useful if you have many tabs for your homepage, but since I only use one tab, I find it obnoxious. Worse, there is no setting to hide it automatically. Fortunately, Lifehacker quickly came through with a Greasemonkey script. It works, but because it uses javascript, there's always a second between page load and script execution where the page still looks off.

So I decided to fix it myself using Firefox's user styles. First, I installed Stylish to make editing user styles easier. Then I added the following style:

@-moz-document url(http://www.google.com/),
               url-prefix(http://www.google.com/ig),
               url-prefix(http://www.google.com/webhp) 
{
    #doc3 td#col1, #footerwrap { display: none; }
}

#doc3 td#col1 is the table column (Gasp! Table layout?! Really Google?) that holds the list of tabs. Hiding it is all you need to get rid of it. There will be a little weirdness at the bottom left over from the curve at the bottom of the column. Hiding #footerwrap will get rid of that, as well as remove the footer, making the page shorter.

Now your iGoogle can take up the whole width of the page.