Creating Google gadgets from your site with Dapper is a breeze. Dapp the site, choose “Google Gadget”, give it a name, and you’re pretty much done. However, in many cases our vanilla styles and design are not enough, and you’d like more power to conform the gadget’s look and feel to what users experience on your site. To achieve this, we’ve introduced a new advanced feature in the google gadget transformer pane, which allows you to define your own CSS styles and have them applied to your gadget.
Here are the steps:
1. First, checkout the gadget’s CSS template and read the instructions and class definitions.
2. Create a CSS file that uses the same class definitions (you don’t have to use them all) and have it available over the Web.
3. Insert the CSS file’s URL into the “URL of CSS file” field in the advanced options pane.
4. Get the resulting gadget url.
By default, the CSS file is cached by Google once an hour, which makes it problematic to tweak, change and develop the gadget. To disable the caching and have the gadget fetch the up to the second version of your CSS file, add the variable “&noCacheCSS=1″ to the end of your gadget url. Don’t forget to remove it or your file will be requested every time a google user views his iGoogle page containing your gadget.
Happy gadgeting, as you like it…