Adorable iGoogle Theme

iGoogle (http://www.google.com/ig) just launched a new feature, “Select Theme”! (http://googleblog.blogspot.com/2007/03/personality-goes-long-way.html)

But google wasn’t just catching up with yahoo with all the fancy color/font, etc. It is css alright, but it is dynamic. The background and the entire color scheme of the page changes throughout of the day. From sunrise to sunset, moon rise to moon set. The header background changes, and as the header image gets darker or brighter, the rest of the page’s color changes with it.

It is such a simple idea in css. Yet, no one has done it until now.

What’s more, in addition to check for your local time, igoogle skin also checks for your local weather! Too bad the bay area is always sunny nowadays.

Isn’t that strange? Because i want to satiate my desire to see a stormy header image, I’m now wishing for rain… or maybe i can trick igoogle to think i’m in, say, Chicago?

Out of curiosity, armed with firebug, i checked out the actual css. One of the bloggers commented that this seems to go against normal Google design. Colorful photos means more bandwidth/machine resource. Turned out the images were very light weight. Take cityscape for example, the header was a tile that kept on repeating in an outer <div>, and then there is a small gif positioning sun/moon/bicycle on top of the tile in an inner <div>. the gif doesn’t repeat. So simple! yet, so brilliant!

Of course all the geo location/weather checking happens on server side, whenever the page is called. Not sure how google did it, there is really no need for fancy AJAX. A simple php script will do, in onload(), just calculate current time based on the zip code user has selected, and do a document.write to insert the correct css file name. Whoever designed all this is truly a genius. 🙂

Use Gui’s words, they don’t need to bother with weather checking for the bay area. 🙂 there you go, another chunk of bandwidth saved.

I stole the tile and gif from their various css files, and built the following test page. Next step is to write that simple onload script to insert the correct css on the server. 🙂 Exciting!