You can customize the style of your Awesome Table apps. This article explains how to insert CSS code from your spreadsheet to specify predefined colors, sizes, fonts, and backgrounds.
2
What are CSS templates?
Cascading style sheet (CSS) templates contain the styling code that gives your Awesome Table app its desired look and layout. CSS allows you to customize colors, font, size, and placement of elements (headings, paragraphs, images, and lists).
CSS template
- Data-related static CSS goes in the CSS template.
- Filters and global Awesome Table styling goes in the custom CSS file uploaded to any online host like Google Sites, Weebly, GitHub (but not Google Drive).
This lets you make two separate CSS: one for HTML and data-specific content and another for the Awesome Table theme (background color, slider, and filters).
Live example
Create and set up your CSS template
Create the template sheet
1. Click the Add Sheet button to insert a blank sheet.
1. Click the New sheet button to insert a blank sheet.
2. Rename the new sheet. In our example, we named it Template.
Set up the CSS template
Add a new column for the CSS template (label the header <style>).
CSS template
Then paste the CSS code below (cell B2 in our example).
.typeimg { width: 45px; height: 45px; float: left; } .title a { color: teal; font-size: 20px; font-weight: bold; text-decoration: none; margin-left: 0px; line-height: 25px; } .owner { line-height: 20px; color: black; } .description { font-family: "arial", sans-serif; text-align: justify; font-size: 13px; } .myStatus { float: right; margin-top: 5px; margin-bottom: 10px; } .myContainer { padding: 5px; max-width: 500px; margin-top: -10px; margin-bottom: 5px; }
The CSS code example above works with the associated HTML code. To continue with our demonstration, replace the existing HTML code we used in the previous tutorial with the one below:
<div class="myContainer "> <br> <div class="myStatus"> Deadline: <b>{{Deadline}}</b> <br> Status: <span class="status" data-status="{{Status}}">
<b>{{Status}}</b> </span> </div>
<div class="title"> <img class="typeimg" src="{{Image}}" /> </div>
<div style="vertical-align:middle;"> <div class="title"><a href="{{FileLink}}" target="_blank">{{Title}}</a>
<div> <div class="owner">Owner: <b>{{Owner}}</b> </div> </div> </div> <br> <hr> <br> <b>Summary</b>: <br> <div class="description"> {{Description}} <br><br> File Type: <b>{{Type}}</b> ▏Size: <b>{{File Size}}</b>
▏Folder: <b>{{Folder}}</b>
</div> </div>