Templates are pivotal to the entire look and feel of your site. Using templates, you are able to implement powerful, site-wide changes with the click of a mouse.

During the course of this tutorial, you will come to understand the importance of the role that templates play in the creation of a website. You will also become familiar with basic template editing.

Understanding Templates

Throughout your Online Business, there are many types of templates you can use, such as:

• Site-Wide templates - The default template that represents the general look and feel of your site. This template is usually applied to your web pages and other content.
• Site-Wide Print templates - The Printer View template is used when generating the output for a printable page. It can contain functionality modules, but should be graphically simple and hence easy to print out.
• Device specific templates - The templates that can be used when a customer is viewing the site on a device such as a smartphone or tablet.
• System Email templates - The email template is the template you apply to your outbound system emails. These emails can be found in the admin under Admin > Customize System Emails. It should be simple and light on the HTML and no modules can be used in an email template.

Apart from saving time, Templates are used for two key reasons

• To maintain consistent branding across all pages
• To manage your sites overall look and feel in one, central place making a change to the template affects all pages that use that template.

Creating and Editing a Template

Creating a Template in the Admin

Creating a template is easy – you can create a basic template in a few simple steps. As with many items in the system, creating a template consists of:

• Enter the details of the template
• Create the template's content

Firstly to add the details of the template, we do the following.

• 1. Click Admin -> Manage Site-Wide Templates -> Create A New Template

• 2. Enter in a descriptive Template Name for your template. If this template is the site's main template for your web pages, check Default Template. If this template is to be used as the printer template for wrapping content before printing (via the Printer View module), check Printer View.

• 3. Clicking Show More Options allows you to:
  • a. Upload a template file you have prepared previously
  • b. Download the template file you have in the system already
  • c. Enter a Template Description
  • d. Assign a Workflow Approval to this template. By assigning a workflow approval to this template you ensure that you or the people you designate are notified to approve the changes before they go live.

• 4. Click Save to create a working copy, or click Save & Publish to make your new template usable and viewable to the public.

Secondly, we enter the content of our template. Notice the {tag_pagecontent} tag. This is where your page content will be inserted into the template.

Now we are ready to create the basic layout for the template including the insertion of images and modules.

Click the Preview in new browser button to get an idea how your new template looks.

Uploading your own template

If you have created your template externally and you want to upload it you can quite easily do that trough the Admin interface, FTP or the Dreamweaver extension. All you have to do is go to Admin -> Manage Site-wide template -> Create a new template -> give your template a name and save it. Now you can upload a template using one of the below methods. Please note that you will still have to include {tag_pagecontent} into your template as that tag renders the content of your web pages.

Uploading a Template from the Admin

Click on Template details -> Show more options and then click the upload button and select your template.

Uploading a Template using FTP

To upload your template using FTP, you will first need to connect to your site using an FTP client. Once you have done this, navigate to the templates folder. Within this folder, you will see all the current site-wide templates on your site.

Simply download the template you would like to use, customize the content of the file and re-upload this file to the same folder. Ensure you do not change the file name as this will not update the existing template.

Uploading a template using the Dreamweaver extension

You will first need to connect to your site using the Dreamweaver extension. Once you have done this, similar to the FTP method above, navigate to the Templates folder in the FTP directory. Within this folder, you will see all the current site-wide templates on your site. Open the template you would like to edit, make the necessary changes and then save the file.

Editing a Template

To edit a template can be done in the same method as uploading a template mentioned above. You can either login to the Admin, connect via FTP or the Dreamweaver extension.

Deleting a Template

To delete a template simply go to Admin -> Manage Site-wide templates -> click the name of the template you want to delete and click delete button.

Creating mobile and tablet friendly templates

You may want to create device specific templates such as mobile and tablet templates. These device specific site-wide templates give you full control over the way your site renders on a growing range of devices.

To do this, you will first need to enable this option for your templates. Login to the Admin of your site and go to Admin > Manage Site-Wide Templates. On this page, you will see the checkbox to Enable tablet & phone support (multiscreen), check this option and click Save.

Now that you have enabled tablet and phone support for your templates, when you create or open one of your existing site wide templates you will see three options at the top right of the template content area:

Select the device specific template you would like to update and edit the content:

• Desktop Content - This is the default version of the template that is used for all standard desktop web browsers. It is also used by default for phone and tablets if you do not specify any content for these device specific templates.
• Tablet Content - This template is used when the customer views the website in a tablet device. Leave blank if you want to use the default desktop content
• Phone Content - This template is used when the customer views the website in a mobile browser. Leave blank if you want to use the default desktop content

Accessing mobile and tablet templates via FTP

To access mobile and tablet templates within FTP, you will first need to connect to your site using an FTP client. Once you have done this, navigate to the templates folder. Within this folder, you will see three versions of all the current site-wide templates on your site in the below format:

• /Templates/template-name.html
• /Templates/template-name_tablet.html
• /Templates/template-name_phone.html

The file with _tablet appended reflects the tablet version of this template and the file with _phone appended reflects the phone version of the template.

To edit one of these templates, simply download the relevant file, make the necessary changes and re-upload this file with the same file name. Note: You must ensure you have the {tag_pagecontent} tag available in the template as this determines where your page content will be inserted into the template.

Using {tag_pagetitle} to create a dynamic page title

This box allows users to specify the title of their web page much more easily than having to set it in the actual web page via the <title> element.

Ballina Website Design

So going forward this is the rendering process in respect to the page title:

1. If the user specifies page title using the page title box in Show More Options this takes precedence
2. If no page title is specified in (1) but a page title is found in the page HTML (traditional page title set through Page Properties) this now takes precedence
3. Finally, if no page title is found then we will use the page name

In some cases, there are instances where you may want to keep the template title and to merge the template title with that of the web page.

To do so simply specify {tag_pagetitle} in the template title e.g. <title>{ tag_pagetitle} - Company Name</title>

So if we see this tag we then merge, otherwise we ignore the template title altogether.

Ballina Website Design This effectively allows you to achieve titles like: "Page Title - Company Name" where company name is only entered once in the template.