CODEWITHSUNDEEP
google-apps-script
user1682683
user1682683

Reputation: 293

CSS In HTML Services Template

I'm just getting started with GAS HTML services. I am having a bit of a problem figuring out where to put the CSS (I'm sure it is simple). Below is a simple code example. In it I am simply trying to set the background color. What would be the correct way to set this up and organize it?

//Code.gs
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

//index.html

<style>
body
{
background-color:#e5e6e8;
}
</style>

<html>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-    ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">    </script>
  <body>  
    <a href = "#" id = "index1" class = "Anchor">I am index1</a>
    <a href = "#" id = "index2" class = "Anchor">I am index2a</a>
<div id="div">1</div>


<script>$(document).ready(function() {
    $("#index1").click(function() {
       $("#div").append("2");
      $("#index1").hide();
    });
});</script>

 </body>  
</html>

Upvotes: 1

Views: 4576

Answers (2)

user1783229
user1783229

Reputation: 193

I found this way to do it somewhere (certainly not in google documentation): I have the .gs and the index.html which is pretty standard. Then I separated my css to a style.html within the same project and I put this code in the index.html to refer back to the style sheet: <?!= include('style'); ?>.

Then in the .gs I added this:

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .setSandboxMode(HtmlService.SandboxMode.NATIVE)
  .getContent();
}

Upvotes: 1

Waqar Ahmad
Waqar Ahmad

Reputation: 3732

Style tag should go inside HTML tag.

//index.html

<html>

<style>
body
{
background-color:#e5e6e8;
}
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-    ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">    </script>
  <body>  
    <a href = "#" id = "index1" class = "Anchor">I am index1</a>
    <a href = "#" id = "index2" class = "Anchor">I am index2a</a>
<div id="div">1</div>


<script>$(document).ready(function() {
    $("#index1").click(function() {
       $("#div").append("2");
      $("#index1").hide();
    });
});</script>

 </body>  
</html>

https://developers.google.com/apps-script/html_service

Upvotes: 1

Related Questions