Version 1.0.1 released , Apr 27, 2015 & Upgrade to ZO2 Framework v1.4.4
If you are looking for a template which is adventurous as well as unique, ZT Retro is surely a good choice for you. ZooTemplate is glad to introduce to you our amazing new product – ZT Retro – lauching as a gift to thank you for your care and support us for a long time. It belongs to the Premium Joomla Templates and moreover, ZT Retro’s layout is crisp, clean and corporate great for business website but also will work for any corporate style website. ZT Retro is now compatible with Joomla 3.x & Zo2Framework 1.4.4.
Last but not least, we greatly appreciate your feedback from you to make this documentation improved. If you have any further question, please kindly contact to us via our Helpdesk. Our smart and flexible staffs are always ready to help you. So, feel free to be servered with best quality!
1. Help & Support
1. 1. Reference
You may find these sites useful while installing and configuring your Joomla site!:
1. 1. 1. Joomla installation
- 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
1. 1. 2. Joomla help
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 Retrohttp://demo.zootemplate.com/#zt-retro
- Online Userguidehttp://docs.zootemplate.com/
- Joomla Fanpageshttps://www.facebook.com/zootemplatehttps://twitter.com/zootemplates
All of our items come with free support, and we have a dedicated support system to handle your requests. Support is limited to questions regarding the template’s features or problems with the template. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your template then you should enlist the help of a developer.
To submit a Ticket always remember:
- Include as many information as possible to explain your issue.
- Your URL.
- Name of the Template.
- Your Joomla version.
- If you installed extensions, specify which are these.
(We reserve the right to change or modify current Support Policy with no prior notice.)
1. 2. Zootemplate policy
1. 2. 1. 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.
1. 2. 2. Ownership
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.
1. 2. 3. Refund Policy
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.
1. 2. 4. Delivery
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.
1. 2. 5. Unauthorized Use
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.
1. 2. 6. Modifications
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.
1. 2. 7. 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.
1. 2. 8. Third-party extensions
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 Four conflicting template files into Four template file.
1. 2. 9. Support
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 Retro:
2. 1. Quickstart installation
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.
2. 2. Separate Template Installation
To install ZT Retro you only need to take a few quick steps:
2. 2. 1. Package Browser
- In Joomla administration go to menu
Extension Manager> then select
Browsebutton and localte ZT Retro files.
2. 2. 2. ZT Retro Installation
You have 2 options A or B to install the ZT Retro:
- A. Option 1:
zo2_plugin_installer.zip. After that click on button Upload &Install.
zo2_retro_combo_installer.zip. After that click on button Upload &Install.
- B. Option 2:
zo2_retro_template_installer.zip. After that click on button Upload &Install.
2. 2. 3. ZT Retro Configuration
- Go to Back-end => Extensions => Plugin Manager => Use the Filter to search for Zo2 Framework and enable it.
- Once ZT Retro 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_retro – Default => Click on the star icon next to it.
3. 1. ZT Slideshow
ZT Slideshow 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 Slideshow can be found in ZT Slideshow Configuration Manual.
3. 2. ZT Language Switcher
ZT Language Switcher is a lightweight but powerful Joomla extension, developed by a group of enthusiastics programmers and developers of Zootemplate.com. We thought the standard Joomla language switcher could use a small face lift and we created a simple module, which can help you to set up and run within seconds. Our ZT Language Switcher shows the language flags in a nice elegant dropdown.
A more detailed instruction about how to edit and configure ZT Language Switcher found in ZT Language Switcher Module Configuration Manual.
3. 3. ZT Custom HTML
We use many custom HTML modules in our ZT Retro demo for layout and concept. You can replace the content of the same to your taste or replace them with other modules.
If you are not sure how to use Custom HTML Modules or accessing HTML Editor view. Read this Guide.
We will provide you with the HTML Code (markup) for reference below, you will need to replicate exactly and then change your content. Remember HTML code has special
div classes, which are required for demo alike display.
3. 3. 1. 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.
You can found all settings of these custom HTML modules in
Module Manager. 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.
3. 3. 2. History
Module type: Custom HTML
Module position: position-19
Enter the following in the Custom Output text editor:
<div class="history" data-scroll-reveal="enter bottom and move 150px over 0.9s" data-scroll-reveal-initialized="true"> <h2><span>History</span></h2> <p class="line-title"> </p> <h3><span>WE ARE ORETRO</span></h3> <p>We love what we create. Whether it’s a new brand identity, advertising campaign, or interactive strategy, our process-driven team analyzes every project with a fresh perspective to achieve the most compelling solutions.As we approach our 30th year, we invite you to create with us. Let our team be the edge you need to move your brand forward.</p> <p class="our-work"><a href="#">OUR WORK</a></p> </div>
3. 3. 3. Design
Module type: Custom HTML
Module position: position-3
Enter the following in the Custom Output text editor:
<div class="design" data-scroll-reveal="enter bottom and move 150px over 0.8s" data-scroll-reveal-initialized="true"> <div class="icon"> </div> <div class="text"> <h3>DESIGN</h3> <p class="line"> </p> <p>Mauris non sem feugiat dui bibendum suscipit. Aliquam dignissim euismod pede. Sed id Sed sollicitudin felis noln sapien. Sed noln tortor.Class Donec scelerisque.Congue ac ipsum. Phasellus nelc metus. Fusce sit amet lacus molestie</p> </div> </div>
3. 3. 4. Developer
Module type: Custom HTML
Module position: position-4
Enter the following in the Custom Output text editor:
<div class="developer" data-scroll-reveal="enter bottom and move 150px over 1.1s" data-scroll-reveal-initialized="true"> <div class="icon"> </div> <div class="text"> <h3>DEVELOPER</h3> <p class="line"> </p> <p>Mauris non sem feugiat dui bibendum suscipit. Aliquam dignissim euismod pede. Sed id Sed sollicitudin felis noln sapien. Sed noln tortor.Class Donec scelerisque.Congue ac ipsum. Phasellus nelc metus. Fusce sit amet lacus molestie massa volutpat.</p> </div> </div>
3. 3. 5. Marketing
Module type: Custom HTML
Muple position: position-5
Enter the following in the Custom Output text editor:
<div class="maketting" data-scroll-reveal="enter bottom and move 150px over 1.5s" data-scroll-reveal-initialized="true"> <div class="icon"> </div> <div class="text"> <h3>MARKETING</h3> <p class="line"> </p> <p>Mauris non sem feugiat dui bibendum suscipit. Aliquam dignissim euismod pede. Sed id Sed sollicitudin felis noln sapien. Sed noln tortor.Class Donec scelerisque.Congue ac ipsum. Phasellus nelc metus. Fusce sit amet lacus molestie</p> </div> </div>
3. 3. 6. Our team
Module type: Custom HTML
Module position: position-15
Enter the following in the Custom Output text editor:
<div class="about_3 row"> <h3><span>OUR TEAM</span></h3> <p class="line-title"> </p> <div class="col-md-3 col-sm-6" data-scroll-reveal-initialized="true" data-scroll-reveal="enter bottom and move 150px over 0.8s"> <div class="item"> <p class="images"><img src="images/article/our_team_a.jpg" alt="" /></p> <div class="content"> <h5 class="q_team_name"><span>THOMSOON</span></h5> <p class="line"> </p> <p>Front-end developer, UI/Web designer and video producer</p> <div class="icon"> </div> </div> </div> </div> <div class="col-md-3 col-sm-6" data-scroll-reveal-initialized="true" data-scroll-reveal="enter bottom and move 150px over 1.1s"> <div class="item"> <p class="images"><img src="images/article/our_team_b.jpg" alt="" /></p> <div class="content"> <h5 class="q_team_name"><span>JONE DOE</span></h5> <p class="line"> </p> <p>Developer, UI/Web designer and Motion Graphic</p> <div class="icon"> </div> </div> </div> </div> <div class="col-md-3 col-sm-6" data-scroll-reveal-initialized="true" data-scroll-reveal="enter bottom and move 150px over 1.4s"> <div class="item"> <p class="images"><img src="images/article/our_team_c.jpg" alt="" /></p> <div class="content"> <h5 class="q_team_name"><span>ROBERT SMITH</span></h5> <p class="line"> </p> <p>3D Max, Maya, UI/Web designer and video producer</p> <div class="icon"> </div> </div> </div> </div> <div class="col-md-3 col-sm-6" data-scroll-reveal-initialized="true" data-scroll-reveal="enter bottom and move 150px over 1.7s"> <div class="item"> <p class="add-avata"><img src="images/article/our_team_d.jpg" alt="" /></p> <div class="content"> <h5 class="q_team_name"><span>JOIN NOW</span></h5> <p class="line"> </p> <p class="add"> </p> </div> </div> </div> </div>
3. 3. 7. Pricing home
Module type: Custom HTML
Module position: position-15
Enter the following in the Custom Output text editor:
<div class="col-md-4 col-sm-4" data-scroll-reveal="enter bottom and move 150px over 0.9s" data-scroll-reveal-initialized="true"> <div class="pricing"> <p> </p> <h4>Basic</h4> <h3>$11.99<span>Monthly ( Based on 1 yr )</span></h3> <ul class="plan plan-details"> <li>2 domains</li> <li>20GB space</li> <li>10TB Transfer</li> <li>25 adDress e-mail</li> </ul> <p class="sing-up"><a href="#">sign up</a></p> </div> </div> <div class="col-md-4 col-sm-4" data-scroll-reveal="enter bottom and move 150px over 1.2s" data-scroll-reveal-initialized="true"> <div class="pricing"> <p> </p> <h4>Standard</h4> <h3>$33.99<span>Monthly ( Based on 1 yr )</span></h3> <ul class="plan plan-details"> <li>4 domains</li> <li>40GB space</li> <li>20TB Transfer</li> <li>50 adDress e-mail</li> </ul> <p class="sing-up"><a href="#">sign up</a></p> </div> </div> <div class="col-md-4 col-sm-4" data-scroll-reveal="enter bottom and move 150px over 1.5s" data-scroll-reveal-initialized="true"> <div class="pricing"> <p> </p> <h4>Premium</h4> <h3>$66.99<span>Monthly ( Based on 1 yr )</span></h3> <ul class="plan plan-details"> <li>8 domains</li> <li>80GB space</li> <li>80TB Transfer</li> <li>80 adDress e-mail</li> </ul> <p class="sing-up"><a href="#">sign up</a></p> </div> </div>
3. 4. Search
This Module displays a Search entry field where the user can type in a phrase and press ‘Enter’ to search the web site.
Module type: Search
Module position: search
Module Suffix: NOT USED
To ‘add’ a new Search module or ‘edit’ an existing Search module, navigate to the Module Manager:
- Click the
Newbutton and click on Search in the modal popup window.
To ‘Edit’ an existing Search module, in the
Module Manager, click on the Search Module’s Title or click the Search module’s check box and then click the
Edit button in the Toolbar.
How to config Search Module: You can find here some required infomation about configuring Search Module:
3. 4. 1. Details
- Title: Module must have a title
This module will display a search box.
- Box Label: The text that appears in the label of search box. If left blank, it will load ‘label’ string from your language file.
- Box Width: Size of the search text box in characters
- Box Text: The text that appears in the search text box. If left blank, it will load ‘searchbox’ string from your language file.
- Search Button: (Yes/No). Display a Search Button
- Button Position: (Right/Left/Top/Bottom). Position of the button relative to the search box.
- Search Button Image: (Yes/No). Use an image as button. This image has to be named searchButton.gif and must be located in templates/your template name/images/
- Button Text: The text that appears in the search button. If left blank, it will load the ‘searchbutton’ string from your language file.
- OpenSearch autodiscovery: (Yes/No). Some Browsers can add support for your site’s search if this option is enabled.
- OpenSearch title: Text displayed in supported Browsers when adding your site as a search provider.
- Set ItemID: (Select a menu item/Getting Started/Using Joomla!/Using Extensions/Components/Content Component/…). Assign an ItemID by selecting a menu item in the list for the display of the search results if there is no com_search menu and a specific display is desired. If you do not know what this means, you may not need it.
3. 4. 2. Common Details
- Title: The title of the module. This is also the title displayed in the front end for the module depending on the Show Title Form Field
- Show Title: (Show/Hide) Choose whether to show or hide the modules title in the front end. The title will be the Four in the Form Field above.
- Module Position: Choose the module position you wish this module to be displayed in. A custom module position can be entered for use with the load position plugin or the position button can be pressed to select a module position from the template.
- Status: (Published/Unpublished/Trashed) The published status of the item.
- Access: The viewing level access for this item.
- Module Ordering: This shows a drop down of every module in the position that the current module is in. This is the order that the modules will display in when displayed on in the front end as well as in the Module Manager.
- Start Publishing: Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.
- Finish Publishing: Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).
- Language: Item language.
- Note: Item note. This is normally for the site administrator’s use (for example, to document information about this item) and does not show in the front end of the site.
3. 5. ZT Portfolio
Module type: ZT Portfollio
Muple position: position-6
ZT is a Joomla! portfolio component designed to enable you to arrange your projects and present your works for the visitors of your site beautifully. This awesome module is responsive and seo optimized, easy to use and totally compatible with Joomla 2.5.x and 3.x.
3. 5. 1. Download & Install
- Zootemplate provide free ZT Porfolio module on our free Joomla downloads section . Click the Download button to start the download.
- In Admin area, click on
Extension Manager> In the
Upload & InstallJoomla Extension, click
Browsethen find the file you just download in step above. After you have selected this file, click the
Upload and Instalbutton.
3. 5. 2. How to Configure
- For this latest awesome portfolio, users have to create a new category.
- Then create some new article’s for the portfolio under this category.
3. 5. 3. Portfolio Settings
From here, users will be able to add new portfolio item, select the images for this portfolio.
Module Manager >
Add new Porfolio Item:
If this is your first portfolio, you’ll see a empty list, otherwise, you’ll see a list of existing Portfolios.
To create a new Portfolio, click on
ADD ITEMS , now the Portfolio creation view opens, and you can configure your Portfolio.
- Title: Add title to portfolio items
- Caption: You can add “caption” to each of your portfolio images
- Link: Include a link to your portfolio article
- Group: Which category your portfolio article is located in.
3. 6. Module ZT Parallax
Module type: ZT Parallax
Muple position: position-13
This module is a great solution to help your items are presented with the most striking way. It is designed full width slideshow along with beautiful parallax effect. You can choose any image ((Maximum Size: 10 MB) as background for your Parallax Module. This module is built 100% responsive and ready to display on any table and mobile devices.
3. 6. 1. Download & Install Module
Installing ZT Parallax takes just a matter of few minutes.
- The first thing you’ll need to do is download the latest version of this module from our Download Center. The package you will download, is compatible with both Joomla 2.5.x and Joomla 3.x. It does not need to be uncompressed.
- In the top menu, hover over
Extensionsand then select
Extension Manager> install this module as usual.
3. 6. 2. How to use it
ZT Parallax is a highly configurable module that allows you to control the various aspects of its appearance and functions. Please follow these steps to configure and use your new Weather module effectively: At this point we have installed a ZT Parallax module, however by default new modules are not enabled, so we’ll now enable the module. Remember to publish this module and assign it to a visible module position.
Some important settings of this module are listed specifically below:
3. 6. 2. 1. Add a Parallax Background:
- Choose a background for your parallax of your site by clicking `Background Type` in the Site Admin then one of the following tabs: - Custom Background - Upload your own custom Photo or use a Video from Vimeo. - Background Image - Choose from a gallery of images. - Background Vimeo/Youtube - put a video from Vimeo or Youtube as the background
- Custom Background
You can set your Custom Background by selecting the
Custom option from dropdown list. Then configure the settings discussed below:
MP4 Video and Video Webm fomat supported!
- Image Background: The Parallax Module offers the background Images option for your background to choose from. Choose one of the Images from media library or upload an image by following these steps:
- Vimeo/Youtube Background: Parallax module supports to turn videos on YouTube or Vimeo into beautiful full-screen backgrounds.
- If your background type is Vimeo:
Vimeo ID: All the vimeo video urls I see are always:
http://vimeo.com/50834315. Get Vimeo id from a vimeo url and insert into this field.
Ratio video: video aspect ratio with parent div
- If your background type is Youtube:
3. 6. 2. 2. Add Parallax Content
This is the back-end screen where you can add and edit Parallax content.
You should now be on the content editor screen. We can entere some sample text or even insert an image into the intro text area.
NOTE: Remember to always turn off Toggle Editor when you want to edit HTML in the content section. Otherwise Toggle Editor can break your content.
3. 7. Testimonials
Module type: ZT Testimonials
Module position: position-17
ZT Testimonial is an easy to use joomla modules that allows you to easily gather and display testimonials on your website in any module position and on an individual page. The testimonials can be fade or slide depending upon the configuration that has been set in the back end of the module parameters.
3. 7. 1. Key features
- Manage the testimonials : Add, Edit, Order, Delete, Publish and Unpublish
- Admin interface to add, edit and manage testimonials
- Fields for source, testimonial, avatar, title, position, email and URL details
3. 7. 2. Manage Testimonials
- Add your testimonial content in testimonial field.
- Enter your name, email, link name (link to your name), link avatar (link to your avatar) and position into the text boxed provided.
- Add an image of yourself or upload your own Avatar image by clicking the Select Avatar button.
3. 7. 3. Menu Assignment
- Select which pages you want to show the module on. – Choose On all Pages, No Pages, Only on the pages selected, or On all pages except those selected.
3. 7. 4. General Settings
- Name: Select to show or hide author’s name
- Email: Option to show/hide author’s email
- Avatar: Show/Hide option for Avatar
- Position: Show or not author’s position
- Style Testimonial: There are two testimonial styles Default or About us
- Auto: Slides will automatically transition
- Pause: The amount of time (in ms) between each auto transition
- Auto Hover: Auto – running slideshow will be paused while the mouse is over the slider.
- Arrow Setting: Have or not “previous” and “ next” arrows on the testimonial slideshow.
- Indicators Bar: Show or hide indicator bar
3. 8. ZT Logo Brand
ZT Logo brand lets you display your brands in a more useful way. With this module, you can upload different logos for each languages defined in your site and simply insert your brand logos, colours,…
Each Brand is a simple inside a link. You can see the configuration of Brands in
Module Manager >
ZT Logo Brand:
Here are some params & section you need to remember:
- Width/Height Items allows you to adjust size of brand’s logos displayed on site
- Show items the number of item you allows to be displayed on site
- Select Image the images of brands you want to show on site
- Insert link for each brand image. Beside, you can change another brand image by clicking the
3. 9. Our Services/ ZT News
Module type: ZT News
Module position: position-23
ZT News module from Zootemplate module allows you display previews of articles on the Joomla front page. ZT News will list all articles within a section, grouped by categories. With this module you can easy to configure the number of column, more links and intro news with or without thumbnail.
3. 9. 1. Download & Installation
- Now,Downloaded the latest version of ZT News module.
- After successfully downloaded the package, Log into the administration area, navigate to
Browsethe package file and finally, click
Upload & Install.
3. 9. 2. Enable the module
After successful installation, go to
Module Manager, you will see a list of modules, click on ZT News to access to module manager page.
To make sure the module display in front-end, at least you have to go through three fields:
- Publish the module
- Select a position for module
3. 9. 3. Module Config
You can use this extension in order to show articles from your favorite categories grouped in a very nice section of the front-end. After Installing module we will get the following setting scene:
3. 9. 3. 1. Data Source
- The module supports 2 content types: Joomla content or K2 content. Select one of those content types from
Source Fromdropdown list then select one or many categories that the module will display articles from.
3. 9. 3. 2. Article Layout
From this setting option you will be able to fix your feature layout.
The module supports 3 layouts:
Each layout has a totally different way to display your article list. Each layout also has a different back-end configuration.
3. 9. 3. 3. Menu Assignment
Publish module at the pages you want.
3. 9. 3. 4. Module permission
- Delete: (Inherited/Allowed/Denied). Allow or deny Delete for users in the Public group. Delete Allows users in the group to delete any content in this extension.
- Edit: (Inherited/Allowed/Denied). Allow or deny Edit for users in the Public group. Edit Allows users in the group to edit any content in this extension.
- Edit State: (Inherited/Allowed/Denied). Allow or deny Edit State for users in the Public group. Edit State Allows users in the group to change the state of any content in this extension.
3. 9. 3. 5. Advanced
Fix cathe Time and Catching option.
In Joomla 3 you also have Categories. Each time you create an article or other content type you can assign it to a category. Kindly refer to this documentto know about managing categories in Joomla 3.x.
3. 9. 3. 6. Background module
ZT News in each page comes with different title and background as well. The background can be an image stored anywhere in “images” folder. Follow path:
templates/zo2_four/assets/zo2/images/. And thing you need to do, is uploading the background image to
3. 10. Module ZT Contact Pro
Module type: ZT Contact Pro
Muple position: position-10
ZT Contact Pro is a lightweight, fast and easy, configuring a contact form joomla module which allows customers to contact your site administrator by e-mail very fast and secure. You can place a contact form anywhere on your joomla web page with any number of custom fields of different types, including attachments, reCaptcha. Using AJAX technology, the whole process is performed without need for page refresh, making it very quick and user friendly.
You can create unlimited number of fields. Each field can have language constant in label, tooltip and values. Also, you can remove and change their position if you want.
More details about how to use ZT Contact Pro, please follow this guide: http://docs.zootemplate.com/post/zt-contact-pro-configuration-manual
3. 11. EasyBlog Extension
Everybody loves a better blogging solution. And EasyBlog from Stackideas makes it so easy for you to start a blog in Joomla.
3. 11. 1. Download EasyBlog
- Download EasyBlog from Stackideas.com. We’ve teamed up with StackIdeas to give a massive 20% discount on EasyBlog for our existing customers.
3. 11. 2. Install EasyBlog
- Login to your Joomla back end and head on to the installation area at
- Locate for the package which you have downloaded earlier
com_easyblog_3.9.15370_paid_jx.y.zipby clicking on the
Browsebutton. Hit the
Upload File & Installbutton.
- Installation is completed now.
- You can found all settings for EasyBlog in
For detailed explanation, see Documentation from Stackideas: http://stackideas.com/docs/easyblog.
4. Mega Menu
ZO2 Framework supports Mega Menu adding lots of advanced features. This Mega Menu 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.
4. 1. General Configuration
This allows you to to config selected elements as general configuration for the MegaMenu.
- Dropdown Strigger: Select mouse event to trigger dropdown menu
- Animation: select the animation when moving menus in front-end.
- Duration: Enter time duration for show sub menu
- Menu type: Choose type menu you want to use
Please note that, the navigation settings are not general settings, that means in each style, it can have difference navigation. In each style, you can display different menus as main menu.
4. 2. Configuration Level
There are 3 level of configuration in the Mega Menu Settings, which are:
- Sub-megamenu setting
- Column setting
- Menu item setting.
4. 2. 1. Sub mega menu Setting
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
4. 2. 2. Column Setting
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
4. 2. 3. 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.
- 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
4. 3. Mega Menu Edit
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.
4. 3. 1. Build up Mega Menu
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.
4. 3. 1. 1. Add a sub menu
- 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.
4. 3. 1. 2. Add a column to sub menu
- 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.
4. 3. 1. 3. 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.
4. 3. 1. 4. Move menu items to another column
You can move a menu item to next or previous column. This option will help you to devide menu items into columns.
4. 3. 1. 5. Group submenu or not
In this step, you can set all the sub items under one parent item.
- 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.
4. 3. 2. Style and Add icon
4. 3. 2. 1. Style for Mega Menu
- 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:
Item Caption. The following image shows you how to add subtitle for a menu item.
4. 3. 2. 2. Add icon
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.
5. Layout Builders
Layout Builder is one of the unique features introduced in Zo2Framework which supports multiple layouts that allow you to make your content displayed flexibly. In the layout builder we used 12 columns. We called the columns as span. This means in our layout builder we used 12 span. This 12 span covered the whole width of our layout. If Users wants to create 4 columns then have to use span3 for every column. Also if anyone wants to create 3 columns then have use span4 for every column.
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.
You can find all Layout builder settings under Layout Builder section.
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.
5. 1. Top
In Top Section, we use 3 columns and span 4 for each column. The Columns are top-menu, search,and top-social.
5. 2. Header
Here’re 3 columns:
mega_menu (canvas menu) with span 1,
header_logo with span 3 and
mega_menu with span 8.
Layout Settings For Menu
In layout settings there is option for fixed the type by Module, Message or Components. Here is another option for select the position where to publish. From here users also able to select the span. This settings also contain Offset, Style or Custom class settings.
5. 3. Slide Section
The Slide Layout is a simple one column. And the span 12 covered the whole width of this layout.
5. 4. Feature Section
In the feature section we used the whole span. There is option available for to create more column and row.
5. 5. Breadcrumb Section
This section had only one column and it contain span12.
5. 6. zo2-message
Here we have one column, and it contains span12.
5. 7. Main Body Section
In the main body section we used 03 columns. And the columns are
The left & right contain span3 and the component area contain span6.
5. 8. News Section
In these sections we used the whole span. There is option available for to create more column and row.
5. 9. Bottom
We select the bottom area with bottom1 by one column and bottom2 by 3 columns. Every column (bottom2) contains same span and the span is span 3.
5. 10. Footer Section
This is pretty Footer one columns layout with whole span.
5. 11. How to use
5. 11. 1. Add a new row
After set up the position name and location on your template to display your new “row module” position. We will see the module position “example” how it works. Go to
Template Manager and click
Zo2_hallo > open
Layout Builder tab. Now, choose a location where you want to create a new module position. Just above the module, click the
Add new row [=][duplicate Row] icon at the top right of any existing row form. A new row will be created under.
Here we published our new position under the NEWS position. For doing that add a new row by using Add a new row option.
- Using the drag & drop option to change the order of layout. See How to move a module position to a different position
- Now give it a name by using row settings in the editor toolbar of selected row.
- Insert row name into Name Field, and select the specific device to display module
Save Changesand then, the name of row is created.
5. 11. 2. Move a module position
Modules are boxes that can be moved around on the layout screen. Drag and drop to move layout positions, is a great feature comes with Zo2Framework.
Putting a module in a different position on the page is a very simple process, which can be made from Layout Builder tab in Zo2 Hallo template settings. If you hover your mouse over the gray 4 arrow icon of a module, you’ll notice the 4 arrow cursor appears to let you know it can be moved. Start dragging the module to a new location – it may be upper and lower position. When the box is showing in the correct location, let go of the mouse button, and the module will be saved temporary in the new location.
Please don’t forget to save changed layout using
Save & Close button.
5. 11. 3. Add a new column
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 new column icon icon and a popup window will appear like below on the created row header.
- Now, open Layout Builder tab from Template Manager. Here we added our new column under the NEWS module. For doing that add a new row by using Add a new column option.
- In the param “Column Width” , you can change the width of each column.
You can drag & drop to change the position of columns in a line as well.
Module/Components/Message/ or Menu positions also can be responsive. Click on column setting icon to open Responsive tab and Select the devices you want to show or hide. Click apply and save your settings.
5. 11. 4. Assign a new 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.
- After clicking on this icon you will found option for select the position name. Here we select our new created position named newposition. Then click on
Then save this by clicking on the save button on top left. Now your new position added on the layout builder. You can use this position on this template now.
A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and use them to any different theme. This allows you to load different theme settings on different pages.
New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.
Now, in your Joomla backend, select
Template manager >
zo2_hallo - Default to get started with new Profile function of Zo2 Framework. “Profile” tab is underneath the Menu Bar of Zo2 settings
6. 1. The default Profile
In the general theme settings you find a parameter called
Default Profile. Here you choose the profile which will be
loaded on all your pages. By default it is set to the profile called
Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here. Zo2 will load your new profile automatically. For each profile, you will be required to create a new template that are to apply the new added profile. We are going to present “How to create a new template” in the last of this section.
6. 2. Profile Variations
Other profiles can only override some settings defined within the default profile. This profile will only override the default theme used by the template with the orange theme, so as you can see, there is no need to repeat the entire profile code if the other settings are not changed.
6. 3. Step 1: Create a new profile
New profiles can be created in the profile theme settings by clicking the
Save As button which is available right next to the “profile dropdown” list”.
The first time you click the button, a window will appear allowing you to create a new profile.
- Now just need to enter a name for your new profile and “Save” it.
Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.
6. 4. Step 2: Create new templates for new profile
Each style includes its own theme, layout, logo, navigation … When creating new style, you can configure those things and override the default style. To do that, first create new template by duplicating your current defaut template.
- Go to
Template Manager> Duplicate your current default template
- When new template created, open it and choose your desired profile to use.
6. 5. Step 3: Create different layouts for new profile
As said before, new profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. Now of course this is right for Layout Builder settings.
You can refer the guide to use Layout Builder on this same documentation system in purpose of adding or editing your new profile’s layout builder.
6. 6. Step 4: Custom Style for new profile
Profile option from Zo2 Framework is very useful allowing you to create preset styles and customization. With Preset Style, you can assign a certain style to your theme or change the preset style such as Background, Header, Text, Link…
To select a preset style and create your desired style, in your new Layout Profiles tab, please scroll down the page you’ll see Style section.
This more detailed tutorial to custom style will cover this topic in depth.
6. 7. Step 5: Assign any template to any menu item
Assign any template (also duplicated templates) to any menu item directly from your theme configuration with just a few clicks.
6. 8. Final Step
After all the changes with the new profile, one very important action you have to take, is clicking the
Save button to apply all to your Joomla site.
7. Fonts, Theme Preset and Advanced Settings
Built in new Zo2 Framework, ZT Cena provides you a various of settings:
- General Settings: These are the general options for the templates
- 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.
- Theme Preset: The Presets Style Panel in ZO2 Framework makes use of a powerful Preset system that allows you to create preset styles and customization.
- Advanced Settings: show up with many advanced options related to RTL, sticky menu, responsive layout, switcher box, custom css, tracking code and developer options.
Please visit to our Zo2 Framework document site to see the setting for each section.
8. Typography and Short Code
We carefully handcrafted this joomla template with a strong focus on typography, usability and overall user-experience. ZT Cena 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 Cena.
Shortcodes Buttons built in Editor
Please view all Shortcode embed in ZT Cena.
9. Frequently Asked Questions
9. 1. How can I change my Joomla site favicon?
- The way to upload a favicon to your Joomla site is presented here: http://docs.zootemplate.com/post/changing-the-site-favicon
9. 2. How to change browser page title?
- Simply, just refer this guide to know to to change Browser/Homepage/Site’s Title.
9. 3. How to create multiple languages in this template?
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.
You can see the detailed tutorial to create multiple languages in this 3.x template in our document system.
9. 4. How to edit CSS of the Template?
There are 2 ways to edit css of the template:
- Every Zo2 Framework’s template is packed with a handful of stylesheets in the form of LESS file. So you should follow this guidehttp://docs.zo2framework.org/post/customize#2-custom-styles
- Since Zo2Framework version 1.3.1 we added an option called Load Profile [Custom CSS]: if enabled, custom.css file (in which you can override the default styling of the template) will be loaded in the frontend.
This might be useful when you want to make some changes in the template design. All the CSS placed in this file will not be lost after upgrading the template.
10. Support Us
Thank you for reading!
We hope you can create the best website with our template.
Four again, thank you so much for using our template. As i said at the beginning, i’d be glad to help you if you have any questions relating to this template. No guarantees, but i’ll do my best to assist. If you have a more general question relating to the template.
Do not hesitant to contact us by submiting ticket via our helpdesk – http://member.zootemplate.com/helpdesk.
Please take a screenshot photo with descriptions about your problem. More details about your problems help us more easier to figure out and respond you sooner.
- Scope of Support:
Our support covers getting setup, trouble using any features and any bug fixes that may arise. Unfortunately we cannot provide support for customizations or 3rd party plugins. If you need help with customizations of your template, please contact with us with your requirement. Our technical team will help you with some fees.
- Support Schedule:
Our working time is 8:00am – 5:00pm from Monday to Friday (GMT+7) and 8:00am- 11:30am Saturday. So if you email us or submit ticket besides this working time, we are really sorry that we are not able to respond you soon. We will try to reply you as fast as we can. Especially if you email or submit ticket at weekend, please be patient and we will respond to you right when we are back on Monday.