In this article, you will learn how to customize your template with markers. Thanks to markers you will be able to insert HTML and CSS very easily.
1. Use markers in your HTML template
You're now able to set up an HTML template for your Awesome Table app. However, the template you've created in the previous article is not (yet) very useful because it's not dynamic (not adapted for your data).
This is where the magic of {{markers}} comes in. It's really easy making your templates dynamic with {{markers}}. You need to paste the relevant column's header between "{{ }}". This way, all of the appropriate data associated with each {{marker}} will be extracted & displayed accordingly.
For instance, try this simple code in your template:
<p><strong>Movie : </strong>{{Movie}}</p>
Now try the code below (containing several markers) in your Movies directory template:
<p class="bold">{{Date of release}}</p>
<p class="bold">{{Category}}</p>
{{Film Poster}}
<br>
{{Movie}}
<br>
<br>
{{Rate}}
<br>
<br>
<b>Director:</b>
{{Director}}
<br>
<br>
{{Summary}}
<br>
<br>
<div class="button">{{IMDb card}}</div>
After pasting the code above in your template section (cell A2), you'll get a nice-looking card app like this:
2. Add CSS templates to your app
Now that you have a functional Awesome Table app, you will add some style to it using a CSS template.
In your template sheet (tab), add a new column labeled "<style>" (copy this verbatim) in cell B1. Then copy & paste the code below in your CSS template section (cell B2):
.bold {
font-weight: bold;
font-size:1em;
text-align:right;
}
.button {
text-align:center;
}
Your final Awesome Table app should look like this: