ZO2 Framework Official Site

Documentation

Customize

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/)

Plugin 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/)

ZO2 Component (Fontend)

This is the folder to hold all class: Menu System, Broswer, Functions Core, TimThumb ...

ZO2 Shortcodes plugin (plugins/system/shortcodes/)

ZO2 Shortcodes

This is plugin to hold all shortcodes.

ZO2 Framework plugin (plugins/content/zo2framework/)

Plugin Content ZO2 Framework

This is plugin to hold functions Ping Blog, Resize Image in Articles and Google Map.

ZO2 Framework Media folder (media/com_zo2framework/)

Media ZO2 Framework

This is folder to hold all global css, js and images/userguide for template system.

ZO2 Default template (templates/zt_default/)

Template 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)

Template ZT Kru

  • 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)

Template ZT Kru CSS

+ ZT Kru html (templates/zt_kru/html)

Template ZT Kru HTML

+ ZT Kru images (templates/zt_kru/images)

Template ZT Kru images

+ ZT Kru js and layout (templates/zt_kru/js and templates/zt_kru/layout)

Template ZT Kru

+ ZT Kru scolors (templates/zt_kru/scolors)

Template ZT Kru Schemes colors

+ ZT Kru templateDetails.xml (templates/zt_kru/templateDetails.xml)

Template ZT Kru XML

+ ZT Kru config.xml (templates/zt_kru/config.xml)

Template ZT Kru Setting

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 List

+ Shortcodes (plugins/system/shortcodes)

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

Shortcodes Example

  • 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

Shortcodes Example

  • 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/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("templates/zt_kru/scolors/");

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/templates/zt_kru/scolors/scolors1.xml");

Getting Started

Installation

This section will show you, how to install a template based on ZO2 Framework

To install ZT Beauty you only need to take a few quick steps:

Step 1: In Joomla administration go to menu Extensions => Extension Manager => then select “Browse” button and select:

Step 2: you have 2 options A or B to install the ZT Beauty

A. Option 1:

A1. Install com_zo2framework v2.5 RC.zip => After that click on button “Upload & Install”

A2. Install zt_beauty_template_installer.zip => After that click on button “Upload & Install”

B. Option 2: install zt_beauty_zo2_template_combo.zip => After that click on button “Upload & Install”

Step 3: Go to Back-end => Extensions => Templates Manager => Select ZT Beauty and Make Default

Step 4: To Configure ZT Beauty template: Components => ZO2 Framework => Templates Manager => ZT Beauty. You will see the list of params with default setting for the template. Hover you mouse on the name to see the description for each parameter.

Upgrading

There are two methods of upgrading the ZO2 Framework, either via the Joomla Updater or through an overriding reinstall. The first is the simplest and recommended method. Go to ExtensionsExtensions ManagerUpdate, select Find Updates to load all available updates, if not already shown. Then select ZO2 and click Update.. ZO2 will now be updated directly from the web.

The alternative method is one identical to installing ZO2, and necessary for upgrading the ZO2 template. You would just need to download the latest ZO2 files, and install at ExtensionsExtensions ManagerInstall. Select the Choose File button, locate the downloaded ZIP com_zo2framework_xxx (xxx is the version of ZO2) and click Upload & Install to begin the update. There is no need to uninstall first as the files will be updated during the installation process.

You can check to see if the correct ZO2 version has been installed by going to ExtensionsExtensions ManagerManage, then search for ZO2. The version number will appear in the table.

Uninstallation

There are two main parts to ZO2, the framework and the template. Therefore, there are two parts to uninstalling. If you intend to uninstall only the template portion, then follow the instructions for removing the template only. Keeping the ZO2 library installed really does not harm as it is only used by a ZO2-enabled template, but if you wish to uninstall the library, you can follow those steps also.

Unsetting the ZO2 Template as Default

To uninstall the ZO2 template, you will first have to ensure that it is not set as the default template. Go to ExtensionsTemplate Manager, select the checkbox to any other Site template that is not ZO2, then click Default in the button toolbar.

Uninstall Template

Uninstall ZO2

Uninstall the ZO2 component, library, plugin and template from ExtensionsExtensions ManagerManage. Insert ZO2 into the Filter and click Search. Select all ZO2 elements you wish to uninstall, then click Uninstall in the button toolbar. ZO2 will now be uninstalled.

Uninstall ZO2 Framework

Introduction

I. ZO2 Framework Overview

ZO2 frameworks is essentially starter template that you can use as a foundation for the creation of your own templates can significantly boost your performance and efficiency. Some are more elaborate than others featuring in depth templating system, but this is the gist of a framework.

ZO2 Framework is the third generation template framework developed by ZooTemplate.com for Joomla! 2.5 and brings new improvements and features: a new structure, Layouts, Responsive Ready, Right to Left Language Support, shortcodes system, ping blog to social network and a powerful menu system called Mega Menu. The framework itself is our three years experience providing templates for Joomla!, it was developed to shorten the website development.

ZO2 frameworks come with everything you need to get faster the proces of designing and coding a Joomla template by reducing your time, and more effectively than starting from scratch.

ZO2 Framework also comes with a new structure: a light template, a template to hold the default design and media core scripts, a plugin to manage the shortcodes, google map, but the plugin to hold menu parameters for Mega Menus have been integrated into the core framework plugin to make the updating easier.

II. ZO2 Default Template

ZO2 Default Template is a new clean template design powered by the new framework.

Benefits:

  • Easy to start developing templates from a blank core template
  • Easy to update the core while customizing the template layout design.
  • Easy to change color, logo, background image.
  • ZO2 Default uses the responsive layout based on Twitter's Bootstrap Framework, with its collection of utility classes, to provide a great degree of flexibility for a responsive web design.
  • Template administration panel is now your best friend: it allows you to edit files, upload your themes and customize settings like never before.
  • Flexibility have never reached this level!

Please checkZO2 Framework demo.

Template Framework Comparison

  Features Classic Joomla! Templates ZO2 Framework
Design Features Beautiful Typography No Yes
Right to Left Languages Support No Yes
Responsive Web Design No Yes
Shortcoders No Yes
Administration Easy Typography Usage No Yes
Upload Themes in Back-end Yes Yes
Edit Colors in Back-end No Yes
Basic Template overrides No Yes
Multiple module positions Yes Yes
100% div based XHTML design No Yes
Advanced Load modules as menu items No Yes
Page layout overrides Yes Yes
Schemes Colors No Yes
Front-end user tools Color theme control * No Yes
Font size control * Yes Yes
Google Font control * No Yes
Schemes Colors * No Yes
Menu systems Mega Menu No Yes
Dropdown Menu Yes Yes

III. System Requirements

ZO2 Framework does have some system requirements, listed below are those requirements broken down into their distinct groups:

Joomla Requirements

We highly recommended that you always use the latest stable version of Joomla to ensure all known bugs and security fixes are addressed. At the time of this writing the current stable version is 2.5.7.

Server Requirements

The recommended minimum requirements are:

  • PHP 5.2.17+ (5.3+ recommended)
  • MySQL 3.23 (5+ recommended)
  • Apache 1.3 (2.2+ recommended)
  • mod_mysql
  • mod_xml
  • mod_zlib

Browser Requirements

  • Firefox 4+
  • Safari 5+
  • Google Chrome 10+
  • Opera 10+
  • Internet Explorer 8+
Page 1 of 2
Zo2 Framework Settings

Select one of sample color schemes

Google Font

Menu Font
Body Font
Heading Font

Body

Background Color
Text Color
Link Color
Background Image

Top Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Header Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Menu Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Slider Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Inset Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Main Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Left Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Right Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image

Bottom Wrapper

Background Color
Modules Title
Text Color
Link Color
Background Image
Background Color
Modules Title
Text Color
Link Color
Background Image
 
Top of Page