The Zhong Framework - Installation Guide

This guide will help you through the installation and configuration of any of our templates ( including the free and basic versions ). The guide refers to the templates based on the Zhong Framework version 3.x.x; if you're looking for an older version refer to the older guides.

Content index

  1. Content index
  2. Message to the User
  3. Notes
  4. Template installation
    1. Download and Extraction of the ZIP archive
    2. Uploading the Template in Your Joomla Website
    3. Make Your New Template the Default One
  5. Modules & Menus in Joomla, an Introduction
    1. Joomla Modules
    2. Important Menus
  6. The Main Menu
    1. Adding a New Main Menu
    2. The Main Menu Module
  7. The Side Menu
    1. Adding a New Side Menu
    2. The Side Menu Module
  8. The Footer Menu
    1. Adding a New Footer Menu
    2. The Footer Menu module
  9. The Support Menu
  10. Other Important Modules
    1. The Breadcrumbs Module
    2. The Search Module
    3. The Language Switcher Module
    4. The Login Module
    5. The Footer Credits Module
    6. The Alerts Panel Module
  11. Template Administrator Panel
    1. Introduction
    2. How the Template Administration Panel works
    3. Important Parameters
    4. Customizing the Colors
    5. Save the Parameters
  12. Custom Module Positions & Template Structure
    1. Introduction
    2. Template Structure
    3. How to load a Custom Module
  13. How to style a Custom Module
    1. Styling your module individually (Using the "Module Class Suffix" option)
    2. Styling your module from the template administration panel
  14. Accessible Slideshow Installation
    1. Common configuration
  15. Template Update
  16. Older Guides
Back to index

Message to The User

Dear User, thank you for choosing one of our templates.

We hope this guide will be exhaustive, if not, you are welcome to contact us for any help.

Note that if you're using the free version of our templates some of the guidelines in this document may not be applicable ( the free version lacks of some features that are present only in the premium templates ).

We hope you will be satisfied of our templates. You are welcome to contact us if you want to leave us a feedback, report a bug or provide a translation.

Back to index

Notes

The installation screenshots were taken using Joomla 3.4.0. The procedure in future releases of Joomla might be slightly different.

Our templates are compatible with Joomla 1.6.x , 1.7.x , 2.5.x and 3.x

Back to index

Template Installation

Download and Extraction of the ZIP archive

After your purchase, you can log into your profile and download a ZIP file containing two compressed files: the template and the accessible slideshow module. Once you have downloaded the ZIP file you need to extract it (for example in your desktop).
If you have any problem in downloading the archive, feel free to contact us.

Uploading the Template in Your Joomla Website

After downloading and extracting the ZIP file, you need to upload your new template in your Joomla website. The template is compressed into a ZIP file: do not extract it. Instead, open your Joomla administrator panel ( accessible via "http://www.yoursite.com/administrator" ), then follow these steps:

  1. On the top menu bar, search for "Extensions" and click on "Extension Manager".
  2. On the form named "Upload Package File" click on "Browse...". A dialogue window will appear, now select the template file ( in the ZIP format ), confirm and click on "Upload & Install".

If everything was ok, your new template is installed in your Joomla website. If there were errors, try to check if the folders permissions are set correctly.

Make Your New Template the Default One

Now your new template is active, try to visit your website homepage.

Back to index

Modules & Menus in Joomla, an Introduction

Joomla Modules and Positions

In Joomla certain "blocks" or "tools" ( such as menus, the login form or the search form ) are printed using modules. Those modules can be placed in different part of the layout ( module positions ).

ATTENTION: when using a template based on the Zhong Framework certain modules MUST be placed in SPECIFIC POSITIONS. This is done in order to guarantee a basic accessibility level for your website.
For example:

For more information about this topic please visit the modules position page and read the page main article.

The following sections will guide you step by step to successfully configure some important modules of your new template.

Important Menus

On our template there are four important menus:

It is not mandatory to use any of these menus, but it is highly recommended to at least use the Main Menu module.

The next sections will guide you step by step to successfully configure these important menus.

Back to index

The Main Menu

This menu is meant to host the links to the main pages of your website.

If the menu is already present, skip the next paragraph.

Adding a New Main Menu

To include the main menu follow these steps:

  1. On the top menu bar of the administration panel, click on Menus->Menu Manager->Add New Menu.
  2. Fill the form with the information needed ( see screen-shot for an example )
  3. Click the "Save & Close" button to end the operation.

Now you should fill your new menu with some items. If you want to learn how to add menu items to your new menu, try read the official Joomla documentation.

The Main Menu Module

Now we need to load the main menu in a new module. To include a new module follow these steps:

  1. On the top menu bar of the administration panel, click on Extension->Module Manager.
  2. Click on the "New" button.
  3. Select "menu" from the list.
  4. Fill the title's form and the right part of the page with some important information:
  5. Always make sure that these options are set correctly:
  6. Now  focus on the module's options: make sure that under "Select Menu" the option "Main Menu" is selected.
  7. Make sure that the "Show Sub-menu Items" option is set to "yes".
  8. Click the "Save & Close" button to end the operation.
Back to index

The Side Menu

This menu usually contains links that are related to the content of the current page. This type of menus are also known as "content menus".

Adding a New Side Menu

To include the side menu follow these steps:

  1. On the top menu bar of the administration panel, click on Menus->Menu Manager->Add New Menu.
  2. Fill the form with the information needed ( see screen-shot for an example ).
  3. Click the "Save & Close" button to end the operation.

Now you should fill your new menu with some items. If you want to learn how to add menu items to your new menu, try read the official Joomla documentation.

The Side Menu Module

To create a new module for the side menu follow these steps:

  1. Click on Extension->Module Manager, click on "new" and select "menu".
  2. Now fill the form with some important information:
  3. Always make sure that these options are set correctly:
  4. Now focus on the module's options: make sure that under "Select Menu" the option "Side Menu" is selected.
  5. Make sure that the "Show Sub-menu Items" option is set to "yes".
  6. Click the "Save & Close" button.
Back to index

To include the footer menu follow these steps:

  1. On the top menu bar of the administration panel, click on Menus->Menu Manager->Add New Menu.
  2. Fill the form with the information needed ( see screen-shot for an example ).
  3. Click the "Save & Close" button to end the operation.

Now you should fill your new menu with some items. If you want to learn how to add menu items to your new menu, try read the official Joomla documentation.

To create a new module for the Footer menu follow these steps:

  1. Click on Extension->Module Manager, click on "new" and select "menu".
  2. Now fill the form with some important information:
  3. Always make sure that these options are set correctly:
  4. Now make sure that under "Select Menu" the option "Footer Menu" is selected.
  5. Click the "Save & Close" button.

ATTENTION: this menu CANNOT have sub-menu items. It supports only a ONE LEVEL menu.

Back to index

The Support Menu

This menu is meant to hosts links to pages that are related to the usage of the website itself, such as the site map or the accessibility statement.

If you want to add a site map page you need to install an external extension. We recommend the Osmap extension.

Back to index

Other Important Modules

Your new template is designed to host some special modules, such as:

Note that adding these modules to your website is not mandatory but recommended.

If you want to add the breadcrumbs follow these steps:

  1. click on "Extension"->"Module Manager".
  2. Click on the "New" button.
  3. Select "breadcrumbs" from the list.
  4. Write a Title, tip the "Show Title"->"Hide" and write breadcrumbs under Position.
  5. We also suggest to hide the Show "You are here" text.
  6. Click on "Save & Close" to end the operation.

The Search Module

If you want to add the search module follow these steps:

  1. Click on "Extension"->"Module Manager".
  2. Click on the "New" button.
  3. Select "search" from the list.
  4. Tip the "Show Title"->"Hide" and write search on Position.
  5. Between the options, select: Search Button->Yes.
  6. Click on "Save & Close" to end the operation.

The Language Switcher Module

If you want to add the Language Switcher module follow these steps:

  1. Go to "Extension"->"Module Manager".
  2. Click on the "New" button.
  3. Select "language switcher" from the list.
  4. Tip the "Show Title"->"Hide" and write language-switcher on Position.
  5. If you want the module to display the flags, set the options as explained below:

Click "Save & Close" to end the operation.

The Login Module

If you want to add the Login form follow these steps:

  1. Click on "Extension"->"Module Manager".
  2. Click on the "New" button.
  3. Select "Login" from the list.
  4. Set a Title and write login on Position.
  5. Click on "Save & Close" to end the operation.

To add the credits of your company or organization in the footer you need to create a new custom HTML module:

  1. Click on Extension->Module Manager.
  2. Click on the "New" button.
  3. Select "custom HTML" from the list.
  4. Set a Title and write footer-credits under "position".
  5. Fill the module with some content. Add images and contacts if you like. Add style to the text, for example, I decided to center it.
  6. Click "Save and close" to end the operation.

The Alerts Panel Module

This component is useful to display alerts to your clients. A common usage of it is the creation of the "cookie disclaimer", mandatory by law in most of the websites in the European Union. If you are interested in create such disclaimer you need to:

  1. Click on Extension->Module Manager.
  2. Click on the "New" button.
  3. Select "custom HTML" from the list.
  4. Set a Title and write alerts-panel under "position".
  5. Fill the module with you cookie disclaimer message. IMPORTANT:
  6. Click "Save and close".
  7. Access the template administration page and click on the tab "Other Options", you will find the component's option there. In the case of the cookie disclaimer, the component must be "Cookie Aware" and have an "OK button".

IMPORTANT: if your site uses "profiling cookies" (such as an advertisement service, where the privacy of the user might be compromised), then you might have to block the usage of the whole site until the user agrees with your cookie policy. In this case you might want to set the "Priority" option to "high". This way the whole screen will be covered by the alert and it will block any action until the panel gets closed.
Note: If you want to test your disclaimer message you need to clear your cookies at every page reload (or access your website in "incognito" mode from your browser).

Back to index

Template Administrator Panel

Introduction

The template administration panel allows you to customize several template parameters. This panel is accessible via the top menu bar:

  1. Click on Extension->Template Manager.
  2. Click on the template name.

How the Template Administration Panel works

On the top of the page you can set many options to customize your new template. If you hover your mouse over some options a tip will be displayed. Those tips are VERY IMPORTANT and we advise you to read them carefully.

Important Parameters

Some important template's parameters are:

Customizing the Colors

You can customize some template colors, just click on the "Custom Style & Colors" tab.

Note that this tool does not provide you an exhaustive way to completely restyle your template.

If you need a complete restyle of your template, you can contact us and ask for our customization service.

Save the Parameters

Once you have set the template parameters correctly click on "Save & close" to end the operation.

Back to index

Custom Module Positions & Template Structure

Introduction

As we know, each Joomla module has to be placed in a module position. All module positions are specified by the template structure. Some module positions are meant to host a specific module ( for example the "main-menu" position can only host the Main Menu ) and other can host custom modules ( such as all the "aside" positions ). A custom module can host a variety of aside content, such as a slideshow, related content to the main article, other plugins, news, etcetera. This section will explain the structure of the template, how to load your custom modules and how to style them.

Template Structure

All templates based on the Zhong Framework share the same structure. You can visualize it by visiting the module positions demo page.

Note that you can visit the same demo page in different layout modes (such as high-contrast). You will note that the structure of the page changes.

How to load a Custom Module

This step is explained by giving you an example: Let's load a custom HTML module in the "aside-top-A" position.

  1. Clink on Extension->Module Manager.
  2. Click on the "New" button.
  3. Select "custom HTML" from the list.
  4. Write a title for the module.
  5. Set aside-top-A under "position".
  6. Fill the module with some content.

Move to the next section to learn how to style the module.

Back to index

How to style a Custom Module

You can assign 6 different styles to a module. There are two ways to set a style for a module:

Note that the second technique (using the template administration panel options) will affect ALL modules that are loaded into a module position. Instead, if you want to style the modules individually, follow the instructions on the next section:

On the module manager page, click on the "Advanced Options" tab and under "Module class suffix" write one of these classes:

VERY IMPORTANT: you MUST place a space before the classes' text:

Below you can see an example of a module having a "zf--block-coat--marked-light" style

Click "Save and close" to end the operation.

Access to the template administration panel:

  1. Click on Extension->Template Manager.
  2. Click on the template name.

Click on the tab "Custom Modules Style". From this tab you can select the style to assign to each position!

Click "Save and close" to end the operation.

To see the result go to your home page.

Back to index

Accessible Slideshow Installation

To install the "accessible slideshow module", follow these steps:

  1. Login into the backend of your Joomla website (accessible via your-joomla-website/administrator)
  2. On the top menu bar, search for "Extensions" and clink on "Extension Manager".
  3. On the form named "Upload Package File" click on "Choose File". A dialogue window will appear, now select the accessible slideshow module file ( compressed in a ZIP format ), confirm and click on "Upload & Install".

If no error is showed, the module is installed in your Joomla website.
To configure your module follow these steps:

  1. On the top menu bar, click on "Extension"-"Module Manager"
  2. Search for the module called "Accessible slideshow" and click on the module to access the backend options

Common configuration

Follow these steps to configure the slideshow with a "classic" configuration:

Now define the slides. Remember to set a title for each slide.

Back to index

Template Update

This section has been moved to a different guide. Please read the template update process at this link.

Back to index

Older guides

Creative Commons License Template Installation Guide by Francesco Zaniol. This document is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Copyright © Francesco Zaniol