Not so long ago Google got with the mission and added a small set of skins to iGoogle so that you could choose a look that sort of appealed to you. Now the guys at BonstioNet have taken this 1000% further and created a directory of skins that allow you to choose from a (hopefully) fast growing selection of UGS (user generated skins).
Custom iGoogle Skins
The gadget features three main tabs; a skins directory which mimics the built-in iGoogle theme selector, a tab with details of how to create and upload skins and a skins submission form. Unlike many other gadgets, this one relies on a server side component to retrieve a list of available skins from the database in JSON format and also to validate and insert new skins submissions. Future version will replace the instructions with a built in skins editor which will modify the iGoogle CSS on the fly. This will make skin creation even easier. Custom iGoogle Skins also introduces a test mode. A gadget CSS skin can be specified via the gadget's settings pane and this enables developers to edit skins up until they are ready to be submitted to the directory.
Bonstio promise a built-in skin editor coming soon, but for the moment early adopters can build their own skins from CSS and images.
So you want to create your own iGoogle skin? There will soon be a built-in skin editor here but for now you'll have to create it yourself - but don't worry, there's not much to it! In fact it can take as little as 10 minutes to create your own. An iGoogle skin consists of a CSS file and some images. Here's what you need to do to create yours and share it with the world:
» Create your CSS and images
Feel free to use these examples. 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 80x25 pixels, named thumb.jpg and located in the the directory containing the skin images.» Upload to your webserver
The files which make up the skin need to be publicly accessible to work on iGoogle. If you don't have a web server of your own, you can always use Google Code hosting or Google Pages If you use Google Code hosting, remember to set the subversion MIME type of CSS files to text/css.» Test your skin
Use the test mode to make sure your skins looks the way you want it to. Edit the gadget settings and specify a CSS file. This will make the testing mode available on the directory tab. Edit your skin by re-uploading your CSS / image files until you're happy with their appearence.» Submit your skin
Fill out the details on the submit tab and hit the submit button. After about a 30 second delay (due to caching), your skin will be listed in the skin directory in this gadget. Job done.Need more help? Visit the forum. Want more great gadgets? Browse all gadgets available on BonstioNet.
Comments