Rise Vision Blog

Product News, Customer Stories and Updates from Rise Vision

Developer Tips & Tricks - Supporting Transparency in a Gadget

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.

Get started with Rise Vision

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.

Weekly Newsletter

Join 25,000+ members of the Rise Vision Community. Sign up to receive Rise Vision’s latest news and stories straight to your inbox every week.