Themes

A Theme defines the basic layout of a page. Each theme is assigned to a template, which contains all necessary HTML-, CSS- and image-files. Furthermore, some blocks can be assigned to a theme. Blocks are areas filled with content, for example header, sidebars or footer.

Themes are administered in the backend under Site -> Themes. You can easily modify the layout of single pages by assigning themes to them (under Site -> Pages).

Templates

Templates contain the HTML-, CSS- and image-files for a theme. Each template has it's own directory, where those files are stored, for example "public/templates/my_exotic_template". An XML-file called "template.xml", which describes the template, must also be in that directory.

When you create your own template you can make life easier if you copy the files of an existing template to your own template-folder and then just apply some changes.

View-scripts

A template must contain at least one file with the extension ".phtml" (which is called a view-script). This file contains the main HTML (header and body), along with some PHP-code to display blocks and other elements.

Technically, the view-script represents a Zend_View, and certain PHP variables are available in it (similar to displaytemplates). You can access the variables, that are available in the view-script, by writing $this->variable_name. The following variables are useful:

  • $this->blocks: Array with the HTML of all blocks assigned to the theme.
    For example, to display a block with the token "sidebar-right" in the view-script, you could write:
    <?php echo $this->blocks['sidebar-right'] ?>    .
  • $this->alerts: Array with possible errors and messages. $this->alerts['errors'] contains errors, $this->alerts['messages'] contains messages.
  • $this->theme: Array with information about the current theme.

Stylesheets and javascript

The CSS-file(s) of a template are stored in the subfolder "css" (for example "my_template/css/styles.css"). All CSS-files in that directory will automatically be included in the HTML-output.

Some plugins have their own CSS-file(s). They will also be included automatically, so you don't have to worry about this. In case you want to overwrite these default stylesheets for a plugin (which is most likely), you just have to write the according style-definitions to your template's CSS-file. This will overwrite the style-definitions in the plugin's CSS-file, because the stylesheets for templates are loaded after those of plugins.

If you should need additional javascript-files in a template, you have to include them manually inside the <head>-section of the view-script like this:

<script type="text/javascript" src="<?php echo BASE_URL ?>/templates/my_template/scripts.js"></script>

Working with themes

Displaying different block-content on certain pages

A common question is how to change the content of a block only on certain pages, by leaving other pages unchanged. A good example would be if you want a different menu in the right sidebar on some pages.

The answer is to create a new theme with a different block selected for the "sidebar-right"-area in your template (or any other area, of course). Here you find an example explaining this in detail.

Implementing different variations of a template

Some templates provide multiple variations of a layout, e.g. one with 2 columns and one with 3 columns. This way you are able to use the same template for different variations of a layout, without having to create a whole new template.

A good example to illustrate this is the "Down Under"-template: It lets you select between a standard 2-column layout (for regular pages) and a 3-column layout (for special pages like the startpage).

Left: startpage with 3 columns, right: other page with 2 columns

Example: On regular pages you want to display a layout with 2 columns and on your startpage a layout with 3 columns.

  1. In the backend go to Site -> Themes, create a new theme with the name "Down Under" and select the template "Down Under" for it (If you don't have that template you can download it). Click on "Create".
  2. Select the view-script "default.phtml" (it probably is already selected) and click the green X on top to save the theme and go back to the themes-overview.
  3. Repeat the steps above to create another theme with the "Down Under"-template, but call this theme "Down Under startpage" and select the view-script "columns.phtml" for it.
  4. Go to Site -> Pages. In the list you can now assign the "Down Under"-theme to all regular pages and the "Down Under startpage"-theme to the startpage. Click the green checkmark on top to save the changes.

Creating your own theme

This example will show you how to create your own theme.

1. Create a new template

First you need to create a new template that holds your HTML-, CSS and image-files:

  1. Create a new directory inside the directory "public/templates" and call it "my_exotic_template" or whatever you like.
  2. Copy all files and folders from the directory of an existing template (for example "dubsite_portal") into your new directory.
  3. Edit the file "template.xml" in a texteditor and change the name of the template. For this example leave the values inside <view_scripts> unchanged.

2. Create a new theme

Now create a new theme and assign it to a page:

  1. Go to Site -> Themes in the backend. Open the box "New Theme", select your new template in the template-selectbox, enter a name and click "Create".
  2. In the Box "Properties" you can select the doctype, depending on what standard your HTML-code will support. A good choice may be "XHTML1_TRANSITIONAL".
  3. In the box "Template" you can select the phtml-file that will be used to display the theme. this allows for implementation of different layout-versions of a template (see above).
    Until now you see the preview-image of the "Dubsite Portal"-template, because you have copied all files from that template. You can change this later if you like by replacing the according image-file inside your template's directory with a screenshot of your own layout. The image should be 800 X 600 pixels.
  4. You can select the blocks that you want to display in the areas of your theme (top, sidebar-left, sidebar-right...). Normally you don't have to do this manually, except if you have multiple blocks for one area, e.g. multiple blocks with the token "sidebar-right". By selecting a block you can define what content is displayed in that area.
  5. Save the theme.
  6. Go to Site -> Pages to assign your new theme to a page. Select the new theme for the desired page in the list and click the green checkmark on top to save the changes.

3. Edit HTML and CSS

Now you can start editing the HTML- and CSS-files of your template to implement your own layout. Reload the page, that has your new theme assigned to it, from time to time to see the changes take effect.