Restyling iGoogle

After the new iGoogle launched, there was a lot of commotion in various forums about how much space is wasted by the sidebar. At this point I had been using the "new" iGoogle for a month or two through the developer sandbox, but really didn't notice it being that bad since most of my time on the internet is on a 1920x1200 monitor. I did notice it a little bit on my laptop, but didn't care enough to look into the issue.

Once the new interface officially launched, a friend of mine was particularly unhappy at the wasted space. I mentioned that I had used Greasemonkey for hacking around the DOM on various sites (Facebook, Flickr, etc). All he wanted to do was restyle - mostly, hide the sidebar.

I took this opportunity to install Stylish and see what I could figure out. Hiding the sidebar and the top bar were cake. I then decided I wanted to remake the top bar, but wasn't sure where to go with it. I borrowed a few ideas from other styles I found out there and wrote them into mine.

Here is the before shot with my selected theme and my spattering of RSS feeds. My gmail and calendar are minimized for obvious reasons.

And here is the after shot, all cleaned up. Details are to follow.

The big differences are the hidden side and top (the part with the image) bars. This particular style won't work for you if you actually use tabs on your iGoogle. I don't, so I completely killed that functionality with this style. I don't need the search field on my page since I have it in Firefox. The very top bar (nav bar?) has been completely skinned with a background image and new fonts. The margins between the boxes have all been knocked down to optimize the space on the page. Also the margin between the lines of text in each content box was taken down drastically. Now I can happily fit more content on my iGoogle, even on a smaller screen.

If you want to take a look at my style and hack around on it, you can find it pasted below. Be forewarned, however, that it is broken in a lot of places - like full canvas mode. I just don't use the canvas mode, so I haven't bothered fixing that yet. Also, I am very much not a CSS pro. I write Python for a living. :-)

Cheers!

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

@-moz-document url-prefix("http://www.google.com/ig") {
    #col1, #nhdrwrap, #footerwrap{
      display: none !important;
    }
    body {
        background: #000000 url('http://seanstoops.s3.amazonaws.com/image_hosting/googlebar-gradient.gif') repeat-x !important;
        background-color: #000000 !important;
    }
    #gbar, #guser {
        background: transparent !important;
    }
    #gbar a, #gbar u, #gbar b, #guser a, #guser b {
        color: #999999 !important; 
        text-decoration: none !important;
    }
    #gbar a:hover, #gbar u:hover, #guser a:hover {
        color: #ffffff !important;
    }
    #modules {
        padding: 3px 0 0 0 !important;
    }
    .tablib_table {
        display: none !important;
    }
    .topbotborder {
        padding: 0px !important;
    }
    .modbox {
        margin-bottom: 3px !important;
        margin-left: 3px !important;
    }
    .yui-u {
        width: 33.2% !important;
    }
    .uftl {
        padding: 2px 0 !important;
    }
}

Posted by Sean Stoops on October 26, 2008

css, customization, igoogle, style, stylish