Themes & Page Templates

Themes A theme is a collection of files and folders used to determine the look and layout of your website. A theme consists of at least one page template file and associated web files such as image files, css files and javascript files. In the CMS every theme has it’s own folder in the themes directory. In most cases you will only need and use one custom theme for your website. If you were to re-design your website in the future you could update your existing theme or upload a new theme so you can easily change back to the old theme if you need to. To create a new theme: 1. In the CMS themes directory create a new folder or duplicate the default theme folder and rename it. 2. Upload your page templates and associated files into your new theme directory. 3. Go to the Theme page in the CMS admin menu and change the theme to your new theme. If you are creating a new theme you can copy the existing default theme folder and rename it. This will ensure all required style sheets and images necessary for the cms to display properly are present in your new theme. The CMS will fall back to using files in the default theme if it cannot find the file in active theme therefore files in the default theme folder should not be modified or removed.

Page Templates

A page template is essentially a HTML file. It is used to determine page design, layout and positioning for dynamic content served by the CMS. A page template must have a valid HTML or PHP file extension (eg. .html, .htm or .php). A theme should always have at least one page template file named default. When you add or modify a category or product in the CMS you can select what page template to use. This determines the page design and layout for this particular page when it is displayed by the CMS. Each page template can be used many times over by the CMS to display multiple web pages on your website. To display dynamic content from the CMS a page template needs to have a special tag eg. {cms-page- content} somewhere in the body section of the page. For more information on special tags and class names see the page template tags help section.

Changing & Updating Page Templates

To update a theme simply upload the changed files into your theme directory. It is also possible to edit page templates and CSS files in the CMS admin area but make sure to keep template changes synched between the server and your computer. The CMS will check automatically for changes to page templates if you are logged into the admin area and when Dev Mode is enabled. If Dev Mode is disabled you will need to click the Update Theme button in the admin area. You do not need to click this button after editing a page template or CSS file in the admin area. Dev Mode is a convenient way to see your changes quickly by simply refreshing the page when logged in. However this automatic process can increase page load time especially if there are a lot of files in the theme. It is recommended to disable Dev Mode when not updating theme files to remove this performance impact. You can enable, disable and edit page templates and CSS files from the Theme page. Any file beginning with an underscore is considered disabled and will be ignored by the CMS. CMS CSS Files The CMS uses CSS files in the styles/cms directory of the active theme. These files are used to style content served by the CMS, for example font sizes and colors. Enabled CSS files in styles/cms folder are automatically optimised into a single minified CSS file. This reduces file size and the number of file resources on each page load. When adding or renaming a CSS file it is important to remember that they will be merged in alphabetical order; so CSS properties in later files can override those in earlier files.

CMS Help - Advanced - Themes & Page Templates