1. About Us
  2. About Leo Beauty Template
  3. Installing Template and Extensions
  4. Module Configuration
  5. Mega Menu
  6. Recommendation

Leo Beauty Template - Userguide

Leo Beauty Template - Userguide


First of all, we would like the thank you for using our work.

Leotheme - a website where you can find the best Joomla! Template, Prestashop theme. We are proud of our high rated themes. As the leader in the RESPONSIVE prestashop theme designer, as well as Joomla!, we continuously improve our products and make some contribution to the web designer world.

Leotheme is also famous for custom work, if you have trouble or help with your website, coding, .... you can find us on Leotheme.com then we will support you or give you suggestions.

Things to Know Leo Beauty Template


Things to Know Leo Combo Template


  1. You - our customers please read the Overview article of the template. This article will give you a quick and complete overview of the template that including template detail information (demo link, version, support link ...), template features and extensions come with the template.
  2. Making a New Site ? - If you are planning to make a new site, we suggest you to use our Quickstart package. The Quickstart packgae contains sample data so once you install the quickstart successfully, you will have a website like our demo. The next step, just replate the demo content with yours. Install Quickstart Package.
  3. Installing on your live site ? - If you are planning to use this template on your already live site. Then you should follow How to make your site look like demo site guide first to know about the steps involved. Then you can follow up the userguide below.

Download Template

From the homepage of http://leotheme.com, navigate to the Download section the select to download type ( single licensed or membership). The below image is the download page of Leo Combo Template

Download Page





Note: The template is developed in the T3 Framework 2, the following extensions included in the framework: JA Extensions manager component, JA Typo Plugin, JA T3 System Plugin

Links to resources on T3 V2 Framework templates and advanced configurations :


  1. Overview
  2. Developer Guides
  3. Customization FAQs
  4. Mega Menu - A missing menu system for Joomla!

Know your Module Positions :


  1. View Module Position Image (used positions only).
  2. Use Module Position Overlay in Template(used & empty module positions).

Main aspects in the userguide:


  1. Installing Template and Extensions in your Joomla
  2. Installing included extensions and Custom HTML Modules.
  3. Mega Menu configs

Installing Template and Extensions in your Joomla


1. Installing Template and Extensions in your Joomla


1.1 Installing Template
  1. Download template from the Download page.
  2. Install the Template: after downloading the template to your PC, install it on your Joomla1 1.7 system. THIS GUIDE will show you step by step instruction with screenshot to install Joomla! 1.7 template.

Note: It Does not look like Demo Site?

On comparison with the demo site. You will see that it does not look like the demo site. So, what’s Missing?
This guide will show you more detail about this and also guide you How to Make the Template Like the Demo Site

1.2 Installing Extensions
  1. Free Extensions : (aka complimentary / included extensions). We use many extensions in our demo site to provide greater flexibility and features. These are provided for free to our members.
  2. Custom HTML Module : To match the design of the template, we also style (CSS) for Custom HTML modules using different div classes. You will need to check the HTML codes and make sure to use the recommended HTML markup to get correct display. We provide the HTML code in this userguide.

Installing and Configuring Included Extensions :
  1. How to install plugin for joomla 1.7
  2. How to install module for joomla 1.7

List of modules / plugins used in Leo Beauty Template Demo :
  1. Lof slideshow module
  2. Lof K2 Scroller Module
  3. Lof Content Slider Module
  4. Extension Manager component (included in T3 Framework v2)
  5. Default Joomla! Extensions
  6. Custom HTML Module

Installing included extensions and Custom HTML Modules.


2. Installing included extensions and Custom HTML Modules.

2.1 Installing included extensions

1. Lof Slideshow Module

Code:
Module Position: slideshow
Module Suffix: _slider

The Lof slideshow module support up to 4 types of data source. In the demo site of Leo Beauty Template, the data source is content and the module is configured to load data from categories to display in the front-end.



Dimensions of the Slideshow images should be 300x480 pixels

Backend Settings

Front-end Appearance



Note: to view the detail userguide of the module, please click HERE

2. Lof K2 Scroller Module

Code:
Module Position: user5
Module Suffix: NOT USED

Backend Settings

The Lof slideshow module support 2 types of data source. In the demo site of Leo Beauty Template, the data source is content and the module is configured to load data from categories to display in the front-end.

Front-end Appearance



3. Lof Content Slider Module

Code: There are 3 content slider modules used in the template.

3.1 Beauty Hair
Module Position: ja-news-1
Module Suffix: NOT USED

Backend Settings

Front-end Appearance



3.2 Makeup

Code:
Module Position: ja-news-1
Module Suffix: NOT USED

Backend Settings

Front-end Appearance



3.3 Beauty Skin

Code:
Module Position: ja-news-2
Module Suffix: NOT USED

Backend Settings

Front-end Appearance



3.4 Salon & Spa

Code:
Module Position: ja-news-2
Module Suffix: NOT USED

Backend Settings

Front-end Appearance



2.2 Joomla 1.7 Default Extensions

1. Module mod_youtubeshowcase

Code:
Module Position: position-5
Module Suffix: NOT USED


Backend Settings
Front-end Appearance



2. Tabs Module

Code: The module is used to display other modules in tabs. In the demo site, we use the module to display Latest News and Most view modules in tabs. So there will be 3 steps to do this.

Step 1: Module mod_tabs_gk4 Configuration
Module Position: position-5
Module Suffix: NOT USED


Back-end Settings

Step 2: Enable and Configure Module Latest News

Code:
Module Position: tab2
Module Suffix: NOT USED


Back-end Settings

Note: You don't need to assign position for the module because it is done in step 1

Step 3: Enable and Configure Module Most Read Content

Code:
Module Position: tab1
Module Suffix: NOT USED


Back-end Settings

Note: You don't need to assign position for the module because it is done in step 1

Front-end Appearance



3. Module mod_tweets

Code:
Module Position: user10
Module Suffix: NOT USED


Backend Settings
Front-end Appearance



2.3 Custom HTML Modules

1. Archived

Code:
Module Position: right1
Module Suffix: _archived


HTML Code:
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>[/b]

Front-end Appearance



2. ADS

Code:
Module Position: right2
Module Suffix: _ads


HTML Code:
<p><img src="images/stories/img/leo_beauty_30.jpg" border="0" alt="" width="98" height="240" /></p>

Front-end Appearance



3. About us

Code:
Module Position: user9
Module Suffix: _about-us


HTML Code:
<p>Aliquam a id massa anim molestie at, amet libero. Vivamus egestas, neque</p>
<p>Ante justo malesuada nunc, elementum pretium mi lacus sit amet turpis curabitur scelerisque sodales. Pellentesque non sapien quis 
ligula iaculis vestibulum</p>
<p>Ut nullam leo imperdiet arcu aliquam, a id massa anim molestie at, amet libero tellus, fames nam erat pretium mattis volutpat leo, aliquam nulla. 
Suspendisse potenti. Mauris in orci eget risus condimentum tristique</p>

Front-end Appearance



4. Contact us

Code:
Module Position: user11
Module Suffix: _contact-us


HTML Code:
<p>Lorem emphasised est dolor sit amet, ong est. Ut nullam leo imperdiet arcu aliquam, a id massa</p>
<ul class="contact">
<li><span>Tell: </span>(+84)1234567890</li>
<li><span>Fax: </span>(+84)1234567890</li>
<li><span>Email: </span>Leotheme@gmail.com</li>
<li><span>Address: </span>Do Duc Duc, Tu Liem, Ha noi, Viet Nam</li>
</ul>

Front-end Appearance

Mega Menu


3. Mega Menu

All of our templates support multiple Menu styles. In the userguide, we will show how to config Mega Menu ( a missing feature in Joomla! )

Front-end Appearance



Backend Settings

1. Main Menu Items



2. Detail Settings for Main Menu Items


Note: You can create icon for your menus as our demo



To enable icon for menu, just open the config panel of the menu, naviagate to the field: Link Image then enter that path to icon you want to enbale it for the menu. The folder that contains the icon must be located in the root installation folder of your site.

Recommendation


Recommendation

The guide above supports you to configure for template like our Demo site. The references are also included in the guide, so please read them if you have trouble when configuring.

To get support, you can raise your issues in our Forum or send us email through the Contact Form or send directly to the following email: leotheme@gmail.com . We will try to answer and solve problems for you as soon as possible (within 2 days)