Google App Script background transparent with HtmlService

Question

I'm using google apps script for a google site, and i can easily create a transparent background by using UiApp.createApplication().setStyleAttribute("background","transparent").

Now, I'm trying to create the script using HtmlService.createHtmlOutput(), but i can't figure out how to make the app's background transparent.

any ideas?

Answer 1

If your Site background is a Theme, I can't find a way to match the Apps Script Gadget background to the theme. But if the Site background is a solid color, there is a way to match the Gadget with HTML Service to the Site color.

You must set the background color of your HTML service to the same color as your Sites page. The HTML Service background color is already set to transparent. That is the default. The Sites frame that your Apps Script code is in, has a background color of white. I can't find a way to change that. Your Apps Script HTML Service has a transparent background by default, because HTML has a background of transparent by default. Here is a detailed explanation of what you must do to get the Apps Script Gadget to be the same color as your Site:

Remove the Border In Sites Apps Script Frame

If you don't want the frame to show a border, uncheck "Include border around Apps Script gadget"

How To Write the HTML Markup

The HTML in your main Apps Script HTML Service file must look like this:

<section style="background:gray; height:100vh">
<div>
  Some Text Here
</div>
</section>

Set the background to the same color as the color in your Site. Use a <section> tag and set the height to height:100vh. This insures that the entire frame will be filled with the background color. Everything needs to be wrapped in that <section> tag with the background set to the same color as your Site, and the height set to 100 percent of vertical. (100vh)

Here is an image showing the background of the Apps Script Gadget set to gray, and the Site set to blue, in order to show you what the end result will be. If I had set the background of the Apps Script Gadget to blue, you would see no indication of were the Apps Script began or ended.

If your Site has a Theme, the Background color will be set to Theme. So you may need to experiment with colors to get one that matches the Theme. If the Site background color is manually set in the Themes, Colors, and Fonts section of the Manage Site page, you can use the color picker to get a hex value of what the color setting is.

NOTE:

There is a way to set the background color of gadgets:

But the HTML Service overrides it. If you set the Gadget Background color, when the page loads, you will first see the background color you set in the Manage Site page, then the color will change to the background color of the HTML. I tried setting the HTML Service background to transparent, and the gadget to a color, but that didn't work.