> > Working with templates

Working with templates

How to use templates to customise your site

The other pages in this website explain how you can use Content Curator to store and display the content for your website.

It is likely that the design and structure for displaying this content have been set up for you during the initial technical development of your site. But what if you'd like to go a step further, and make amendments to how content is displayed? This section explains how, using Content Curator's system of templates.

NOTE: The guidelines in this section presuppose a good working knowledge of the principles of HTML. However, you don't have to be a programmer to understand templates!

What are templates?

In general, templates are the visual framework in which your website content is displayed. A good metaphor is to see the templates as the house; the content is everything you put inside it.

There are two different parts of the templating system to understand, static HTML templates stored as 'flat' files in a directory on the server and dynamic templates administered through Content Curator.

Top

HTML templates

To continue with the house analogy, the static HTML templates are the exterior walls and roof. These don't generally change, and provide the basic, external impression for visitors.

Each page created in Content Curator includes a reference to an HTML template. Like any other HTML page, this provides the structure for how your information is displayed. It incudes an HTML 'head' and 'body', and references CSS stylesheets which determine the site's design.

The only main difference to normal 'flat' HTML pages is that, instead of containing text and image links etc, it includes tags for content blocks (these correspond to the three 'Blocks': A, B and C' at the top of the Content Curator's admin area.) Thus, whereas 'flat' HTML pages would have to be duplicated for each new page on your website, a single HTML template might be used to display all of your site's pages.

Your website might have one, or several HTML templates, depending on the design and layout needs.

HTML template files are saved in the following directory on the server which hosts your installation of Content Curator (NOTE: the text in capitals will vary from one website to the next):

CONTENT_CURATOR_DIRECTORY/domains/YOUR_WEBSITE_NAME/local/templates/

NOTE: HTML template files are saved with the '.tpl' file extension, instead of '.html' or '.htm'.

Top

Where do I select the static HTML template for a page?

In:

> admin area > navigation > location setup > Configuration > HTML template

Top

Why would I want to edit static HTML templates?

If you're reading this text at all, you have probably discovered a desire to make some amendments to your site's basic layout.

You might want to edit the static HTML templates in order to alter the basic layout of your site, or to set up a new kind of page, with different layout principles.

For example, your site might have been initially designed with a wide left-hand content area and a narrow right-hand column. You might now want to create a new kind of page without the right hand column, using the full width of the page (in which case you would create a new template to be used on a case-for-case basis). Alternatively, you might want to make a universal change to the template which your site's pages are already using.

NOTE: whatever you have in mind, it is highly advisable to duplicate an existing template and make changes on the duplicated version first. If you alter a template which your site's pages are already using, any changes you make (including any interim steps) will be immediately visible to your site's visitors.

Top

How do I edit static HTML templates?

Static HTML templates
Static HTML templates

Editing static HTML templates is no more difficult that editing a normal HTML page on a website. Here's how you do it:

NOTE: for FTP and code editing software tips, see our Resources section.

  1. Log into the server which hosts your installation of Content Curator via FTP. NOTE: You will need FTP access details for the server in order to do this).
  2. Find the following directory: (NOTE: The text in capitals will vary from one website to the next): CONTENT_CURATOR_DIRECTORY/domains/YOUR_WEBSITE_NAME/local/templates/
    This directory will contain one or more files with the file extension '.tpl'. These are the static HTML template files.
  3. Whether you want to amend a static HTML template file or create a new one, download the desired file to your local computer (this will either be the template you want to edit, or will be duplicated to form the basis of your new HTML template file).
  4. Suggested procedure: rename the file you have just downloaded. (Even if you just want to amend an existing template file, this is a good idea, as it allows you to make changes to a test file without immediately having an impact on all of the pages of your website that are currently using the template in question). NOTE: Don't use spaces or capitals in the file name.
  5. Make the desired changes. (NOTE: There is more in-depth information on template tags etc below).
  6. Upload the new file into the same directory on your server from which you downloaded the HTML template.
  7. Log into Content Curator and create a test page (or find a test page which you have already set up). It is advisable to use a page which is not visible to the users of your website.
  8. Go to the 'location setup' tab of your test page and find the 'HTML template field': > admin area > navigation > location setup > Configuration > HTML template
  9. Select the new HTML template file you have created and just uploaded (if it doesn't appear in the list, try refreshing the page), then save the page in Content Curator, using one of the 'save changes' buttons.
  10. View the test page on your public website, then make further changes to the template using the method described above if necessary (NOTE: you don't have to keep on creating new template files now - just make changes to the one you have just created and upload them).
  11. If you want to create a new template file: once you are happy with the way your template looks, you can either simply use this as a new template file for pages in Content Curator from now on.
    If you want to amend an existing template file: you can either copy all of the content of your new template file into the original template file (to do this: download the original file, make the necessary changes and upload the file again without renaming it), or you can use your FTP programme to rename your template files on the server (to do this: select the original template file on the server, e.g. 'filename.tpl', give it a new name - e.g. 'filename_backupMMDDYY.tpl', then rename the new file you have created with the original file's name, e.g. 'filename.tpl').

REMEMBER: When working with files, ALWAYS err on the side of caution. Make backups, and make changes step for step, keeping a clear overview of what amendments you have made.

Top

Static HTML templates, syntax

Static HTML templates essentially have the same structure and syntax as normal HTML files, with the following exceptions:

  • They are saved with the '.tpl' file extension rather than '.html' or '.htm'.
  • They include Content Curator tags (see below for more information).
Top

Dynamic templates

If the HTML templates are the basic structure of your house, the dynamic templates are the doors and windows: they can be used differently in different contexts to affect how your visitors experience your site. OK, enough of the philosophy! - now for the technical explanation.

Dynamic templates are used to present all of the content which you administer through the 'Blocks' of the admin area. Each content type (e.g. 'article' has a group of dynamic templates which determine how the content is displayed).

The following workflow illustrates the role of dynamic templates:

  1. You create a new page.
  2. You select a content type for Block A (e.g. 'article').
  3. You enter the desired text and image, then save the page.
  4. You view the page on your 'public website'.
  5. Content Curator looks up the information stored for your page. It presents the HTML template you have chosen (often, this will be the default template, so don't worry if you haven't actively chosen one), and within this basic template, looks for the content for each of the three Blocks.
  6. Content Curator sees that Block A has been set to 'article'. It looks up the dynamic templates for the 'article' content type, and displays the content accordingly. In the case of the 'article' content type, this generally means displaying the article header, the article navigation (if more than one article page is present) , and the image associated with the article page currently being displayed).

Different dynamic templates can be used for different devices (e.g. 'web' for normal computers, or 'mobile' for phones and PDAs), as well as for different languages. The latter is especially important for content types which present commands such as 'next', 'back' etc, as these should be presented in the correct language for the target audience.

Whereas the HTML templates are stored as 'flat' TPL files in a directory on the server which hosts your installation of Content Curator, dynamic templates are stored in Content Curator itself (they are stored in the same MySQL database which holds the rest of the content for your website).

Top

Why would I want to edit dynamic templates?

You might want to edit dynamic templates for one of the following reasons:

  • To make some tweaks on how a particular content type is displayed (e.g. in order to position the title of an article below the article's image rather than above it).
  • To create an alternative language version of your site.
  • To create a new content type, with new dynamic templates. (NOTE: if you want to create a variation on an existing content type, you can duplicate content types).
Top

How do I edit dynamic templates?

Dynamic templates
Dynamic templates

Whereas the HTML templates are stored as 'flat' TPL files in a directory on the server which hosts your installation of Content Curator, dynamic templates are stored in Content Curator itself.

The following steps describe the most straightforward way to edit the templates for an existing content type. For the purposes of this example, we will assume that you are editing the templates for the 'FAQ' content type (frequently asked questions):

  1. Go to > admin > behaviours
  2. Select 'faq' from the 'behaviours' content pane.
  3. Having clicked on 'faq', you will see various content panes for the 'FAQ' content type in the main part of the screen (mostly collapsed). Click on 'Configuration', and the pane will expand, showing links to various templates.
  4. (This is the difficult bit!) Most content types use not one, but several templates for both the initial 'listing' view (where you are presented with a list of content to chose from) and the 'detail' view (where you are presented with the selected content in greater depth). Both the listing and the detail templates each also have a 'header' and 'footer' which appear above and below both the listing content and the detail content. Sounds complicated? This will make it easier to understand:
  5. Look at the page you are currently reading. At the top, you will see a list of frequently asked questions (this is where the 'faq' behaviour starts). This list is generated using the 'faqs listing' template. The block of text you are currently reading is generated using the 'faqs detail' template.
  6. In the admin area, click on 'Edit the 'faqs listing' template', and you will see the dynamic template code that generates the list of questions at the top of the 'FAQs' content type. (Essentially it is little more than an HTML 'li' list item, with the content included dynamically using various Content Curator tags). The opening 'ul' to start the unordered list and the closing 'ul' to finish it are provided by the 'faqs listing header' and 'faqs listing footer' respectively.
  7. You can edit any of the templates by making changes directly in the Content Curator admin area (i.e. in the very content panes you are looking at in order to view the templates).

SUGGESTION: Try making a small change first and observing the results before embarking on more ambitious amendments.

Top

What are Content Curator tags?

Content Curator tags display dynamic content, generated by Content Curator. They can be used in static HTML templates and in dynamic templates to display content such as navigation(s), the three main content blocks available, the page title etc.

Including a valid tag in either a static HTML template or a dynamic template will result in the corresponding automatically generated content (e.g. the navigation) being displayed instead of the tag. (NOTE: some tags only function in certain contexts).

NOTE: all tags appear in capitals, and are wrapped in 'curly' brackets like this: {{EXAMPLE_TAG}}.

NOTE: You can use Magic Comments to make a tag only processed by Content Curator if the tag would return any content. It works like this:

<!--FOO|{{FOO}}|FOO-->

In this instance, the FOO tag would only be displayed if it returns any content in this context. In practice, this mechanism could be used to only display a given block of content if a user is logged in, or to only display an image for a given block of content if the image field is filled out in Content Curator.

Here are some examples of tags:

  • {{CONTENT0}}: Content from Content1 tab.
  • {{CONTENT1}}: Content from Content1 tab.
  • {{CONTENT2}}: Content from Content1 tab.
  • {{FULLTITLEPAGE}}: The contents of the 'title_full' field.
  • {{MAINNAV}}: Puts in the normal nav menu, i.e. a nested list of links to locations, collapsed by default, expanded to the current location and showing its children.
  • {{DESCRIPTION}}: The contents of the 'description' field.

For a list of common tags, please see the Content Curator tags page in the Glossary section.

Top

Comments

Add a comment

Comments are moderated, and will not appear immediately.

Your e-mail address will not be revealed to the public.
HTML is forbidden, but line-breaks will be retained.
This can be a URL of an image or a YouTube, MySpaceTV or a Flickr page (we'll handle the media embedding from there!)
This is to prevent automatic submissions.