Introduction


Current Version 1.0.0 (June 05, 2014)

Zootemplate now has ZT Charity- one of the powerful Joomla Templates with the extended styles for many popular extensions: EasyBlog, ZT Layer Slider, ZT News and other installed powerful modules.

We want to give a huge thank you for purchasing this Joomla Template. We greatly appreciate your feedback from you on how, if anywhere, you would like this documentation improved. If you have any further question, please kindly contact to us via our Helpdesk.

Help & Support


References


You may find these sites useful while installing and configuring your Joomla site!:

Joomla installation


Joomla help


Online Joomla guide

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:

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.

  • Screenshots (you can use this tool: http://pen.apl.vn)

  • If you installed extensions, specify which are these.

(We reserve the right to change or modify current Support Policy with no prior notice.)

Zootemplate policy


ZooTemplate hereby grants you a revocable, non-transferable and non-exclusive license to use the web extensions and other products sold through our web site by ZooTemplate (the “products”) in accordance with these Terms of Use (the “license”) issued by ZooTemplate.

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.

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.

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.

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.

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.

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.

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.

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 two conflicting template files into one template file.

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.

Installation


There are 2 methods of installing the ZT Charity:

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.

Separate Template Installation


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

Package Browser


  • In Joomla administration go to menu Extensions > Extension Manager > then select Browse button and localte ZT Charity files.

ZT Charity Installation


You have 2 options A or B to install the ZT Charity :

  • A. Option 1:

    Step 1: Install plg_system_zo2_vX.Y.Z.zip. After that click on button Upload &Install.

    Step 2. Install template_zo2_charity_vX.Y.Z.zip. After that click on button Upload &Install.

Note: X.Y.Z is template/extension version you have

  • B. Option 2:

    Install package_zo2_charity.x_vX.Y.Z.zip. After that click on button Upload &Install.

install_temp

ZT Charity Configuration


  • Go to Back-end > Extensions > Plugin Manager > Use the Filter to search for Zo2 Framework and enable it.

enable_plugin

  • Once ZT Charity 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 Extensions > Template Manager > Zo2_charity - Default > Click on the star icon next to it.

template_manager_

Configuration


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.

  • Login to our download website and download ZT Layer Slider module

  • In Joomla administration go to menu Extensions => Extension Manager => then select Choosefile button and select Layer Slider file you just downloaded. After that click the Upload & Install button.

slider

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 Extensions => Modules Manager > Publish the ZT Layer Slider module that was installed. Enable the ZT Layer Slider Plugin in Plugin Manager.

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.

manage_slider

Note: For more information about module usage, please see the Extensions Usage Guide.

ZT Custom HTML


We use many custom HTML modules in our ZT Charity 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.

Create and configure custome HTML Module


  • To create this module, go to backend: Extensions => Module Manager => New => You'll see a list of available modules. Select type as Custom HTML and begin editing the module.

edit_new_module

  • To Edit an existing Custom HTML module, in the Module Manager click on an Custom HTML Modules Title or click the Custom HTML modules check box and then click the Edit button in the Toolbar.

edit_module

  • Click the Save button 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.

Adoption


  1. Module type: Custom HTML

  2. Module position: position-tab

adoption

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/tab1.png" alt="" />
<h1>WE CAN CHANGE</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

html_config

  • Menu Assignment: This is where you choose when this module will be displayed. All, None, Selected Menu Item(s)

menu_assignment

  • Module Permissions: Allows you to manage the permission settings for the user groups

module_permission

  • Options:

options

  • Advanced:

advanced

Note: You can set the configuration for other modules in this section by the same way as above.

Children In Care


  1. Module type: Custom HTML

  2. Module position: position-tab

children_in_care

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/block1.png" alt="" />
<h1>chiildren in care</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

Disable Children


  1. Module type: Custom HTML

  2. Module position: position-tab

disable_children

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/c1011ef61ed9937904f4938c63d014ea_M.jpg" alt="" />
<h1>Disabled children</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

Young People


  1. Module type: Custom HTML

  2. Module position: position-tab

young_people

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/fd8b0f77d767f1f6640afba6916ff67c_XL.jpg" alt="" />
<h1>young people</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

Family Support


  1. Module type: Custom HTML

  2. Module position: position-tab

family_support

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/tab1.png" alt="" />
<h1>WE CAN CHANGE</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

Our School


  1. Module type: Custom HTML

  2. Module position: position-tab

our school

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/fc34f61d23b74be53ee07d469bd32064_XL.jpg" alt="" />
<h1>our schools</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>

Our Approach


  1. Module type: Custom HTML

  2. Module position: position-tab

our_approach

Custom Output:

Enter the following in the Custom Output text editor:


<div class="adpption"><img src="images/fc34f61d23b74be53ee07d469bd32064_XL.jpg" alt="" />
<h1>our approach</h1>
<h3>THE LIFE OF THOSE, WHO HAVE NO HOPE!</h3>
<p>Sed luctus, nisl a venenatis ultrices, augue lacus aliquet justo, non aliquam lacus ligula nec nisl. In consectetur, turpis quis fermentum suscipit, neque elit pulvinar ipsum, vestibulum luctus </p>
</div>>
</div>

content main-1


1.Module type: Custom HTML

2.Module position: zt-position-1

html_2

Custom Output:

Enter the following in the Custom Output text editor:


<div class="content-donate wow fadeInUp">
<div class="donate-left">IN THE PAST YEAR, KINDNESS SUPPORTED PROGRAMS THAT SERVED OVER <span>700,000</span> CHILDREN IN <span>23 COUNTRIES</span>.</div>
<div class="donate-right"><a href="#">DONATE NOW!</a></div>
</div>

Header Right


1.Module type: Custom HTML

2.Module position: header_right

header

Custom Output:

Enter the following in the Custom Output text editor:


<div class="header-right">
<p class="address"><span class="fa fa-map-marker"><span class="link-text">169 Building, Nguyen Ngoc Vu Street, Hanoi, Vietnam</span></span></p>
<p class="phone"><span class="fa fa-phone"><span class="link-text">+84-462 818 296</span></span></p>
<p class="email"><span class="fa fa-envelope-o"><span class="link-text">demo@zoodemo.com </span></span></p>
</div>

265 MILLION


1.Module type: Custom HTML

2.Module position: zt-position-2

256

Custom Output:

Enter the following in the Custom Output text editor:


<div class="who-we wow fadeInLeft">
<div class="icon"><i class="fa fa-users"></i></div>
<div class="content-text">
<h3><span>265 million</span></h3>
<p>people protected against river blindness. </p>
</div>
</div>

5.9 MILLION


1.Module type: Custom HTML

2.Module position: zt-position-3

59

Custom Output:

Enter the following in the Custom Output text editor:


<div class="who-we wow fadeInUp">
<div class="icon"><i class="fa fa-heart-o"></i></div>
<div class="content-text">
<h3><span>5.9 million</span></h3>
<p>sight-restoring cataract operations. </p>
</div>
</div>

33 MILLION


1.Module type: Custom HTML

2.Module position: zt-position-4

33

Custom Output:

Enter the following in the Custom Output text editor:


<div class="who-we wow fadeInRight">
<div class="icon"><i class="fa fa-stethoscope"></i></div>
<div class="content-text">
<h3><span>33 million</span></h3>
<p>sight-restoring cataract operations. </p>
</div>
</div>

Follow Us


  1. Module type: Custom HTML

  2. Module position: zt-position-5

html_1

Custom Output;

Enter the following in the Custom Output text editor:


<h3 class="moduletitle">World Charity</h3>
<div class="modulecontent">
<p><i class="fa fa-map-marker"></i><span>169 Building, Nguyen Ngoc Vu Street, Hanoi, Vietnam</span></p>
<p><i class="fa fa-phone"></i><span>by phone:<b> +84-462 818 296</b></span></p>
<p><i class="fa fa-envelope-o"></i><span>by e-mail:<a href="worldcharity@mail.com"> worldcharity@mail.com</a></span></p>
<p><i class="fa fa-building"></i><span>or <a href="#">fill in the form</a> on our contact page</span></p>
</div>

Flickr Widget

  1. Module type: Custom HTML

  2. Module position: zt-position-6

html_6

Custom Output;

Enter the following in the Custom Output text editor:


[lightbox src={images/flick10.jpg} width={113} height={77}]{content}[/lightbox]
[lightbox src={images/flick11.jpg} width={113} height={77}]{content}[/lightbox]
[lightbox src={images/flick12.jpg} width={113} height={77}]{content}[/lightbox]
[lightbox src={images/children.jpg} width={113} height={77}]{content}[/lightbox]
[lightbox src={images/flick14.jpg} width={113} height={77}]{content}[/lightbox]
[lightbox src={images/flick15.jpg} width={113} height={77}]{content}[/lightbox]

Join our Newsletter


  1. Module type: Custom HTML

  2. Module position: zt-position-7

html_7

Custom Output;

Enter the following in the Custom Output text editor:


<div class="moduletable newsleter">
<h3 class="moduletitle">Join our Newsletter</h3>
<div class="modulecontent">
<p class="zt-title">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam id enim egestas, congue est id, hendrerit magna.</p>
<div class="input-text">
<i class="fa fa-envelope-o"></i>
<input id="email-address" class="icon-email" type="text" value="Email address..." onblur="if (this.value=='') this.value='Email address...';" onfocus="if (this.value=='Email address...') this.value='';" alt="Name" maxlength="30" size="30" name="email-address">
<span class="submit">
<button class="zt-button" type="submit">SUBSCRIBE</button>
</span >
</div>
<div class="icon"><i class="fa fa-facebook"></i> <i class="fa fa-tumblr"></i><i class="fa fa-google-plus"></i><i class="fa fa-envelope-o"></i></div>
</div>

Note: It's a custom HTML module, just for demo purpose. SO if you are looking for newsletter extension then go here http://extensions.joomla.org/search?q=newsletter

Featured Article


feature_article12

Featured Articles allows you to edit some articles marked in your site as Featured.

  • First, you need to mark some articles in your site as Featured go to Content => Article Manager. Here, you will see a list of your articles. Note that there is a star next to each article. To mark an article as Featured, simply press the star next to it. It will turn yellow, indicating that you've marked this article as featured.

feature_article

  • By default Joomla 3.x will show the entire text of each featured article on the Featured Articles page. However, this is not very convenient when you have articles with different length. You can choose how much of each featured article to be shown on this page using the Read More feature in your articles manager.

To do that open the article in the Article editor, click where you want to split the article and press the Read More button right below your WYSIWYG editor. A dotted red line will be displayed, separating your article intro from the rest of the article content.

edit_content

HTML source:


<div class="row zt-services">
<div class="col-md-3 col-sm-3 our-misson wow fadeInLeft">
<div class="icon"><i class="fa fa-bell-o"></i></div>
<div class="module">
<h3>Our Mission</h3>
<p class="des">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
<a class="readmore" href="#">read more</a></div>
</div>
<div class="col-md-3 col-sm-3 make-donation wow fadeInLeft">
<div class="icon"><i class="fa fa-usd"></i> </div>
<div class="module">
<h3>Make Donations</h3>
<p class="des">Lorem ipsum dolor sit amet consect adipisscin elit proin vel lectus ut eta esami vera dolor sit amet consect</p>
<a class="readmore" href="#">read more</a></div>
</div>
<div class="col-md-3 col-sm-3 help-support wow fadeInRight">
<div class="icon"><i class="fa fa-bookmark-o"></i> </div>
<div class="module">
<h3>Help &amp; support</h3>
<p class="des">Praesent ultrices fermentum erat, vel fringilla urna feugiat nec. Nulla vitae lorem eget sem commodo</p>
<a class="readmore" href="#">read more</a></div>
</div>
<div class="col-md-3 col-sm-3 our-program wow fadeInRight">
<div class="icon"><i class="fa fa-umbrella"></i> </div>
<div class="module">
<h3>Our Programs</h3>
<p class="des">Etiam justo arcu, condimentum et dui sit amet, dignissim mattis erat. Aenean ornare, massa non eleifend</p>
<a class="readmore" href="#">read more</a></div>
</div>
</div>

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.


This Module displays a Search entry field where the user can type in a phrase and press 'Enter' to search the web site.

search

  1. Module type : Search
  2. Module position: search
  3. Module Suffix : NOT USED

To 'add' a new Search module or 'edit' an existing Search module, navigate to the Module Manager:

  • Select Extensions > Module Manager

  • Click the New button 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.

module_search

How to config Search Module: You can find here some required infomation about configuring Search Module:

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.

Common Details


1

  • 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 one 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.


2

On this tab there is a list of menu items. You can choose between On All Pages, No Pages, Only on the pages selected and On all pages except those selected from the List.

If the latter two options are selected a list will show with all the menu items on as shown in the screenshot above. This allows you to assign modules to some but not all pages, and by selecting the menu links that you want the module associated with you can customize on what pages modules appear/don't appear. See How do you assign a module to specific pages? for more information

Module Permissions


3

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

Advanced


  • Alternative Layout: If you have defined one or more alternative layouts for a module either in the template or Joomla! Core, you can select the layout to use for this module.

  • Module Class Suffix: A suffix applied to the CSS class of the Module. This allows you to create customized CSS styles that will apply just to this module. You would then modify the "template.css" file of your template to apply styling to this new class.

    • Enter this parameter with a leading space to create a new CSS class for this module. Enter the parameter without a leading space to change the CSS class name for this module.

    • See the tutorial Using Class Suffixes in Joomla! for more information.

  • Caching: Use Global/No Caching. Whether or not to cache the content of this Module. A setting of "Use Global" will use the Cache Settings from the Global Configuration screen.

  • Cache Time: The length of time, in minutes, before the Module is re-cached.

  • Module Tag: The HTML tag for the module to be placed in. By default this is a div tag but other HTML5 elements can also be used.

  • Bootstrap Size: (Values 0 to 12) This allows you to choose the width of the module via the span element built into bootstrap. For more information see the bootstrap documentation.

  • Header Tag: The HTML tag to use for the modules header or title this can be either a h1-h6 tag or a p tag.

  • Header Class: Here you can add optional CSS classes to add to the modules header or title element.

  • Module Style: You can use this option to override the templates style for its position.

ZT Languages/Language Switcher


  1. Module type: Language Switcher

  2. Muple position: language

This module allows you to switch between available Content languages. Selecting a language will take you to the home page for that language.

top_language

  • To add a new Language Switcher module, navigate to the Extensions > Module Manager > click the New button > select the Language Switcher in the modal popup window.

  • To edit an existing Language Switcher module, in the Module Manager list, click on the Language Switcher Module's Title to publish and edit this module:

language_swithcer

Pre-text: This is the text or HTML that is displayed above the language switcher.

Post-text: This is the text or HTML that is displayed below the language switcher

Use Dropdown: (Yes/No). If set to 'Yes', the display parameters below will be ignored. The content languages native names will display in a dropdown.

Use Image Flags: (Yes/No). If set to 'Yes', will display language choice as image flags. Otherwise will use the content language native names.

Horizontal Display: (Yes/No). Default is set to 'Yes', i.e. to horizontal display.

Active Language: (Yes/No). Display or not the active language. If displayed, the class 'lang-active' will be added to the element.

Languages Full Names: (Yes/No). If set to 'Yes' and image flags set to 'No', full content language native names are displayed. If set to 'No', upper case abbreviations from the content language's URL Language Code are used. Example: EN for English, FR for French.

  • Common Tabs: Menu Assignment (a list of menu items. You can choose between On All Pages, No Pages, Only on the pages selected and On all pages except those selected from the List.), Module Permissions (Manage the permission settings for the user groups below. See notes at the bottom.), Advanced (The advanced module settings allow you to modify:Module tag, Bootstrap size, Header tag, Header class, Module style).

More infomation about how to create a multilingual site in Joomla 3.x, please check guide How to create a multilingual site in Joomla 3.x.

ZT Tabs


Module type: ZT Tabs

Module position: zt-position-9

"Tabs" is the 'module' adaptation of the highly popular "Tabs (for articles)" plugin created by Zootemplate. Using this module, you can display other modules in tabs. In this template, we use this module to dislay seven Custom HTML modules!

zt_tabs

Module Installation


  • Now,Downloaded the latest version of ZT News module.

  • After successfully downloaded the package, Log into the administration area, navigate to Extensions > Extension Manager, Browse the package file and finally, click Upload & Install.

Module Configuration


Note: Before configure or add popup to your content, please make sure that the plugin is published.

In the configuration panel of the module, we also provide very useful instructions that can help you to use this module effectively.

From the back-end of your Joomla site (administrator), go to: Extensions > Module Manger, then click on plugin named ZT Tabs module to go to configuration panel:

Tabs


tabs

Parameter Explanation:

  • Module Class Suffix: Input the class for each tab.

  • Type tabs: There are two types available from the list (Module/Content)

  • Select a position: Select position to display this module on the front-end

  • Select:

    • The Tabs module are configured by adding or removing the module/content using two button Add/Remove.

    • At the same time, you also change the module/content order displayed in the tabs using the up/down arrow.

content

  • Max number tabs: Input the number of tabs displayed

Content Settings


What content is valid to be displayed in tabs? The answer is: modules, and Joomla articles. So, if you want to display your content to tabs, please add your content to modules or to Joomla articles. Here is the settings for your content.

content_setting

  • Max number item: The number of items display in the content

  • Items Ordering: This option allows to sort content items's order by: Default/Recently Added First/Recently Modified First.

  • Introtext length: For Articles, you can configure to control the size of article introtext.

General Settings


general_set

  • Style: Slect style for module from the list. There are many styles available from list. For all of our Joomla Templates that support this module by default, it will have its style in this list, select the corresponding style for your template. If you don't find the style for your template, you can select any style then customize to make it fit your template style.

  • Select position title: tabs's title can be configured to be displayed in position: left,right, or center. But for each style, we support specific positions, so if the tabs are not well displayed in selected position, you may need to style it.

  • Select tab alignment: this option will be available when you select Top or Bottom postion for title.

  • Select Effect: set the effect of tabs transition: Fade,or Move

  • Tabs title Height: set the height of the block to display tabs name. It can be: 30, auto, 100%

  • Tabs title Width: set the width of the block to display tabs name. It can be: 30, auto, 100%

  • Image intro display: Show or not Image Intro

  • Intro Image Width: Set the width of Intro Image

  • Intro Image Height: Set the height of Intro Image.

adoption

Add content to tabs


You can add popup to a Custom HTML module or to an article. As the plugin just supports Joomla content so you can not use it for K2 content.

  • Step 1: Create content that you want to display in tabs

What content is valid to be displayed in tabs ? The answer is: modules, Joomla articles or add content directly to each tab. So, if you want to display your content to tabs, please add your content to modules or to Joomla articles

  • Step 2: You can select to display tabs in a Custom HTML module or a Joomla Article. And the way to make tabs displayed in front-page for both Custom HTML module and Article is the same.

To display tabs in the Custom HTML module and Joomla Article, it is very simple. Just add new article or new Custom HTML module. They will then appear in the selectlist. Using two button Add/Remove to decide which module/content will be displayed to tabs.

ZT News


1.Module type: ZT News

2.Module position: position-tab-right

zt_news

1.Module type: ZT News

2.Module position: zt-position-8

latest_new

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.

Download & Installation


  • Now,Downloaded the latest version of ZT News module.

  • After successfully downloaded the package, Log into the administration area, navigate to Extensions > Extension Manager, Browse the package file and finally, click Upload & Install.

Enable the module


After successful installation, go to Extensions > Module Manager, you will see a list of modules, click on ZT News to access to module manager page.

1

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

111

  • Assign the module to menu item(s): in this field, there are 4 choices: On all pages, No pages, Only the pages selected, On all pages except those selected.

You can select a page/menu item by tick the box beside it.

assignment

Module Configuration


Now we will inside the find out the parameters of the module.

Basic Settings

news_1

Source Setting

source_setting

  • Source From: The source of the items/articles you will display with ZT News. There are 2 choices: Joomla Categories and K2 Categories.

  • Joomla Categories: Select the category containing articles you want to use by highlighting it. If no category was selected, all categories will be used by default.

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 document to know about managing categories in Joomla 3.x.

Mega Menu


Built in very completely new ZO2 Framework, ZT Divas 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.

mega_menu

  • To configure and edit Mega Menu, go to: Extension > Template manager > open Zo2_charity template > Mega Menus setting.

mega_menu

  • There are 3 level of configuration in the Mega Menu Settings, which are:

Sub-megamenu setting

Column setting

Menu item setting.

Depend on the element you select, the Toolbox will display different contents.

mega_menu_config


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.

item_config

  • 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

Sub-megamenu Setting


This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.

sub_megamenu

  • 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

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.

column_config

  • 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

MegaMenu 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.

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 – Yes parameter 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.

add_a_sub

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

after_1

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

add_new_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 Select Module dropdown box under Column Configuration area to find and select the module you would like to show as a submenu item.

select_module

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

after_select_module

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.

move_item

  • First, set your Submenu width and the alignment for it as your prefer.

move_item_1

  • Next, click the Login item, and then, select Position "→" to move the menu items to second column.

move_item_2

Group Sub-Items

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.

group_item1

  • Add a row for that sub-menu.

group_item2

  • To move all the categories under the parent item, click the individual sub-menu item and toggle Group to Yes:

group_item3

  • 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: Extra Class.

extra_class

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 => Column => 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.

item_caption

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 Icon box 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.

icon

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 Save button in the Megamenu editing page toolbar.

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. 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.

First see our default layouts below:

layout_builder

In this chapter, there are two parts to be configured: Layout Structure and Layout Configuration.

Layout Structure


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.

Top Section


top_section

In Top Section, we use 3 columns and span 4 for each column. The Columns are top-menu, search,and top-social.

Header Section


header_section

Here're 2 columns: header_logo with span 3 and mega_menu with span 9.

Slide Section


The Slide Layout is a simple one column. And the span 12 covered the whole width of this layout.

slide_section

Feature, Breadcrumb, and News Section


feature_section

new_bottom

In these sections we used the whole span. There is option available for to create more column and row.

Body Section


body_section

In the body section we used 03 columns. And the columns are

  • Left

  • Component Area

  • Right

The left & right contain span3 and the component area contain span6.

Bottom Section


bottom1_2


This is pretty Footer one columns layout with whole span.

footer

Layout Configuration


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:

layout_setting

  • drag_drop The drag & drop option: By using this option, You can drag & drop to change the position of columns in a line as well.

  • columnColumn'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.

  • duplicateDuplicate Row: The 3rd option provides you to add new row.

  • duplicate_rowSplit Row: The 4th option provides users to add new column.

  • removeRemove 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 Row Icon at the top right of any existing row form. A new row will be created under.

add_new_row

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

row_setting

  • Insert row name into Name Field and Row ID into ID field.

  • Select ON/OFF for Full Width.

  • Save Changes and 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.

add_column

Remove Column/Row

  • To delete a selected row/column, click Icon to Remove in the editor toolbar of selected row/column.

remove_column_row

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.

column_setting

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

responsive_config

  • Select responsive layout to config and enable it.

Profiles


Zo2 Framework now supports the different "profiles" for the template.

profile

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 Extensions > Template manager > zo2_charity - Default > Layout Profile to get started with new Profile function of Zo2 Framework.

template_manager

z02_tool

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 default. 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.

default_profile

Step 1: Create a new profile


New profiles can be created in the profile theme settings by entering a name for your new profile.

new_profile

  • Just click the Save button to finish creating your new profile.

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.

setting

Step 2: 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.

Step 3: 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.

Final Step


After all the changes with the new profile, one very important action you have to take, is clicking the Load Profile to apply all to your Joomla site.

Global, Fonts, and Advanced Settings


toolbar

Built in new Zo2 Framework, ZT Charity 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 Advanced tab.

Please visit to our Zo2 Framework document site to see the setting for each section.

EasyBlog


Everybody loves a better blogging solution. And EasyBlog from Stackideas makes it so easy for you to start a blog in Joomla.

easy_blog

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.

Install EasyBlog


  • Login to your Joomla back end and head on to the installation area at Extensions > Extension Manager

  • Locate for the package which you have downloaded earlier com_easyblog_3.9.15370_paid_jx.y.zip by clicking on the Browse button. Hit the Upload File & Install button.

easy_blog_install

  • Installation is completed now.

easy_blog_install_1

  • You can found all settings for EasyBlog in Component > Easyblog:

easyblog

For detailed explanation, see Documentation from Stackideas: http://stackideas.com/docs/easyblog.

Typography and Short Code


We carefully handcrafted this joomla template with a strong focus on typography, usability and overall user-experience. ZT Ota 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 Charity.

Shortcodes Buttons built in Editor

shortcode_buttons

Please view all Shortcode embed in ZT Charity.

Frequently Asked Questions


How can I change my Joomla site favicon?


Answer:

  • You can upload your favicon.ico into the main folders of your front-end and back-end templates, which are found in the \zt_cramos\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 Extension => Template manager => open Zo2_charity template => General tab > Favicon option, just click the Select button.

favicon

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?


Answer:

  • In your Administrator, navigate to System => Global Configuration => Locate Site Name tab and change your site's name.

change_site_name

  • Click the Save button.

  • That’s it!

How to create multiple languages in this template?


Answer:

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.

How to edit CSS of the Template?


Answer:

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 guide http://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.

Support Us


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.

HelpDesk:

http://member.zootemplate.com/helpdesk!