This is one article in a series of articles about Print Templates.
Print Templates can be styled using the standard HTML styling attributes. In this article we will include a few examples. For more in-depth HTML styling, we recommend you look at HTML-CSS styling examples on the Internet.
Styling
HTML tags can be styled by adding a style attribute to the tag. Take the header <h1></h1> tag as an example. If we want to add an underline under the header, we can do that.
<h1 style=’text-decoration: underline’>Customer</h1>
Adding styles directly to HTML tags is cumbersome and it makes it harder to read. A better option is to define the styles separately from the HTML tags. In the BookingCentral Print Templates, this is accomplished by adding a style tag at the top of the document.
<style>
h1 {text-decoration: underline;}
</style>
<h1>Customer</h1>
In the example above, we are modifying the style for the header tags. So every time we have a <h1></h1> header, it will add an underline under the text.
Classes
Modifying the style for a tag is great, but it won’t help us if we need different styles for the same tag. The division tag <div></div>, the span tag <span></span> and paragraph tag <p></p> are examples of tags where you almost always will end up with different styles.
Enter classes. A class is a way to make an association between styles and tags.
To define a class in our style section, we need to prefix with a period. Here we define a class named label
<style>
.label {box-sizing: border-box; font-size: .8em;color: #555555;padding-bottom: 3px;}
</style>
After defining the class, we can use it in our HTML by adding the class to the tag, e.g.
<div class=”label”>Customer Name</div>
A class can be used by multiple tags and a tag can include multiple classes, separated by space.
Here is the full HTML for our simple customer print.
<style>
h1 {text-decoration: underline}
.label {box-sizing: border-box; font-size: .8em;color: #555555;padding-bottom: 3px;}
</style>
<h1>Customer</h1>
<table>
<tr>
<td style="width: 33%;"><div class="label">Customer</div>${customer.name}</td>
<td style="width: 33%;"><div class="label">Phone</div>${customer.phone}</td>
<td style="width: 33%;"><div class="label">Email</div>${customer.email}</td>
</tr>
</table>
See related articles on Print Templates:
How to use conditional formatting in a print template
How to create a table in a print template