When creating a digital signage Gadget, more often than not you will want to have it be transparent so that any content that might appear beneath it (for example, a background image), will still be visible. Fortunately, this is very easy to do.
In your CSS for the Gadget, add the following:
body { background-color: transparent; }
This will make your entire Gadget transparent.
To illustrate, here is what our open source digital signage RSS Gadget would look like without transparency:
Notice the white box around the Gadget.
Now, here's the same Gadget after making the background transparent:
If your Gadget has its own background color setting, then you would override transparency in the code if a background color has been selected:
document.body.style.background = new gadgets.Prefs().getString("backgroundColor");
If you have an alternate way of adding support for transparency, please be sure to let us know by leaving a comment or posting it in our forum.
