Templates

In Navigate CMS, all pages in a website need a template to determine how they must be displayed. A Template defines one type of page structure — the main menu here, the logo there, how many content sections are, etc.

If you have a theme installed in your website you surely have some templates. You cannot modify theme templates with this function. If you need to change the code of a certain template you'll have to edit its source code file. If you can't modify a theme template, what's this function for, then?

≈ Get information on a specific type of template (file location, sections and properties it supports, etc.)

≈ Create and modify your own templates

You may want to create a new template when the theme templates is missing a feature you want to use, or you just don't need a theme and want to build your website from the ground using just Navigate CMS tools. Later in this chapter we'll describe the steps to create a custom template for a theme.

Fortunately, Navigate CMS is very flexible on theme options and configuration settings, so theme creators can add a fair amount of customization to its works very easily. We believe that users shouldn't need to modify any source code of a template or stylesheet.

Templates function has two views: List and Form.

List

The first view of the Templates function displays a full list of templates available: active theme templates and custom templates.

List columns:

• ID — numerical identifier for custom templates or code name for theme templates
• Title — name of the template; if the template belongs to a theme, its name is added as a prefix.
• Theme — title of the theme to which belongs the template
• Permission — status of the template: published, private (only visible for Navigate CMS users), hidden to everybody
• Enabled — the template can be used to display website pages

Double click on a row to load the form for that template. If you try to edit a theme template, a "Read only mode" warning will appear and you won't be able to modify any field.

As with other lists in Navigate CMS:

• Click on a row to select/unselect it
  
• Double click or do a long press on a row to load the edit form
• Ctrl + Double click on a row to load the edit form on a new tab/window
• Move the scrollbar to get more items
  
• Find rows using the top right mini search form
  

Form

After selecting a template or clicking on Create button, you will be redirected to the template editing form, which has three tabs: Main, Sections and Properties.

Main

The Main tab defines the properties of the template:

• ID — numerical identifier for custom templates or code name for theme templates
• Title — name given to the template
• File — absolute system path where the template source code file is located
• Pencil icon — custom templates display a pencil icon, click on it to open a source code editing window
• Status — defines the access permission for the pages using this template
• Published (access granted to everybody)
• Private (only accessible by Navigate CMS users)
• Hidden (not accessible by anyone)
• Statistics — sets if the pages using this template will be included in Navigate CMS internal statistics
• Enabled — quick switch to define if the pages using this template are available

Sections

A page can divide its main content into several parts like Introduction, Main content, Summary... Sections are just that, the content fragments that compose a page.

• Sections — dynamic table, one row per section. Click on the Create button to add a new section (you won't see the button if you are viewing a theme template). Table columns:
• Code — code name that is used in the template to retrieve the section content
• Name — title of the section as it will appear in Navigate CMS when editing the content
• Editor — sets the editor that will be loaded to edit the content of that section
• TinyMCE — rich text editor
• HTML code — source code editor to let you enter any HTML code
• Raw — plain textarea, styles can't be applied in the application
• Width — available width for that section in the template; Navigate CMS will suggest values used in other templates to help you.
• Delete — remove that section
• Gallery — define if the template supports displaying a images gallery
• Comments — define if the template uses Navigate CMS functions to display and submit comments
• Labels — define if the page types using this template can have its own tags (they will be added to the metatag keywords in the header)

Properties

Another powerful feature of Navigate CMS is properties. We know each website has different needs; a plain blog won't need the same options as a cooking recipe's website, for example. Taking that example, we may think of a Recipe template which will need some properties like Servings, Preparation time, Difficulty level... Defining that properties will allow you to retrieve each value where you need it and that implies more design freedom while offloading a grade of complexity to the editor.

Properties has a dynamic table with one row for each property. Double click on a row to edit or review its details, hit on Create button to add a new property.

• Name — title / codename assigned to the property. It will be shown when editing content in Navigate CMS and you must use it to request a value in your template.
• Type — property field type (list of property types)
• Association — define if it is a category property or content property. It will be shown in the appropiate place in Navigate CMS.
• Enabled — the property is displayed and loaded or not

Editing a property

When you double click a row to edit a property or click on Create button, a property edition window will open.

A property is defined by the following fields:

• Title — title / codename assigned to the property. It will be shown when editing content in Navigate CMS and you must use it to request a value in your template.
• Association — define if it is a category property or content property. It will be shown in the appropiate place in Navigate CMS.
• Type — property field type (list of property types)
• Default value — value assigned when the property is empty; follow the instructions depending on each different property type.
• Enabled — the property is displayed in Navigate CMS functions and activated in the website

Creating custom templates for an existing theme

When the theme installed for a website is missing some feature you need you have two options:

≈ Modifiy the theme files

≈ Create a custom template

The first option is perfectly valid, but you will lose theme compatibility, meaning you won't be able to update it automatically. If that is not a problem we recommend reading the Theme guide in this documentation.

If you don't want to touch the installed theme we recommend creating a new template based on an existing one. Let's explain how to do it by a step by step example:

1 Define exactly what you need to change analyzing the original theme

2 Select the theme template that is closest to your needs

3 Inspect theme files downloading the theme package or accessing via FTP to your server

4 Identify the file associated to the template you selected

5 Copy its source code

6 Enter Web / Templates function on your Navigate CMS installation

7 Click on Create in the Actions bar

8 Set a title for your new template and enter a new filename

9 Save

10 Sections and Properties tabs will appear, you need to replicate the original template settings. If you are not sure of a value, just open the original theme template in Navigate CMS.

11 In the first tab, Main you'll see the pencil icon next to your new filename. Click on it and paste the source code copied before. Click on Ok.

12 Save

You now have the base for your custom template. If you select it for an existing content or category, it would be used instead of the original theme template. 

What remains is to apply the changes you need to implement to the template. Just hit the pencil icon and start editing.

0 Comments