Customizing Theme

What is a theme?

Theme is a component that let you change the overall design of your website without involving any programming alteration. A theme file is merely a zip file that bundles images, css, and templates all together.

What is a template?

A template file is a file that is used to customize your website. It is part of your theme file. Each template has its own type, but it is not necessary to create every template inside your theme. You just need to create template that you need a customized look and feel for that particular template type. Despite the cms.page template type is mandatory in each theme file, the rest of the template type are optional. If none of the template is supply a default template will be used instead.

Each template type has its own place holder or so called a variables. I suggest you read about the template syntax and the list of template type and its place holder before you continue.

Creating Theme

Creating a theme is quite an easy task, simply create a folder and name it with your desired theme name. In this tutorial, we look at the example 'amber' theme that comes with the installation. Open the amber.zip located somewhere in /your/installation/path/cgi-bin/theme/amber.zip.

File structure

The followings is the file structure of amber.zip

The followings are descriptions for each folder and file in this example.

• css folder is the folder where you keep your customized css files, if you don't know what is css click here to learn it.
  • calendar.css is the css for javascript calendar
  • horizontal_menu.css is the css for horizontal menu
  • page.css is the main css file for the entire page, this has to be included into cms_page.html
  • ui.css is the css for gui interface such as popup windows and panels.
  • verticle_menu.css is the css for verticle menu
• image folder is the folder where you keep the images files
• screenshot folder contains screenshot for theme preview, this is merely used for distribution information only.
  • thumbnail.jpg is the thumbnail to be displayed in the theme page. It has to be 100x100pixel jpg or gif file.
  • screenshot1.jpg is the screenshot for the theme, it has to be 512x384 pixel jpg or gif file.
• cms_box_thick.html is the box template.
• cms_box_thin.html is another box template, you can have as many box as you like.
• cms_page.html is the main template file for the theme that control the overall design.
• config.xml is the configuration file for this theme.

Please note that the amber.zip only shows you the basic file structure that you need to work with the theme, it is ok to have your own addtional folders in the theme file depends on your requirement. You can even add your own customize javascript files in your theme or adding flash animation into it.

Configuration

Now let look at the config.xml in amber.zip, if you open config.xml with plain text editor then you may see the following content.

<?xml version="1.0"?>
<config>
   <theme>amber</theme>
   <author>Victor Sim</author>
   <summary>The amber theme of AxGUI.</summary>
   <website>http://www.axgui.com</website>
   <templates>
       <template type="cms.page" name="Page" file="cms_page.html"/>
       <template type="cms.box" default='true' name="Thin oultine" file="cms_box_thin.html"/>
       <template type="cms.box" name="Thick oultine" file="cms_box_thick.html"/>
   </templates>
</config>

The followings are description of each elements in the config.xml file.

• <theme> contains the theme name.
• <author> contains the author who creates this theme.
• <summary> contains the basic summary of the theme. This value is optional.
• <website> contains the official website of the theme. This value is also optional.
• <templates> contains group of customize template that comes with this theme.
  • <template> is the configuration for each template. See below for its attributes
    • type - the code of the template which is defined in the template documentation, See a list of template type available for axgui.
    • default - determine whether this template will be used as default when more than one template exist with same type. This value has to be either true or false.
    • name - the template name to be display for the user when choosing template.
    • file - the template file name in the zip file.

In the example above please notice that we have more than one template with type="cms.box", that is to let the user has multiple choices for that particular theme, provided we specify the default="true" attribute.

Now that you have understand the the basic idea of the theme you should be able to create your own very first theme. Lets proceed to learn about using theme in your website.