Customization of individual Modules theme.

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 :

To add / edit / delete template (*.phtml) file go to Admin => Setup => Template Editor
To add / edit / delete JavaScript (*.js)go to Admin => Setup => JavaScript Editor
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.