A few days ago Google (big brother) approved my Office Mouse iGoogle Theme. Today I’m going to show you how to make a theme!

Why would I want to make a theme?

Well, because its fun! It’s also good exposure for designers and illustrators. Currently my theme has been out there for a few days and according to Google I have over 7,000 people using my theme! How sweet is that? OK, you are convinced right? Lets get started!

What are the magic ingredients of an iGoogle theme?

Basically its just a few images and an xml file. Take a look at a screen shot of the directory I’m storing the files in:

Breakdown of the files

attribution.jpg : A little image at the bottom of the page that says who made the theme.

space-mouse.xml : The guts of the theme. This file tells the theme when to change through out the day and what colors to make things. Kind of like a css file, only more finicky (in my experience) I’d show you a screen shot, but its just boring!

spacemouse1-5.jpg : These are the illustrations i created for the theme.

screenshot.jpg : A bigger screen shot of the theme.

thumbnail.jpg : Self explanatory, the thumbnail preview!

tile.jpg : most themes have a tiled background image – this image is a slice of the sky background.

Pretty simple right?

Where to start?

Lets check out google’s guidelines – because my theme didn’t get in before when my design was 1-2 pixels off the size requirements. The guidelines for the header image are as follows: Width: 640px-no maximum, Height: 175 px fixed. Google sticks its search box and logo smack in the middle of the page so we have to design around that.

So lets create some images!

Ok, hopefully you just pushed the “make awesome illustration button” in illustrator right? Sweet! So here are the illustrations:

All of my center illustrations are 960px x 175px

The background tile is 104px x 175px. I tried to select a chunk of the background that had a good smattering of stars.

Next we crop a screen shot (680px x 116px) and a thumbnail (410px x 70px)  for the preview pages.

After creating the images we select part of the image and take a skinny slice out of it to make our tiling background image.

Now lets make an attribution image.

Sweet! Ok, all done with the designy part of the theme.

Uploading the images and Tinkering with the XML file

Now that we have our sweet design done we need to upload them to webspace. My files are located here http://nikibrown.com/igoogle/space-mouse/ if you need to refrence anything.

First of all – download my xml file because we will me making changes from that.

Now lets tinker with the XML file. Replace the dummy info with yours.

< ?xml version="1.0" encoding="UTF-8" ?>

<configmaps>
<configmap type="Skin">
<meta name="title"><strong>Title Name</strong></meta>
<meta name="description"><strong>Description of Theme</strong></meta>
<meta name="author"><strong>Your Name</strong></meta>
<meta name="author_email"><strong>Your@emailaddress.com</strong></meta>
<meta name="thumbnail"><strong>http://url-to-your-thumbmail.com/thumb.jpg</strong></meta>
<meta name="screenshot"><strong>http://url-to-your-screenshot/screen.jpg</strong></meta>
</configmap>

Next we insert image url’s and pick out pretty colors for the different time zones through out the day.

<configmap type="Skin">
<trait name="TimeOfDay"><strong>9pm-12am</strong></trait>
<attribute name="header.background_color"><strong>teal</strong></attribute>
<attribute name="header.logo"><strong>Black</strong></attribute>
<attribute name="header.tile_image.url"><strong>http://img-url.com/tile.jpg</strong></attribute>
<attribute name="header.center_image.url"><strong>http://img-url.com/image1.jpg</strong></attribute>
<attribute name="header.link_color"><strong>#ffffff</strong></attribute>
<attribute name="header.text_color"><strong>#ffffff</strong></attribute>
<attribute name="gadget_area.gadget.body.link_color"><strong>#8B4513</strong></attribute>
<attribute name="gadget_area.tab.unselected.text_color"><strong>gray</strong></attribute>
<attribute name="header.logo"><strong>white</strong></attribute>
<attribute name="footer.background_color"><strong>#ffffff</strong></attribute>
<attribute name="footer.link_color"><strong>#666666</strong></attribute>
<attribute name="footer.text_color"><strong>#66666</strong>6</attribute>
<attribute name="attribution.image.url"><strong>http://img-url.com/attribution.jpg</strong></attribute>
</configmap>

I duplicated this last “configmap” section to have several hour spans where the image changes to complete the 25 hours cycle. Check out my xml file if you have any questions.

Testing Your Theme

To test your theme you add http://www.google.com/ig?skin= to the beginning of your xml file. So to test my space mouse theme you would go to this address  http://www.google.com/ig?skin=http://nikibrown.com/igoogle/space-mouse/space-mouse.xml (you have to be signed into igoogle first).

Submitting Your Theme

To submit your theme you need to have your xml file in the same directory as all your files. Go to the igoogle theme submission page and paste in the url of your xml file! Google says it can take 2-3 weeks for your submission to show up. Mine showed up in a few days. They dont seem to notify you if your submissions is accepted or rejected to check the new themes page every once in a while.

So thats it!

Hopefully this has bee helpful to whoever reads this. Let me know if you have any questions!