Tutorial 1.6: Editing Site Templates

From Online Business Wiki

Previous topic: Tutorial 1.5: Creating a Secure Zone

Next topic: Tutorial 1.7: Managing my site using the file manager, FTP and Triangle

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.

Detailed Tutorial

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.

Site template - 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.
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.
Email templates - The Email template is the template you apply to your outbound system emails. It should be simple and light on the HTML. No functionality modules can be used in an email template.
Web App templates - The Web Apps template wraps around your web app items.

We most commonly refer to "Website templates" when we talk about templates.

You can create all the various template types in Triangle. You can set a template to be default or printer view by selecting the appropriate checkbox. Email templates are templates you use with your email newsletter campaigns there is no mechanism to designate a template as an email template.

A template is a web page fragment that allows you to re-use content elements across your web pages. Templates save a significant amounts of time, allowing you to avoid repetitive copying of common elements like page headers and banners, footers and navigation menus on every page. A template is designed to wrap around page content, thereby making each page take on a consistent appearance.

Why use a 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.

Editing the Site Builder Templates

Editing a pre-existing template is relatively easy. Using one of the Site Builder templates as an example, we'll learn how to make some small edits. In this example, we'll start with a generic Site Builder template as seen below.

To open the template, go to Admin -> Manage Site-Wide Templates.
Select the Main Template. You will be taken to the WYSIWYG editor, where you can make your changes.
Right click the image and select Image Properties. You will be presented with the Image Properties screen.
Click the ... in the Image Src field to change the image

Using the File Manager, you can both Upload and select a new image. Press Insert and Ok once you have done so.
You should see your new image appear in place of the old one. Press Save and Publish, then go to your live site to view the differences. Note that the image has changed on every page that the template is applied to.

Using Modules in Templates

Modules are powerful additions to templates; with the click of a button, you can add a login box, [[[shopping cart]] summary, site search or other such item to your entire site. Let's add a site search box, now.

Open the template again in the WYSIWYG editor via Admin -> Edit Site-Wide Templates.
Open the Module Manager by pressing the blue icon with the white plus symbol.
Select Site Search -> Search Engine Box.
Configure your Search Box as per the options available, position the cursor where you'd like the box to appear and click Insert. (Note: You will need to set up a Site-Wide search beforehand)
Save and publish, and your new search box will be visible on your site!