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.