In this section we'll show you, how to start customizing a template based on ZO2 Framework
I. Directory Structure Explained
ZTools plugin system (plugins/system/plg_ztools/)
This is the plugin to hold all functions: Caching, Mega Menu Params and Process Optimize CSS, JS, HTML.
ZO2 Framework component (components/com_zo2framework/)
This is the folder to hold all class: Menu System, Broswer, Functions Core, TimThumb ...
ZO2 Shortcodes plugin (plugins/system/shortcodes/)
This is plugin to hold all shortcodes.
ZO2 Framework plugin (plugins/content/zo2framework/)
This is plugin to hold functions Ping Blog, Resize Image in Articles and Google Map.
ZO2 Framework Media folder (media/com_zo2framework/)
This is folder to hold all global css, js and images/userguide for template system.
ZO2 Default template (templates/zt_default/)
This is sample template using ZO2 Framework.
II. Customization
Develop new template based on the default one
ZT Kru template (Clone from ZO2 Default)
- css: This is folder to hold all css files for template.
- html: This is folder to hold all files and folder of modules, components you want override.
- images/userguide: This is folder to hold all images/userguide files for template.
- js: This is folder to hold all js files for template.
- layouts: This is folder to hold all layouts files for template.
- scolors: This is folder to hold all scolors files for template.
- thump.jpg: This is thumbnail image of template.
- config.xml: The config.xml file holds template specific params.
- templateDetails.xml: The templateDetails.xml file holds template specific information.
- component.php
- index.php
- index.html
+ ZT Kru css (templates/zt_kru/css)
+ ZT Kru html (templates/zt_kru/html)
+ ZT Kru images (templates/zt_kru/images)
+ ZT Kru js and layout (templates/zt_kru/js and templates/zt_kru/layout)
+ ZT Kru scolors (templates/zt_kru/scolors)
+ ZT Kru templateDetails.xml (templates/zt_kru/templateDetails.xml)
+ ZT Kru config.xml (templates/zt_kru/config.xml)
III. Develop new short codes and integrate in Zo2
Short codes are soul and most poweful feature of Zo2. Although Zo2 provides many ready-to-use short codes, it is clear that we cannot cover all kind of short codes for different users. By following this section, the developers can create their own short codes for their clients and install in Zo2.
+ Shortcodes (plugins/system/shortcodes)
- images/userguide (plugins/system/shortcodes/assets/images/userguide): Hold all images/userguide of shortcodes.
- shortcodes.css (plugins/system/shortcodes/assets/css/shortcodes.css): Hold all style of shortcodes.
- allshortcodes.php (plugins/system/shortcodes/assets/includes/allshortcodes.php): Hold all code to process shortcodes.
- shortcodes.js (plugins/system/shortcodes/assets/js/shortcodes.js): Hold all javascript of shortcodes.
- shortcodes.php (plugins/system/shortcodes/shortcodes.php): Hold all register code of shortcodes.
+ Shortcodes Example (Add new shortcode Accordion) 1. Open file: plugins/system/shortcodes/assets/includes/allshortcodes.php
- function add_shortcode('shortcode_name', 'function_to_process_shortcode');
- function functionToProcessShortcode($all_params_of_shortcode, $content_in_shortcode)
2. Open file: plugins/system/shortcodes/shortcodes.php
- name: name of Shortcode (show in shortcode button)
- desc: Description of shortcode.
- syntax: syntax of shortcode.
- image: icon of shortcode. (Need copy to folder plugins/system/shortcodes/assets/images/userguide)
Note: If your shortcode need add new js or css, you can open file shortcodes.js and shortcodes.css to add your code.
Most useful functions
There are many useful functions used in the default layout. This section shows these functions with the following information:
+ Class Zo2Functions
1. Zo2Functions::loadMediaFiles($file, $type)
- This is function to load javascript, css, or image file.
- $file: this is file name. $type: this is type of file ("js", "css", "images/userguide")
- This function return path of file.
- Eg: $document->addStyleSheet($function->loadMediaFiles('/indexphp/documentation/customization/template.css', 'css'));
2. Zo2Functions::getColorsSchemes($folder)
- This is function to load all schemes color file.
- $folder: this is folder to hold schemes color file.
- This function return all .xml file.
- Eg: $schemes = $function->getColorsSchemes("/indexphp/documentation/customization/templates/zt_kru/scolors/index.html");
3. Zo2Functions::getColorsValue($type, $key)
- This is function to load color value from config or cookie.
- $type: this is type of variables ('font', 'text', 'link' ..).
- $key: this is id of block you want change color. Eg: 'bd', 'user1' ...
- This function return value of setting, from config or cookie.
- Eg: $function->getColorsValue('color', 'bd');
4. Zo2Functions::getSchemesDetail($xfile)
- This is function to load scheme color details.
- $xfile: this is scheme color file.
- This function return all value of xml file.
- Eg: $function->getSchemesDetail("/indexphp/documentation/customization/templates/zt_kru/scolors/scolors1.xml");