ZT News 4 Guide

1. Introduction


Current Version 1.0.8 (Jul 06, 2015)

Attention: Only use this document if you are using Joomla 3.x.

Thank you so much for interesting in responsive joomla template ZT News4. Now we will show you how to install and configure the ZT News4 template.

2. Help & Support


2. 1. References


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

2. 1. 1. Joomla installation


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

ZT News4 is not only a friendly interface, but also an impressive and beautyful design. So, It will surely meet the highest of your business objectives. With this user guide, we hope you will know how to install & use this template daily to support your business activities effectively.

If you are unable to find answers to your questions, please feel free to post them in our HelpDesk, or contact to us. We’d be glad to help you. Once again thank you so much for using our company’s product.

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

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

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

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

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

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

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

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

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

2. 3. 1. 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.

3. Installation


There are 2 methods of installing the ZT News4:

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

3. 2. Separate Template Installation


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

3. 2. 1. Package Browser


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

3. 2. 2. ZT news4 Installation


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

  • 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_news4_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_news4_vX.Y.Z.zip. After that click on button Upload &Install.

install_temp

3. 3. ZT News4 Configuration


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

enable_zo2

  • Once ZT News4 is installed in your Joomla site, you need to make it default for your website so your pages get the new design. Please go toExtensions => Template Manager=> Zo2_news4 – Default => Click on the star icon next to it.

template_manager

4. Configuration


To view all ZT News4 module positions, please click here.

4. 1. K2 Component


ZT News 4 uses the K2 Component as their basic content manager. Here are some basic quidelines of how to install and set it up correctly. For more details on this component’s specific setup, please advise its documentation

  1. Install K2 Component. Go to the Extensions Manager and install the latest version of the K2 component. Download it on getk2.org.
  2. Setting up K2 General parameters. After a success message, navigate to Components > K2 and from the toolbar on the top right corner, select the Parameters Button. This will open a modal window with the general K2 parameters you have to set up according to your needs. One of the parameters that needs to be set before any item addition are the Image sizes. Here are the available sizes for all K2 views and modules: XS, S, M, L, XL, category image, user image, commenter image. Advise each template’s documentation located in this section or the Quickstart package for the recommended sizes.
  3. Setting up K2 Categories. Create your category tree in K2 Categories, which will be according to the structure of your site. Set the parameters in your categories, advise the Visual Walkthrough of each template or the Quickstart package, in order to view the resulting pages you see at the template’s demo site. It is recommended to keep the parameters in one root category and set all others to inherit from that one. In most of our Quickstart packages the setup categories are marked with “DO NOT DELETE” on their name for better reference. The parameters differ between templates according to structure and features.
  4. Adding K2 Items. After you have set all parameters up, you are ready to add K2 Items. According to the needs of each template, several K2 Item elements are used. These elements include Image, Image Gallery, Media, Extra Fields, Attachments.
  5. Setting up K2 menu items. Your available options are between views of: Item, Category/Categories, Latest items by tag, Latest items by user, Tags list, Author list. The item view gets its parameters from the category it belongs. The category also gets its parameters from the category, while there is the option to multiselect categories and set the list parameters for them. You can also override the ordering of the Category parameters through the menu item. The author and tag lists get their parameters from K2 general parameters. The latest from user/category views are the only menu item views that have their parameters here instead of a category or the general K2 parameters.

Note: Please note that all the above steps should NOT be followed if the Quickstart package is used. All setup has already been made according to each template and should work as a guide for your own customization.

For more information about K2 functionality, visit getk2.org.

4. 2. ZT Slideshow


slider_news

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.

4. 3. ZT Shortcodes


A good new for you, All new Joomla templates with Zo2Framework now comes with 25 built-in shortcodes (e.g. tabs, gallery, video, google map etc.) that users can attach. With this new Joomla extension, you can have an extensive collection of powerful ecommerce features that benefits all from shop owners, developers, to customers:tach to certain pages by adding the corresponding macro codes into articles or even modules. But we went a step further than the competition, we created ZT Shortcode Generator plugin for Joomla 3.x. This is a free plugin for adding & displaying Zo2 shortcodes on your website.

short-code

A more detailed instruction about how to edit and configure ZT Slideshow can be found in ZT Shortcode Configuration Manual.

4. 4. ZT Language Switcher


5

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.

4. 5. ZT Custom HTML


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

4. 5. 1. 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.

4. 5. 2. Top Video


  1. Module type: Custom HTML
  2. Muple position: tab1

top_video

Custom Output:

Enter the following in the Custom Output text editor:

<p><object id="rcomVideo_287627551" data="http://www.reuters.com/resources_v2/flash/video_embed.swf?videoId=287627551&amp;edition=BETAUS" type="application/x-shockwave-flash" width="335" height="287"><param name="movie" value="http://www.reuters.com/resources_v2/flash/video_embed.swf?videoId=287627551&amp;edition=BETAUS" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /> <embed src="http://www.reuters.com/resources_v2/flash/video_embed.swf?videoId=287627551&amp;edition=BETAUS" type="application/x-shockwave-flash" width="460" height="259" /> </object></p>

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.

custom_html_config

  • General:

general_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 Custom HTML modules in this section by the same way as above.

4. 5. 3. Photo Lightbox


  1. Module type: Custom HTML
  2. Muple position: tab2

photo_lightbox

Custom Output:

Enter the following in the Custom Output text editor:


[lightbox src=images/photo/1.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/2.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/3.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/4.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/5.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/6.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/7.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/8.png width=100 height=85]ZooTemplate[/lightbox]
[lightbox src=images/photo/9.png width=100 height=85]ZooTemplate[/lightbox]

4. 5. 4. Social


  1. Module type: Custom HTML
  2. Muple position: top-social

top_social

Custom Output:

Enter the following in the Custom Output text editor:

<div class="zo2-social-inner">
<a href="#" class="facebook" ><i class="fa-facebook"></i> </a>
<a href="#" class="twitter" ><i class="fa-twitter"></i> </a>
<a href="#" class="rss" ><i class="fa-rss"></i> </a>
<a href="#" class="plus" ><i class="fa-plus"></i> </a>
</div>

  1. Module type: Custom HTML
  2. Muple position: footer-logo

footer_logo

Custom Output:

Enter the following in the Custom Output text editor:


<div class="footer-logo-inner">
<img alt="Powered by ZO2 Framework" src="images/zo2-logo-red.png">
</div>

4. 6. Language/ Language Switcher


  1. Module type: Language Switcher
  2. Muple position: top-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.

4. 7. Latest News/ News Show Pro GK5


  1. Module type: News Show Pro GK5
  2. Module position: lastest-news

latest_news_1

ZT News4 Joomla Template brings you features of news show pro GK5 module presented by Gavick. This is the next generation module for presenting articles in both Joomla! 2.5 and Joomla! 3.x. Using this module you can smoothly create latest products, featured products or any blog article etc. to show on the front page. This module has easy understanding control panel and huge number options. Just play with these options and see the effect on the front page.

Still confused? Okay, let’s try with our tutorial given below:

4. 7. 1. Creating New Module with GK5


We already have downloaded and installed the updated version of news show pro GK 5 module in our News 4 template. So,

you don’t need to do it again. You can create new module using this extension. Steps are as follows:

  • First go to Extension > Module Manager:
  • Click on New and Select the type of module (news show pro GK5 from the lists). You will get the admin panel setting options of the module.

1

  • Give title name (you can show or hide title if you want) for the new module, Select the position and select the pages of your site where you want to show the module. You can follow the image below:

2

4. 7. 2. Setting up News Show Pro GK5

To set the module you can follow our already created module setting. You can also customize our created module if you want.

All module settings are described in the detailed document from Gavick

4. 8. K2 Content


K2 Content is the primary “content” retrieval module for K2. You can set various category and item element filters to display a number of items coming from the K2 component. Using multiple copies of this module (with varying settings) you can achieve complex news publishing/magazine site layouts.

  1. Module type: K2 Content
  2. Module Title: Latest News
  3. Module position: bottom-1

latest_new

  1. Module type: K2 Content
  2. Module Title: Latest Media
  3. Module position: bottom-2

latest_media

  1. Module type: K2 Content
  2. Module Title: Hot News
  3. Module position: hots-menu

most_popular

  1. Module type: K2 Content
  2. Module Title: Most Popular

3.1 Module position: tab 3

tab3

3.2 Module position: right

most_popular

4. 8. 1. Creating New Module with K2


We already have downloaded and installed the updated version of K2 Component in our News 4 template. So,

you don’t need to do it again. You can create new module using this component. Steps are as follows:

  • First go to Extension > Module Manager:
  • Click on New and Select the type of module (K2 Content from the lists). You will get the admin panel setting options of the module.

1

  • Give title name (you can show or hide title if you want) for the new module, Select the position and select the pages of your site where you want to show the module. You can follow the image below:

k2_content

4. 8. 2. Configuring the module


From the back-end of your Joomla site (administration), select Extensions > Module ManAger, then click on module named Latest News/Latest Media/Hot News to go to configuration panel. Below Picture is the screenshot of some important settings from K2 Content Module back-end. You can find out the step by step guide for K2 Module here.

k2_content

Now lets go through some of the options on the right hand side of the page. There are a number of options here, and not all will be required for your module. So lets just cover some of the more important ones.

  • SOURCE allows you to toggle between displaying specific articles or displaying all articles from a specific category.
  • The CATEGORY FILTER allows you to select particular categories to display.
  • The ITEM COUNT is where you determine how many articles you wish to display.
  • Further down is an option to SELECT SPECIFIC ITEMS. This is where you can choose a single item or article to display if required.
  • The ITEM VIEW OPTIONS allow you to toggle on and off specifics regarding the module, such as what elements of the article will be displayed.
  • When you have finished your configuration, make sure to select the SAVE button situated in the top right corner of the page.

Note: In case you don’t see the module displaying in front-page, you need to check:

Is the module published ?

Please make sure that the module is published.

Is the module assigned to a visible module position ?

publish

There can be many module positions listed for you to select, but make sure that the module position you select is visible in front-page.

Is the module assigned to a menu ?

When you want to display a module on specific menus, you need to assign it to the menus.

menu_assignment

4. 9. K2 Tool/ Calendar


  1. Module type: K2 Tools
  2. Module position: right

K2 can generate a customisable calendar that can be placed into any module position, pulling data from specified items. A typical use of the calender may be to publish specific items from a category, and display them via clicking the relevent dates on the calender itself.

calendar

  • To enable this, click the Extensions located in the top menu bar, and select Module Manager from the from down menu that appears, then click the New button:

add_new

  • Select K2 Tools from the list of modules that appears.

select_module

The following screen allows you to modify the settings of the module:

  • On the left you will see a field for the TITLE. In my example I have decided the call the module “Calendar”.

111

The option SHOW TITLE allows you to toggle on or off the title of the calnder module – while the option ENABLED allows you to toggle the modules published status.

The remaining options on the left side of the screen relate to the positioning of the module. You can see that in my example I have chosen to display the module in the left column of my website, and that it appears on every page.

  • The options on the right side of the determines what information is used to populate the k2 Tools module.

The category filter allows you to select what category you would like to publish from.

1


  1. Module type: Banner
  2. Module position: right

banner

banner_2

  1. Module type: Banner
  2. Module position: top-banner

top_banner

By default Joomla 3 comes with a component for managing banners. It allows you to add different banners, organise them into categories and display them in different places on your website.

4. 10. 1. Create a new Banner


  • The first thing you need to do is to create a new banner. To do this login to your Joomla admin area and go to Components > Banners > Banners> New button:

create_new_banner

  • Now, you need to fill in some information for the banner you’re adding and its code.
    • First, choose a name for the banner. Name your banners with unique, meaningful names so you can easily organise them later.
    • Next, select Custom from the Type drop-down. This will allow you to paste the banner code you’ve obtained from the site you’re advertising.
    • Finally, paste the banner code into the Custom Code field and press the Save & Close button.

edit_banner

4. 10. 2. Display the banners


Now you need to publish a new module to display your newly embedded banner. To do this go to Extensions > Module Manager:

  • Once more, press the green New button in order to add a new module to your site.
  • Joomla 3 will provide you with a list of the available module types that you can choose from. Simply click on the banners type.

banner_module

  • On this page, you need to choose a title for the module and the position where it will be displayed.

Note: the available positions and their names depend on the template you’re currently using. Different templates have different places where you can add modules (in our case – banners). For the purpose of this tutorial, we will add our banner in the position: bottom1 of the default Joomla 3 template. Once you chose title and position for the module, press the Save button at the top left part of the page.

banner_setting


This Module allows you to place your Menus on the page. Every Joomla! website has at least one Menu that is created in the Menu Manager screen. The Menu Module allows you place all or part of the selected Menu at the desired position and on the desired web pages.

Module type: Menu

In this template, we used 2 column-layout with 4 modules of equal width published. Here are the screenshot taken from ZT News 4 demo:

k2_menu

First you need to create new menu items for your menu. Your Menu Items are specified as a K2 Category.

  • Select Menus > Main Menu EN from the drop-down menu on the back-end of your Joomla site. Open the Menu Item, for this example, a menu item called “Home EN”.
  • Give title name (you can show or hide title if you want) for the new module, Select the position and select the pages of your site where you want to show the module, select Menu Type. You can follow the image below:

home_en

  • Here are some important settings to show this Menu on the homepage:

4. 11. 1. Important Settings/Details


4. 11. 1. 1. Content Source

Joomla supports 2 sources: Categories and Users. The settings are a little different if you select source Users or Categories.

content_source

  • Choose content source: select source Users or Categories.
    • Categories: When the content source is set to categories this input is automatically displayed. Select the desired categories to display on the page.
    • Users: A broad filter to determine whether to display items created by the current user or users other than the current user.
  • Number of columns: How many columns you want to display the content in.
  • Maximum number of items per user or category: You will see your category/user item limits
  • Item view options (set below) effect…: allow to select one of two option from dropdown list
4. 11. 1. 2. Source = Users

  • Select the Click to select one or more users button to decide display items created by the current user or others.

user

4. 11. 1. 3. Source = Categories

category

  • Selected categories (sort with drag & drop): Select categories from list that you want to get content from to display in the module. You can select multiple categories.
  • Title/Description/Images/RSS feed icon: select to hide/show title/description/images/rss feed icon of category.
4. 11. 1. 4. Other Settings

home_en


link_type

  • Link Title Attribute: An optional, custom description for the title attribute of the menu hyperlink.
  • Link CSS Style: An optional, custom style to apply to the menu hyperlink.
  • Link Image: An optional image to be used with the menu hyperlink
  • Add Menu Title: (Yes/No). If the optional image is added, adds the menu title next to the image. Default is ‘Yes’.

4. 11. 3. Page Display


page_display

  • Browser Page Title: Optional text for the “Browser page title” element. If blank, a default value is used based on the Menu Item Title.
  • Show Page Heading: (Yes/No). Show / Hide the Browser Page Title in the heading of the page ( If no optional text entered – will default to value based on the Menu Item Title ). The Page heading is usually displayed inside the “H1” tag.
  • Page Heading: Optional alternative text for the Page heading.
  • Page Class: Optional CSS class to add to elements in this page. This allows CSS styling specific to this page.

4. 12. ZT Headline


  1. Module type: ZT Headline
  2. Module position: zo2-scroller

ZT Healine module allows you to collect news from all your category and display them in the headline of website page.

zt_headline

For download please visit Joomla Templates Club.

ZT Headline Installation:

Go to Administrator site Extension > Extension Manager in the Top Menu and install zt headline file to your site.

ZT Headline Configuration: Below pictures are the screenshots of some important settings from ZT Headline Module back-end:

  • Basic Settings:

zt_headline

  • Content Options:

Healine Module provides more settings for you to create a new slide, customize and manage the slides. All related settings are at the top right of each row/column form, including:

tool

To add a new slide to the list, simply click on the ADD NEW SLIDE button, a box will be created with the following parameters:

add_new

Content Type: This module supports 3 content types: Content Article/K2 Article/or Custom.

Image: You can insert an image gallery into your posts or Upload Images from Your Computer.

Title: Insert the title of the post

Content Article:Select one content article from your categories if content type is Content Article/ self-build content if you choose Custom from Content type drop-down.

  • Style Options:

style_option

5. Mega Menu


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

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

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

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

5. 4. 1. 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.

5. 4. 1. 1. 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.

5. 4. 1. 2. 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.
5. 4. 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 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

5. 4. 1. 4. 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

5. 4. 1. 5. 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.

5. 4. 2. Style and Add icon


5. 4. 2. 1. 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

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

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

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

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

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

6. 1. 2. Header Section


header_section

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

6. 1. 3. Slide Section


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

slide_section

6. 1. 4. 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.

6. 1. 5. 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.

6. 1. 6. Bottom Section


bottom1_2


This is pretty Footer one columns layout with whole span.

footer

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

6. 2. 1. Add and Modify Layout Section


6. 2. 1. 1. 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.
6. 2. 1. 2. 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.
6. 2. 1. 3. 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

6. 2. 1. 4. Remove Column/Row

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

remove_column_row

6. 2. 1. 5. 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.

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

7. Global, Fonts, and Advanced Settings


toolbar

Built in new Zo2 Framework, ZT news4 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 click here to see the setting for each section.

8. Configuration multilanguage site


This tutorial is going to show you how to configure a multi-language site based on Joomla 3.x. In order to do this:

8. 1. Install a new Language


Installing a new language in Joomla 3.x is much easier than changing languages in Joomla 2.5. This is because of the new Install Language Tool from Joomla 3.x , which allows you to install new languages without manually needing to find and download them from other sites on the web.

  • In the top menu of you Administraton Panel, click Extensions => Language Manager

language_manager

  • Click the Install Language button towards the top of the page.

install_language

  • Here, you can find the language you want to install using Search box or by browsing through the list of available languages. When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the Install button in the Joomla toolbar.

find_language

  • When the language has been installed correctly, You should see a similar message:

message

  • Now, the new language is showed in the list. To make this language as the default, in the top menu, go to Extensions => Language Manager

joomla3_-multilanguage_site_configuring_6

  • Click the Content tab, then click New button.

joomla3_-multilanguage_site_configuring_7

  • Create a new content language with unique parameters. For example, for Portuguese the fields should be filled in this way

joomla3_-multilanguage_site_configuring_8

  • Click on Save and Close. You will see a message saying Content Language successfully saved:

joomla3_-multilanguage_site_configuring_9

  • Go to Extensions > Plugin Manager:

joomla3_-multilanguage_site_configuring_10

  • Look for one called System > Language Filter and enable it:

joomla3_-multilanguage_site_configuring_11

8. 2. Create a language switcher


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:

joomla3_-multilanguage_site_configuring_13

  • Select the Language Switcher in the modal popup window.

joomla3_-multilanguage_site_configuring_14

  • Enter the module name, make sure its set to published, select its position and click Save button.

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.

8. 3. Create Menu for every language.


  • Now you need to create a menu for every installed language and leave one additional for both languages. That is, if you have English and Portuguese installed, you will have to create menus both for English and Portuguese. Check, which of your menus is set to be the default menu (has a home icon). For example, if you have the Main Menu with the default menu item, you are going to use it for all languages, and additionally you will need to create two more Main Menus for English and the new language you have just installed. Go to Menus > Menu Manager > Add New Menu:

joomla3_-multilanguage_site_configuring_16

  • Enter all necessary fields for the English language and click Save and Close:

joomla3_-multilanguage_site_configuring_17

  • Go to Menus > Menu Manager > Add New Menu again and enter the necessary fields for your new language (e.g. Portuguese) and click Save and Close:

joomla3_-multilanguage_site_configuring_18

  • Now you need to add new menu tabs to each of the main menus based on those already added to the default Main Menu. You can go to Menus >Main Menu for Eng > Add New to add the menu, but the easiest way would be to just duplicate the exiting menus by going to Menus > Main Menu > select the default menu tab like Home and click Save as Copy:

joomla3_-multilanguage_site_configuring_19

  • Under MessageMenu item successfully saved you need to change the fields for the new languages. For example, for English under the Details tab you should change the Menu Title, the Alias, change the Status to Published, select the Main Menu English you created in the Menu Location drop-down, change the Default Page to Yes, in the Language drop-down select English (UK).

joomla3_-multilanguage_site_configuring_20

  • Click Save and Close.
  • Repeat steps mentioned above for your other new language. E.g. for Portuguese it should look like this:

Note: Only in this case under Advanced Options you will also need to click Select Categories and select the category for the new language : for instance, if its set to a category Home, you need to have another Home for the new language. If you don’t, go to Content > Category Manager and create it. The new category needs to have articles in the new language added to it. This can be done any time later, so for now you can just leave it as is.

joomla3_-multilanguage_site_configuring_21

  • If everything is done properly, under Menu you will see flag icons added to the main menus.

joomla3_-multilanguage_site_configuring_22

  • Now you need to duplicate the top menu module for English and the language you added. Go to Extensions > Module Manager
  • Find the module used for the top menu, e.g. Superfish Menu (the name depends on your template). Check it and click Duplicate.

joomla3_-multilanguage_site_configuring_23

  • Click the menu you duplicated. For English, under Details: you are going to change the Name (e.g. to Superfish Menu Eng), change the Status toPublished, in the Language drop-down select English (UK):

joomla3_-multilanguage_site_configuring_24

under Options: in the Select Menu drop-down, select Main Menu eng (the one you created in above step):

joomla3_-multilanguage_site_configuring_26

under Menu Assignment: select Only on pages Selected in the Module Assignment drop-down box, then click Select None and check Home Engunder Main Menu eng > Click Save and Close.

joomla3_-multilanguage_site_configuring_27

  • Repeat the same to create a menu module for the new language. If its Portuguese, the settings should be as follows:

Details:

joomla3_-multilanguage_site_configuring_271

Options:

joomla3_-multilanguage_site_configuring_28

Menu Assignment:

joomla3_-multilanguage_site_configuring_29

  • Disable the Superfish menu for all languages
  • Now go to Menus > Main menu > Home > Module Assignment for this Menu Item and check Hide Unassigned Modules.

joomla3_-multilanguage_site_configuring_31

  • Your new Home menus should have the same modules assigned to them if you want your mulingual versions of the site to look correctly. Click each module which has “yes” under Display and in the Menu Assignment select the two menu tabs you added (i.e. Home for eng and Home for pt) and click Save and Close.
  • Do the same for the rest of the modules that have “yes” under Display, then click Save.
  • Open the front page of your site and try using the language switcher to check how the both versions work. They should be identical. You can now add different content to the new language version.

9. Typography and Short Code


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

Shortcodes Buttons built in Editor

shortcode_buttons

Please view all Shortcode embed in ZT News4.

10. Frequently Asked Questions


10. 1. 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_news4\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_News4 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

10. 2. 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!

10. 3. How to install and change languages in my Joomla site?


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.

  • In the top menu of you Administraton Panel, click Extensions => Language Manager

language_manager

  • Click the Install Language button towards the top of the page.

install_language

  • Here, you can find the language you want to install using Search box or by browsing through the list of available languages. When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the Install button in the Joomla toolbar.

find_language

  • When the language has been installed correctly, You should see a similar message:

message

  • Now, the new language is showed in the list. To make this language as the default, in the top menu, go to Extensions => Language Manager and click the star icon next to selected language, then go to the frontend to see the changes.

11. Recommendation


The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

If you are new or are confused, we recommend installing Quickstart on your localhost and use it as reference for configs. This is the best way to work with any template. Links to all the resources are provided above, you should carefully read them to take the maximum advantage of our products.

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

Please raise your support queries in our HelpDesk and make sure you follow the support guidelines. We spend more time in getting the information from user in case the support guidelines are not followed.

All feedback will be taken seriously and treated confidentially.