I'm using google apps script for a google site, and i can easily create a transparent background by using
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.
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:
If you don't want the frame to show a border, uncheck "Include border around Apps Script gadget"
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>
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.
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.
©2020 All rights reserved.