Start Free Trial
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.

Keep your school displays interesting - pick new templates every week!

Every week, we send Template recommendations that will make you look great and improve your student's experience. And the best part, they save up to 16 hours of content creation time every week.

Not convinced? Check out the email we sent last week.