Manage and Customize your theme / template in version 2.x

This section reviews the manual process of setting up template files. The core template of our application is divided into two parts. These are as follows:

01)  Global Template & Layout

02)  Modules based Template & Layout

Global Template & Layout :

When constructing your own templates, you need to set up several files and folders in a coordinated manner. A template needs to contain various files and folders.  The global layout is a high level control area, where you can manage common colors, images, styles and basis design competent of a web template. You can manage global header, footer bg or fg colors , text colors, css, image , jquery and other etc through global layout area located at application => layouts => scripts => <$templateName >/  

All of our web applications comes with a default templates named as $productName_default. These initial templates are defined by directories within the installation "application/layouts/scripts/ProductName_default/ " directory. Each template has it's own directory. Within the main directory of a template are numerous files: templates (.phtml), cascading style sheets (.css), images (.jpg or .png) and maybe others. Like in other theme-based systems, fragments of HTML code are stored in the .phtml template files. 

Follow is the structure of template and skin directories:

Root_Dir
|___application
|   |___layouts
|   |   |___scripts
|   |       |___ProductName_Default
                |___blocks/
                |___css/
                |___js/
                |___images/
                |___languages/
                |___layout.phtml
                |___error.phtml
   |       |___YourTemplate
   |       |___default

Modules based Template & Layout

In layout terms, modules are essentially the building blocks of a page. Our application comes with several built-in modules, such as Menu, Polls, Articles, Comment etc.  If you take a look at Site Module Manager in your Administrator backend (Admin =>Modules), each module is assigned a position (left, right, top, etc) and modules may be assigned to the same position to its corresponding page. Each module of application is sub-directory of application/ modules directory.

Here is an example of a module directory consist of some sub-directories which are:

config: This directory consist of module configuration

Forms: Define all routes that map the URL to module/controller/action following Zend Framework standard

formname.php : a php program to render the dynamic forms.  

source/:   User readable and updatable form and it’s attributes

en_ISO_Territory : List of forms files in various languages.

controllers: Controller layer. Each file is a controller classes following Zend Framework naming convention

languages: Consist of all available languages for module. Each file defines the translation for certain language in INI format.

model: Model layer. In most cases, this layer execute database queries

views: View layer. This directory consist of helpers and scripts directories defined by Zend Framework workflow.

helpers: (optional): Contain helper classes which can be called in view scripts

scripts: Display what users see in back-end

Template Flow chart :

Important:

It is important to note that, all of our default layout are named as $ProductName_default. Before customizing your template, please make sure you have created a custom directory coping files from $templatename_default and set your custom directory as default from Admin => Setup => Template installer. DO NOT customize on $ProductName_default directory, because you might have a risk of overwriting the files when you will be upgrading the software to newer version.