Search:     Advanced search

Customization of individual Modules theme.

Article ID: 55
Last updated: 09 Jul, 2011
Revision: 6
Export to PDF
Email to friend
Views: 0

You are free to customize the modules and it’s template according to the requirement. Here it explained the modules hierarchical organizational structure for better understanding:

 
Application_Main_Directory
|
|___application
    |
    |___modules
        |
        |___Name Of Module
             |
             |___config [Corresponding Module’s config]
             |             
             |___controllers             
             |             
             |___forms  [Corresponding Module’s forms]
             |
             |___images [Corresponding Module’s Images]
             |
             |___languages
             |
             |___layouts [Editable Module's Layout]
                 |
                 |___filters
                 |
                 |___helpers
                 |
                 |___scripts
                     |
                     |___partial
                     |
                     |___layout.phtml
                     |
                     |___....phtml
             |
             |___models
             |
             |___services
             |
             |___views
                 |
                 |___helpers
                 |
                 |___scripts     [Editable Module's Templates]
                    |
                    |___index
                    |
                    |___backend  [Admin view able templates]
                    |
                    |___frontend [public view able templates]
                    |
                    |___other.....
                    |
                    |___so on........
             |
             |___Bootstrap.php

     

To change module’s design layout. 

According to the modules hierarchical organizational structure shown above, go to <$DocumentRoot>/application/modules/<$ModuleName>/layouts/scripts/ and open the relevant .phtml file you want to modify. By default index.phtml represents the 1st default page to call .  The sub-directory "/partial" contents the related designed block use to render the dynamic data model of respective modules.  

To change module’s module’s content / body area. 

According to the modules hierarchical organizational structure shown above, in order to change content area of a module open  <$DocumentRoot>/application/modules/<$ModuleName>/views/scripts/ and edit the relevant sub-directory's .phtml file you want to modify. By default index/index.phtml represents the 1st default page to call .  The sub-directories contents the related template designed use to render the dynamic data model of respective modules.  

 

A view of modules . 

How to Edit Module's Template Files  

Finally to edit module template and layout, please login as administration area :

  1. To add / edit / delete template (*.phtml) file go to Admin => Setup => Template Editor
  2. To add / edit / delete JavaScript (*.js)go to Admin => Setup => JavaScript Editor
  3. To add / edit / delete CSS ((*.css)) go to Admin => Setup => CSS Editor

See the image below :

As shown above, you can navigate to the required files to modify according to the modules hierarchical organizational structure explained on of the page. 

This article was:  
Also read
document Default location of Templates , JS , CSS and Images.
document Designing various templates blocks
document Introduction of Modules Architecture.

Also listed in
folder Site Building Guide
folder Templates Customization
folder Maintenance and Optimization
folder Developer Documentation

Prev   Next
Why all of your applications are based on CMS (Content...     Customize the basic configuration though Global Setting.