Current Version 1.0.0 (Feb, 07 2013)
Thank you so much for interesting in responsive joomla template ZT Leena. Now we will show you how to install and configure the ZT Leena template.
Help & Support
You may find these sites useful while installing and configuring your Joomla site!:
- Joomla FAQ: http://docs.joomla.org/Joomla_3_FAQ
- System Requirements: http://docs.joomla.org/Technical_requirements
- Server Compatibility Check: http://docs.joomla.org/Installing_Joomla
- Installation Guide: http://docs.joomla.org/J3.2:Installing_Joomla#tab=Prepare_for_Install
Online Joomla guide
Table of contents: see the list of all topics
Video Tutorials – http://www.youtube.com/playlist?list=PL0w1OO0UFKLbXeeQmJSzQ0ihrdQm5XyZD
- Joomla Wiki http://en.wikipedia.org/wiki/Joomla!
- Joomla Forum http://forum.joomla.org/
There are many tutorials, acticles and forums to help you learn how to use this Joomla template and its features. This section provides helpful links to instructions on commonly used this Joomla template features, but you can learn even more by exploring these resources:
Demo ZT Leena
ZT Leena is not only a friendly interface, but also an impressive and beautyful design. So, It will surely meet the highest of your business objectives. With this user guide, we hope you will know how to install & use this template daily to support your business activities effectively.
If you are unable to find answers to your questions, please feel free to post them in our HelpDesk, or contact to us. We’d be glad to help you. Once again thank you so much for using our company’s product.
Limited Usage Granted
You have the right to use the ZooTemplate extensions on as many concurrent sites as your entitlements provide for. After your membership expires, you may continue to use the extensions your entitlements allow for, so the extensions are not time-limited. The Developer level clubs grants unlimited implementations of ZooTemplate extensions as long as the usage complies with the rest of the Terms & Conditions.
You may not claim intellectual or exclusive ownership to any of our products, modified or unmodified. All products are property of ZooTemplate.com. Our products are provided “as is” without warranty of any kind, either expressed or implied. In no event shall our juridical person be liable for any damages including, but not limited to, direct, indirect, special, incidental or consequential damages or other losses arising out of the use of or inability to use our products.
Since ZooTemplate is offering non-tangible irrevocable goods we can offer direct refunds if your account has not been logged-into yet. In this case the refund will be provided without any question. ZooTemplate also will offer a full or partial refund within 15 (fifteen) business days starting from the moment when the member make the payment. In this case ZooTemplate has the right to ask questions for the refund and also we have the right to NOT offer the refund if we see reasonable. The above notice, also, applies to the license fee and all our Sign Up Plans. Please Contact Us if you need further information.
After we have successfully received your payment, your membership information will be emailed to the address that you have provided during the sign up process. It normally happened within minutes. If you do not receive this information in 24 hours from you completed sign up process please contact us support(at)ZooTemplate(dot)com. With this information you can access the member area section to download our products and access our Forums.
You may not place any non-GPL portions of our products, modified or unmodified, on a diskette, CD, website or any other medium and offer them for redistribution or resale of any kind without prior written consent from ZooTemplate. Please Contact Us if you require more clarification.
You are authorized to make any necessary modification(s) to our products to fit your purposes. You may not however redistribute or release non-GPL portions of the templates as GPL or otherwise. You may not remove or change the ZooTemplate copyright information in the header of the xml descriptor file for all products. You may however remove our copyright from the footer of the templates if needed. No use of our trademarks is granted under this Agreement. Please read the FAQ section regarding this if you have further questions. Porting non-GPL portions of our templates to other platforms and content management systems and redistributing as GPL or otherwise is also strictly prohibited. Please Contact Us if you have any requirements that are not covered by these terms.
Warranty and Support
ZooTemplate offers these templates and designs ‘as is’, with no implied meaning that they will function exactly as you wish or with all 3rd party extensions/products. Further, we offer no support via email or otherwise for installation, customization, administration of Joomla!CMS itself. Private customer forums are available at our Forums. ZooTemplate.com does not commit to monitor these forums, but we reserve the right to respond and answer questions. ZooTemplate does not warranty or guarantee these templates in any manner. We cannot guarantee they will function with all 3rd party extensions/products or web browsers. Browser compatibility should be tested against the demonstration templates on the demo server. Please ensure that the browsers you use will work with the templates as we can not guarantee that ZooTemplate templates will work with all browser combinations.
More infomation please refer to http://www.zootemplate.com/legal/terms-of-use.
This template may not be compatible with some third-party extensions. It’s impossible for Joomla template authors to make the template compatible by default with all existing extensions because there are thousands of available Joomla extensions. Only the “default” Joomla default is compatible with all third-party extensions, because all extensions are designed to work with it. But authors of the extension should provide detailed instruction about how to integrate the extension with custom templates, since nobody really uses “default” Joomla template, everybody uses custom template.
Generally all extensions can work with all templates but they sometimes have to be integrated manually. The same applies for third party scripts or extensions you may add that can cause conflicts with our Joomla template. In such cases you need to customize the template and merge two conflicting template files into one template file.
Unfortunately third-party extensions are beyond the scope of our support, please contact the author of the extension if needed. Author of the extension should provide detailed instructions about how to integrate the extension with any custom Joomla template.
There are 2 methods of installing the ZT Leena:
If you’ve just started building your Joomla site from the scratch, we recommend following Quick start guide to install the entire site comes with sample data.
Separate Template Installation
To install ZT Leena you only need to take a few quick steps:
- In Joomla administration go to menu Extensions => Extension Manager => then select Browse button and localte ZT Leena files.
ZT Leena Installation
You have 2 options A or B to install the ZT Leena:
A. Option 1:
plg_system_zo2_vX.Y.Z.zip. After that click on button Upload &Install.
template_zo2_leena_vX.Y.Z.zip. After that click on button Upload &Install.
Note: X.Y.Z is template/extension version you have
B. Option 2:
package_zo2_leena_vX.Y.Z.zip. After that click on button Upload &Install.
ZT Leena Configuration
- Go to Back-end => Extensions => Plugin Manager => Use the Filter to search for Zo2 Framework and enable it.
- Once ZT Leena is installed in your Joomla site, you need to make it default for your website so your pages get the new design.
Please go to
Template Manager=> Zo2_leena - Default => Click on the star icon next to it.
Here is where your site should look like after installed ZT Darki.
Using the K2 extension to set up your Joomla site. Here's a direct download link to v2.6.0: http://getk2.googlecode.com/files/K2_v2.6.0.zip You could found many useful document from K2 Official website http://www.getk2.org/
To view all ZT Leena module positions, please click here.
ZT Layer Slider
ZT Layer Slider allows you to easily create the sliders with multiple cool effects. With this module, you can now add a custom Slider to any or every page on your website. Equally, you can also add as many slider as you like. A more detailed instruction about how to edit and configure ZT Layer Slider can be found in ZT Layer Slider Configuration Manual.
- In Joomla administration go to menu Extensions => Extension Manager => then select Choosefile button and select
zt_layerslider j25 j30.zipfile (included in zt_leena_package). After that click the Upload & Install button.
ZT Layer Slider Package itself includes both ZT Layer Slider Module and plg_content_zt_layerslider.
However by default ZT Layer Slider Module, and plg_content_zt_layerslider are not enabled, so you need to be enable theme to use.
- Go to
Publishthe ZT Layer Slider module that was installed. Enable the ZT Layer Slider Plugin in
More informations about these steps are available in chapter Configure the Extension.
- Next, nagative to Components => ZT Layer Slider Module. Here, you can create a new slider, edit or delete any existing slider.
Note: For more information about module usage, please see the Extensions Usage Guide.
ZT Custom HTML
ZT Leena uses Custom HTML modules. The below section will guide you how to create and configure them.
Create and configure custome HTML Module
- To create this module, go to backend:
New=> You'll see a list of available modules. Select type as
Custom HTMLand begin editing the module.
- To Edit an existing Custom HTML module, in the
Module Managerclick on an Custom HTML Modules Title or click the Custom HTML modules check box and then click the
Editbutton in the Toolbar.
- Click the
Savebutton to apply the changes.
ZT Leena uses several custom HTML modules. You can found all settings of these custom HTML modules in
Use the filter by Partial Title/ID in the upper left or the filter by State, Position, Type, Access and Language in In the upper right area
to see how to configure each module.
- To have the Featured Project Module content display as above, and paste the following HTML code to your editor:
<article class="col-md-3 col-sm-3 col-xs-6"> <div class="zo2-project-item"> <div class="zo2-project-image"> <a href="#"> <img class="zo2-project-thumb" src="images/demo/pj1.jpg" alt=""><!--Project thumb --> </a> <div class="hover-mask"> <hr class="project-view-line"> <a href="#" title="" class="project-view">View project</a><!--Project Title --> </div> </div> <div class="zo2-project-detail"> <hr class="project-title-line"> <h3 class="zo2-project-title">Killing me softly</h3><!--Project Title --> <small>Web design, Image</small><!--Project Categories --> </div> </div> </article> <article class="col-md-3 col-sm-3 col-xs-6"> <div class="zo2-project-item"> <div class="zo2-project-image"> <a href="#"> <img class="zo2-project-thumb" src="images/demo/pj2.jpg" alt=""><!--Project thumb --> </a> <div class="hover-mask"> <hr class="project-view-line"> <a href="#" title="" class="project-view">View project</a><!--Project Title --> </div> </div> <div class="zo2-project-detail"> <hr class="project-title-line"> <h3 class="zo2-project-title">Cover Artworks</h3><!--Project Title --> <small>Photography, Image</small><!--Project Categories --> </div> </div> </article> <article class="col-md-3 col-sm-3 col-xs-6"> <div class="zo2-project-item"> <div class="zo2-project-image"> <a href="#"> <img class="zo2-project-thumb" src="images/demo/pj3.jpg" alt=""><!--Project thumb --> </a> <div class="hover-mask"> <hr class="project-view-line"> <a href="#" title="" class="project-view">View project</a><!--Project Title --> </div> </div> <div class="zo2-project-detail"> <hr class="project-title-line"> <h3 class="zo2-project-title">La Bella Vita</h3><!--Project Title --> <small>Web design, Image</small><!--Project Categories --> </div> </div> </article> <article class="col-md-3 col-sm-3 col-xs-6"> <div class="zo2-project-item"> <div class="zo2-project-image"> <a href="#"> <img class="zo2-project-thumb" src="images/demo/pj4.jpg" alt=""><!--Project thumb --> </a> <div class="hover-mask"> <hr class="project-view-line"> <a href="#" title="" class="project-view">View project</a><!--Project Title --> </div> </div> <div class="zo2-project-detail"> <hr class="project-title-line"> <h3 class="zo2-project-title">Urbanism</h3><!--Project Title --> <small>Web design, Photo</small><!--Project Categories --> </div> </div> </article>
- Menu Assignment: This is where you choose when this module will be displayed. All, None, Selected Menu Item(s)
- Module Permissions: Allows you to manage the permission settings for the user groups
Note: You can set the configuration for other Custom HTML modules in this section by the same way as above.
Featured Articles allows you to edit some articles marked in your site as Featured. To do this go to
Click the name of article and begin editing:
Testimonial module allows the admin user to do add/edit Testimonials given by customers and make it display on the frontend.
- You’ll see the download link at ZT Testimonial product page: [http://download.zootemplate.com/account/package/zt-testimonials-module]
Testimonial component Installation:
Go to Administrator site
Extension Manager in the Top Menu and install
mod_zt_testimonials.zip file to your site.
To configure option, go to
Module Manager >
Built in very completely new ZO2 Framework, ZT Leena uses MegaMenu adding lots of advanced features. This MegaMenu is a perfect choice for creating unique menus. You can create a vertical, horizontal or fixed responsive menu with many custom styles and effects.
Please note that the megamenu setting is not global setting. If you use multiple styles, you need to enable and configure the megamenu option in the style you want to use the feature.
- To configure and edit Mega Menu, go to:
Template manager=> open Zo2_leena template =>
- There are 3 level of configuration in the Mega Menu Settings, which are:
Menu item setting.
Depend on the element you select, the Toolbox will display different contents.
Menu Item Setting
In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item. The way to create a new Menu Item in Main Menu also specificed in this section.
Submenu: you can enable/disable submenu for this item
Group: config how the selected item's submenu displays
Positions: allows you to move a list of menu items to another column
Extra class: allows you to style the selected item with an extra css class
Icon: allows you to add an icon from Twitter Bootstrap to the selected item
Item caption: add caption to the menu item
This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.
Add row: add a row to the selected submenu.
Hide when collapse: show/hide this submenu when the menu is collapsed on small screen.
Submenu width (px: set width (in px) for the selected submenu.
Alignment: align the selected submenu: left, right, center, justify.
Extra class: allows you to style the selected submenu with an extra css class
MegaMenu from ZO2Frameworks support the column setting which allows you to add column, remove column, set width of column and assign module to column.
Add/remove column: "+" to add a new column to the right of the selected column. "-" to remove the selected column
Hide when collapse: show/hide this column when the menu is collapsed on small screens
Width (1-12): allows you to set number of grid columns (Bootstrap grid) that the selected column spans
Module: add/replaace a module to the selected column
Extra class: allows you to style the selected column with an extra css class
One Mega menu is split in two parts: Config and Edit. The Menu Config is specificed in chapter Mega Menu Configuration. In this section, we have two parts: build-up your Megamenu, and style and add icon for menu item as well.
Build up MegaMenu
ZO2 Framework has a powerful, flexible and feature rich mega menu built into it's core. One of the features of the megamenu is the ability to include a module as a submenu item. This section describes how to insert a submenu column, row... into your ZO2 Framework Mega Menu.
Add a submenu
On the Megamenu configuration screen, you will see the main menu items. Click on the menu item under which you would like to add a submenu item.
If the menu item does not already have a sub menu, click on
Submenu – Yesparameter under Item Configuration in order to add a submenu item for selected main menu item. This step isn't necessary if the parent menu item already has a sub menu item.
When you enable a Submenu for the selected main menu item, then you will see the new submenu has been created under the main menu item.
Click on the empty area around the submenu dropdown. You will see that the Menu Item configuration has changed. And that the Sub-megamenu setting toolbar appears.
Here you can add a new row(1), designate a sub-menu column width for each of the columns you are creating (3), align the selected submenu(4) and show/hide this submenu when the menu is collapsed on small screen(2).
The default for Mega Menu in Joomla is one column, but with ZO2Framework MegaMenu, you can have three to four columns side-by-side. The number of columns and the width of columns of a menu item'smega menu can be set via Column Configuration.
Add a column to submenu
Click on the empty area in submenu dropdown to open the Column Configuration area open as the image in chapter Column Setting.
Then, select "+" to add a new column to the right of the selected column (click "-" if you want to remove that column).
- Select Width(1-12) to set number of grid columns that the selected column spans.
Assign a module to column
Next, you can easily select the content for each column by assigning any module. That content can be the existing module, a video or even a random image.
Select Moduledropdown box under Column Configuration area to find and select the module you would like to show as a submenu item.
- Once you select the module to be placed in the menu item you will immediately see that the Megamenu editing interface will load a module and show it in the submenu dropdown.
Move menu items to another column
In this step, we will show you how to move the menu items to another column. In this example, it's Joomla Item which has 6 menu items. The menu items will be set to two seperate columns.
- First, set your Submenu width and the alignment for it as your prefer.
- Next, click the Login item, and then, select Position "→" to move the menu items to second column.
In this step, you can set all the sub items under one parent item.
- Select a menu item that has no submenu then add submenu for that.
- Add a row for that sub-menu.
- To move all the categories under the parent item, click the individual sub-menu item and toggle
- Also, You can split the Bonus Page column in two or three individual ones if you wanto in Column Configuration and style those columns and make them look balanced. Please read back chapter Add a column to submenu.
Style and Add icon
Style for MegaMenu
- You can style for the MegaMenu item by adding class to the field:
You can add class for a mega menu, for a column or for a menu item. So you should the priority oder. The priority order (
Mega menu =>
Menu Item) is from low to high.
There are one file that you can add style for MegaMenu.
megamenu.less in: templates/zo2_hallo/assets/less
- Moreover, you can also style for your own menu by adding the subtitle for each menu item.
It is easy to add a subtitle for a Menu Item. In the Item setting panel, select a menu item then add subtitle in the field:
The following image shows you how to add subtitle for a menu item.
One of the features of a megamenu is the ability to add icons to your menu items. This section will show how to add an icons to your menu items.
On the Megamenu configuration screen, you will see the menu items just under the Item Configuration area.
Click on the menu item under which you would like to add an icon.
For that menu item, click in the
Iconbox in the Item Configuration area.
Input the name of the icon that you would like to show before the menu title for that specific menu item.
Note: Full list of all available icons that you can use with this Icon parameter can be found on the Font Awesome site. Copy the icon class which you want to add to box Icon.
- Finish adding an icon to the selected menu item by clicking on the
Savebutton in the Megamenu editing page toolbar.
Layout Builder is one of the unique features introduced in ZO2Framework which supports multiple layouts that allow you to make your content displayed flexibly. This part brings more functionalities and improvement user interface in managing template layouts, including:
Specify the number of modules to be placed within a module position.
Set the width for Column using bootstrap spanX classes (form span1 to span12)
Set any of the above options for either tablet/mobile or desktop mode through Column's/Row's Settings.
Change the name of each row, and also select any module to each column.
In this chapter, there are two parts to be configured: Layout Structure and Layout Configuration.
Layout of main part of the page suggested in our ZO2 Haapy template which uses 12 columns and 12 spans, has been successful and it still can be useful in the field of creating some interesting layouts.
In Top Section, we use 3 columns and span 4 for each column. The Columns are top-menu, search,and top-social.
Here're 2 columns: header_logo with span 3 and mega_menu with span 9.
The Slide Layout is a simple one column. And the span 12 covered the whole width of this layout.
Feature, Breadcrumb, and News Section
In these sections we used the whole span. There is option available for to create more column and row.
In the body section we used 03 columns. And the columns are
The left & right contain span3 and the component area contain span6.
This is pretty Footer one columns layout with whole span.
Layout Builder also provides more settings for you to create a new layout, customize and manage the layout of your theme. All layout settings are at the top right of each row/column form, including:
The drag & drop option: By using this option, You can drag & drop to change the position of columns in a line as well.
Column's/Row's Settings: Here you will be able to select the row’s/column's name & class if he wants. Also users will be able to fix the section for where to visible or where to hidden.
Duplicate Row: The 3rd option provides you to add new row.
Split Row: The 4th option provides users to add new column.
Remove Row: If users want delete the row then just click the cross button.
This part focuses on knowledges to create a new module layout and manage the existing layout in your theme.
Add and Modify Layout Section
Add a Layout Row
- Click the
Duplicate RowIcon at the top right of any existing row form. A new row will be created under.
- Using the drag & drop option to change the order of layout.
Set the row name
- To set the name of row, you click the icon Row's Settings in the editor toolbar of selected row.
Insert row name into Name Field and Row ID into ID field.
Select ON/OFF for Full Width.
Save Changesand then, the name of row is created.
Add column to a layout row
Layout has rows and each row can hold 1 to 6 columns. You can easily add one or more columns to a layout row by clicking the
Split Row on the created row header.
New columns are added on the right side of the row.
- To delete a selected row/column, click Icon to Remove in the editor toolbar of selected row/column.
Assign a module to column
Next, you can easily select the content for each column by assigning any module
- Click the icon Column's Setting, Choose desired position from the drop-down selection in Position Field.
- In this setting tab, you can also change the width of column by selecting span (1-12) from Width field and style for it.
Config Responsive Layout
This part allows you to enable the responsive functionality to respond to the different devices it's on.
- In Column's Setings/ Row's Settings tab, click the Responsive configuration.
- Select responsive layout to config and enable it.
Global, Fonts, and Advanced Settings
Built in new Zo2 Framework, ZT Leena provides you a various of settings:
Global Settings: The Global Setting brings you the ability to configure for Theme and Layout. This allows to change logo type, select layout type as responsive or fixed width. Also there are many more options like copyright text, enable or disable several options like joomla credit link and go to top link.
The Font Settings: provides the ability to change the font size as well as the font type used in the template. Many popular web fonts are included as options and some templates also include additional custom font options.
Advanced Settings: show up with social media channels (Google+, Facebook, Twitter,Pinterest...) to your visitors, and automatically add Google authorship and publishership as well as.
All advanced settings for connecting your site to social networking are available in
Please click here to see the setting for each section.
Typography and Short Code
We carefully handcrafted this joomla template with a strong focus on typography, usability and overall user-experience. ZT Leena delivers the shortcodes you need in spades, letting you quickly and easily put together great content and sharp layouts.
Please view all typography embed in ZT Leena.
Shortcodes Buttons built in Editor
Please view all Shortcode embed in ZT Leena.
Frequently Asked Questions
How can I change my Joomla site favicon?
You can upload your
favicon.icointo the main folders of your front-end and back-end templates, which are found in the \zt_leena\images folders respectively, overwriting favicon file that came with your templates.
Or You can attact a favorite icon to display in the top left hand area of the browser.
To upload a favicon to your Joomla site, in
Template manager => open Zo2_leena template =>
General tab >
Favicon option, just click the
See more about how to change the favicon, please refer to this link: http://docs.zo2framework.org/post/settings#1-2-favicon
How do I change my site’s name?
- In your Administrator, navigate to
Global Configuration=> Locate
Site Nametab and change your site's name.
How to install and change languages in my Joomla site?
Installing a new language in Joomla 3.x is much easier than changing languages in Joomla 2.5. This is because of the new Install Language Tool from Joomla 3.x , which allows you to install new languages without manually needing to find and download them from other sites on the web.
- In the top menu of you Administraton Panel, click
- Click the
Install Languagebutton towards the top of the page.
- Here, you can find the language you want to install using Search box or by browsing through the list of available languages. When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the
Installbutton in the Joomla toolbar.
- When the language has been installed correctly, You should see a similar message:
- Now, the new language is showed in the list. To make this language as the default, in the top menu, go to
Language Managerand click the star icon next to selected language, then go to the frontend to see the changes.
We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.
All feedback will be taken seriously and treated confidentially.