How-to Create Custom iGoogle Themes

iGoogle (formerly Google Personalized Homepage) is a customizable homepage originally launched in May 2005. Updates include the capability to add web feeds and Google Gadgets (similar to those available on Google Desktop). Recently they

To get started using with Custom iGoogle Themes first of all install the custom iGoogle skin module and click the “Add to Google” button - this will add it to your iGoogle Homepage. Note you must have a Google account and be signed in for this to function correctly - you can signup or sign-in from the Google Account page.

Now that you have the module added to your homepage you can select different themes to make your homepage look the way you want but first you must enable inline modules. You will recieve this message

Module requires inlining. Inline modules can alter other parts of the page, and could give its author access to information including your Google cookies and preference settings for other modules. Click OK if you trust this module’s author or delete to remove this module.

this is a trustworthy plugin so you can click OK. After you have the plugin you can select different themes from the directory that you would like to display.

To make your own theme fire up your favorite image editing program and start designing what you want your theme to look like. I just took a screenshot of my homepage and designed over top of it to get an idea of where things were located. The Firefox Web Developer add-on is a huge help with figuring out what parts of the skin are named. After you install it go to “Information” and then “Display Element Information” or simply “Ctrl+Shift+F” and hover over the part of the page you want to view and click.

Skins consist of 2 things, images and a CSS file. You can use these examples to get a feel of what the skin structure is. The images should be located in a directory whose name matches the CSS file. You can also add a thumbnail of your skins so that other users can see what your skin will look like. The thumbnail should be 80×25 pixels, named thumb.jpg and located in the same directory as your CSS file.

The main IDs you will be working with in the skin CSS file are:

• #regular_logo - Your custom iGoogle logo
• #nhdrwrap - The wrapper that contains everything in the header, search box logo etc.
• #modules - The main part of the page with your modules etc.
• #footerwrap - The footer.

After you have everything set up and are ready to start testing it, upload your theme to a publicly available folder on a server somewhere(if you would like somewhere to host your theme let us know) and once that is done go to the skin module on your home page and click the down arrow next to the minimize and close buttons at the top of the module. Click “Edit settings” and you will see some options. The only one we are concerned with here is the “CSS file of test skin”. Simply type in where you uploaded your CSS file for your skin (for ex. http://myserver.com/my_theme/my_theme.css) and click save.

Now click the directory tab in the skin module and now you will see a “Testing mode” skin in your list. Click that and if all went well you should see your new skin. To edit your skin just edit your CSS file/images locally and re-upload to your server.

To submit your theme, go to the Submit tab within the widget and follow the instructions.

Check out my iGoogle Canada Theme for a direct example.