It's been awhile since I've posted, but I have good excuses! In the last 3 months I got married, went on my honeymoon, and then moved to Zurich.

I've been meaning to try out the iGoogle Themes API so I used my new home as an excuse to finally do it. Nothing fancy, I just wanted to change the top header image and leave everything else the same -- pretty straightforward, but I did encounter a few hiccups. (Btw, there's also the iGoogle Theme Creator if you don't feel like fiddling with XML.)

The first step was to find a panoramic image of Zurich that's available for reuse. I used Google's advanced image search page, selecting the "labeled for reuse with modification" under "Usage Rights". Searching for [zurich night panorama] found this amazing photo, shared under Creative Commons license by Paul Stocker (paalia).

The next step was to create the XML file that represents the theme. It's made up of two ConfigMaps, one for meta information and one for attributes:

<ConfigMaps>
  <ConfigMap>
    <Meta name="title">Zurich Panorama</Meta>
    <Meta name="description">Insert description ...</Meta>
    <Meta name="author">Tom Stocky</Meta>
    <Meta name="author_email">tom@...</Meta>
    <Meta name="thumbnail">
      http://www.tomstocky.com/gadgets/zurich_panorama_t.jpg
    </Meta>
    <Meta name="screenshot">
      http://www.tomstocky.com/gadgets/zurich_panorama_s.jpg
    </Meta>
  </ConfigMap>
  <ConfigMap>
    <Attribute name="header.center_image.url">
      http://www.tomstocky.com/gadgets/zurich_panorama.jpg
    </Meta>
  </ConfigMap>
</ConfigMaps>

The header.center_image should be 175px in height, while the width can be as much as you want -- iGoogle will automatically crop the width based on the user's window size. An important constraint is that this image has to be less than 40kB.

The thumbnail image is what appears in the search results of the theme directory and should be 410x70. The screenshot is what appears on the details page and should be 680x116.

Once you have your XML file hosted somewhere, you can test it by going to http://www.google.com/ig and adding "?skin=http://www.example.com/yourtheme.xml" to the end of the query string. When I tested my theme, the logo and header text didn't look great with the image, so I added a few more attributes:

    <Attribute name="header.logo">white</Meta>
    <Attribute name="header.link_color">#eeeeee</Meta>
    <Attribute name="header.text_color">#bbbbbb</Meta>

After that, I submitted my theme to the directory and a few days later it showed up. Now that it's there, you can add it to your page if you want: