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