JUX Fashion Template Documentation


Welcome to our Profile. Grab your drink and let’s get to know each other a little! We are JoomlaUX (“jux” is pronounced as /nu:/ if you don’t know how). We’ve been working and creating and playing with Joomla for several years. Our team has highly skilled & experienced geeks who share passion and desire for Joomla, of bringing better work to Joomla Community. Sometimes we honestly think we’re just children playing around with work & everything to us boils down to curiosity. Work smart. Play hard. Be curious. Try new things. These are the values we respect in anything we do. We’re interested in what’s good. You ain’t different, are you? We designers and developers should always keep the users in mind when we work. Ralph Marston once said “Excellence is not a skill, it is an attitude”.

1. About Joomla version used in JUX Fashion

All Joomlaux templates run on Joomla 3.x version (Joomla 3.0, 3.1…). Therefore, your site must install Joomla 3.x version to use our template. The installation of Joomla 3.x only requires a few steps and you can do within a minute!

2. About JUX Fashion

JUX Fashion is a cute & pretty template to showcase your works. It is designed with passionate about fashion, trend highlight and inspired by Pinterest design to show your content effectively. JUX Fashion makes your work shinning and friendly with mobile interface. Be social, be connective, be Fashion!
 
3. About JUX Fashion Template User Guide

The user guide provided is to help you to quickly learn about JUX Fashion template and how to use it easily. This documentation is recommended for both non-advanced & advanced users. Please read carefully.

Main aspects covered in the user guide:

  1. Template Instruction

  2. Download&Install

  3. Homepage Module Configuration

  4. About Us Page Configuration

  5. K2 Page Configuration

  6. Contact Us Page Configuration

  7. Template Customization

  8. Loggo Customization

  9. Megamenu Configuration

  10. Recommendation

4. Features

5. 3rd  Party Extension Supported

6. Layout & Module Positions

Module 

Layout

Here are 3 different layouts used in JUX Fashion template:

Module positions

Take a look at the picture below for all modules’ position on JUX Fashion:

7. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. JUX Fashion uses T3V3 framework which comes with brand-new look, design approach and incredibly powerful customization feature. Please follow the links provided below to learn more about T3 framework and its implementation.  

7.1 T3 Framework Introduction

More about T3 framework, please visit HERE

7. 2 T3 Installation

Please visit HERE

7.3 T3 Setting

Please visit HERE

7.4 Layout System

Please visit HERE

7.5 Customization

Please visit HERE


 

1. Choose you site development plan

Before installing template and extensions, please indicate clearly a plan for your site:

2. Download & Install

2.1 Download Template

To download JUX Fashion and extensions please go to  our website  and then log in, go to Download section by clicking on Download item on our Main Menu.

After downloading, you’ll have a .zip file name: JUX_Fashion_Source.zip Unzip it so you can start upload:


 

2.2 Install Quickstart

For easier installation for user, we created a Quickstart file. By installing this file, you will have a template looks like our 

Here is the step-by-step guide to use Quickstart installation:

- Step 1: After downloading template and unzip the downloaded package (as mentioned in the above Download section), go to Quickstart folder and you’ll see quickstart_jux_fashion.zip:

- Step 2: Go to your local host, create a folder (here we named it “Quickstart_JuxFashion”). Copy file quickstart_jux_fashion.zip here and extract its files in this folder. Here are the extracted files:

- Step 3: After done with extracting files, go to local host on your site and click on the name of folder you’ve created above. In this example, click on “Quickstart_juxFashion”:


- Step 4: For the rest step of installing Quickstart, please watch the video below:

2.3 Install  Template

If you don’t use Quickstart installation to install JUX Fashion, please follow these following steps:

- Step 1: Unzip the downloaded package: jux_Fashion_Source.zip. And we have file pkg_jux_fashion_1.0.0.zip

- Step 2: Log in to Joomla! Administrator Panel. Go to Extensions--> Extension Manager  


- Step 3: Click on “Choose File” then select pkg_jux_fashion-XXX.zip to install (XXX is the version of the file). Click “Upload &Install” (if the upload is successful, there will be a message “Installation package was successful”):

- Step 4: After successfully uploading and installing template file, go to Extensions-->Template Manager.

- Select Default for JUX Fashion template for it to display in frontend.  

2.4 Install Module

2.4.1 Install Module 

After installing the template and set it as default template, we will go and install its modules. To install modules for template JUX Fashion, please follow these steps:

- Step 1: Log in to Joomla! Administrator. Go to Extensions --> Extension Manager

- Step 2:  Click on “Choose File”, select files in folder Modules and upload all. There is 1 file:

2.4.2 Enabling Module

In case you install Module

Step 1:  Access the Module Manager panel

Step 2:  Find the new installed module

You can use the search or filter option to find the new installed module easier


Step 3: Enabling the new installed module

When you find the new install module, please open its configuration panel

To display the module in fron-page, you must public and set right position for the module

You have assign the modules to specific menus so that the module will displayed in the assigned module

Step 4:  Configuration the new installed module

Normally, each module has its own settings, the settings allow you to customize the module so that you can have displayed in frontend page as you wish

 

In Homepage we have 12 modules.The below picture indicates modules’ display in Homepage:

 

Now let's go to configure modules in Home page:

1. Module Top

Module type: Menu
Position: position-1

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Menu with the settings bellow:

Menu assignment: On all pages

2. Module Fashion's color

Module type: Menu
Position: position-2
Module Class Suffix: fs-color

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Menu with the settings bellow:

Menu assignment: On all pages

Module Class suffix:  fs-color

3. Module Newletter

Module type: AcyMailing Module
Position: position-4

Frontend

Backend Settings

Menu assignment : On all pages

4. Module Tag Cloud

Module type: K2 Tools
Position:position-4

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as K2 Tool with the settings bellow:

configure backend

Menu assignment: On all pages

5. Module Search

Module type: Search
Position:head-search

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Search with the settings bellow:

Menu assignment: On all pages

6. Module Module config

Module type: Custom HTML
Position: head-search

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and paste Custom HTML for module

<div id="modConfig" class="module-config"><span class="modConfigName">Configuration</span></div>

Menu assignment: On all pages

7. Module About Fashion

Module type: Custom HTML
Position: footer-1

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and enter this Custom HTML:

<ul class="menu-footer-bottom">
<li class="item"><a href="#">Mobile</a></li>
<li class="item"><a href="#">Digital Editions</a></li>
<li class="item"><a href="#">About Our Ads</a></li>
<li class="item"><a href="#">Media Kit</a></li>
<li class="item"><a href="#">Press Room</a></li>
<li class="item"><a href="#">Privacy Policy</a></li>
<li class="item"><a href="#">Your California Privacy Rights</a></li>
</ul>

Menu assignment: On all pages

8. Module Hair Ideas

Module type:Custom HTML
Position: footer-2

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settingsbellow:

Enable  Toggle editor and enter this Custom HTML

<ul class="menu-footer-bottom">
<li class="item"><a href="#">Short Hair Styles</a></li>
<li class="item"><a href="#">2013 Hair Trends</a></li>
<li class="item"><a href="#">Hairstyle Gallery</a></li>
</ul>

Menu assignment: On all pages

9. Module fashion

Module type: Custom HTML
Position:footer-3

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and enter this Custom HTML

<ul class="menu-footer-bottom">
<li class="item"><a href="#">Celebrity Long Hairstyles</a></li>
<li class="item"><a href="#">Smokey Eyes &amp; Inspiration</a></li>
<li class="item"><a href="#">Nail Polish</a></li>
<li class="item"><a href="#">Medium Haircuts &amp; Styles</a></li>
</ul>

Menu assignment: On all pages

10. Module trends

Module type: Custom HTML
Position: footer-4

Frontend

Backend

To have this module, go to bakend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and enter this Custom HTML

<ul class="menu-footer-bottom">
<li class="item"><a href="#">Your California Privacy Rights</a></li>
<li class="item"><a href="#">Terms of Use</a></li>
<li class="item"><a href="#">Community Guidelines</a></li>
<li class="item"><a href="#">Site Map</a></li>
<li class="item"><a href="#">Contact Us</a></li>
<li class="item"><a href="#">About Us</a></li>
<li class="item"><a href="#">International</a></li>
</ul>

Menu assignment : On all pages

11. Module Social Media

Module type: Custom HTML
Position:footer

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with settings bellow:

Enable Toggle editor and enter this Custom HTML

<div class="social-media">
<ul class="menu">
<li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="fa fa-rss" href="#"><span class="social-title">Rss</span></a></li>
<li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li>
<li><a class="fa fa-flickr" href="#"><span class="social-title">Flickr</span></a></li>
<li><a class="fa fa-dribbble" href="#"><span class="social-title">Dribbble</span></a></li>
<li><a class="fa fa-linkedin" href="#"><span class="social-title">LinkedIN</span></a></li>
<li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
</ul>
</div>

Menu assignment:On all pages

12. Module Copyright

Module type: Footer
Position: footer

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Footer with the settings bellow:

Menu assignment: On all pages

VIDEO TUTORIAL: This is video tutorial how to configure Homepage module

In About Page we have 4 modules, now you can see the Image bellow:

Now we will guide you to configure modules:

1. Module header about us

Module type: Custom HTML
Position: no-container
Module Class Suffix: about-us

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and paste this Custom HTML:

<div class="header-about-us">
<p class="header">About Us</p>
</div>

Menu assignment: Only on the pages selected

Module Class Suffix:  about-us

2. Module About Us

Module type: Custom HTML
Position:mast-col
Module Class Suffix: about-us

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow:

Enable Toggle editor and paste this HTML

<div class="slideshow"> 
<div class="jux-gallery carousel slide" data-ride="carousel"><!-- Indicators --> <!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item"><img src="images/joomlaux/demo/aboutus/8.jpg" alt="" />
<div class="carousel-container">
<div class="carousel-caption">
<p class="lead">Many desktop publishing packages and we page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
<div class="item active"><img src="images/joomlaux/demo/aboutus/9.jpg" alt="" />
<div class="carousel-container">
<div class="carousel-caption">
<p class="lead">Many desktop publishing packages and we page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
<div class="item"><img src="images/joomlaux/demo/aboutus/10.jpg" alt="" />
<div class="carousel-container">
<div class="carousel-caption">

<p class="lead">Many desktop publishing packages and we page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
<div class="item"><img src="images/joomlaux/demo/aboutus/11.jpg" alt="" />
<div class="carousel-container">
<div class="carousel-caption">
<p class="lead">Many desktop publishing packages and we page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
<div class="item"><img src="images/joomlaux/demo/aboutus/12.jpg" alt="" />
<div class="carousel-container">
<div class="carousel-caption">
<p class="lead">Many desktop publishing packages and we page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
</div>
</div>

</div>

Detail code HTML by Image:

Menu assignment: Only on the pages selected

Module Class Suffix: about-us

3. Module About Us1

Module type: Custom HTML
Position: mast-col
Module Class Suffix: about-us

Frontend

Backend

To have this module, go to backend: Extensions--. Module manager--> New-->Select type as Custom HTML with the settings  bellow:

Enable Toggle editor and enter this Custom HTML:

<div class="about-us1">
<div class="column">
<div class="columnImage"><img src="images/joomlaux/demo/aboutus/1.jpg" alt="" /></div>
<div class="columnDesc"><span class="spanTitle">but the majority have suffered alteration in some form, by injected humour</span> <span class="spanDate">Jun 13, 2013</span> <span class="spanDesc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</span></div>
</div>
<div class="column">
<div class="columnImage"><img src="images/joomlaux/demo/aboutus/2.jpg" alt="" /></div>
<div class="columnDesc"><span class="spanTitle">The generated Lorem Ipsum is therefore always free from repetition</span> <span class="spanDate">Jun 13, 2013</span> <span class="spanDesc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</span></div>
</div>
<div class="column">
<div class="columnImage"><img src="images/joomlaux/demo/aboutus/3.jpg" alt="" /></div>
<div class="columnDesc"><span class="spanTitle">The standard chunk of Lorem Ipsum used since the 1500s</span> <span class="spanDate">Jun 13, 2013</span> <span class="spanDesc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable</span></div>
</div>
</div>

Detail custom HTML code by Image:

Menu assignment: Only on the pages selected

Module Class Suffix:about-us

4. Module About Us2

Module type: Custom HTML
Module Class Suffix: about-us
Position: mast-col

Frontend

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Custom HTML with the settings bellow

Enable Toggle editor and enter this Custom HTML

<div class="about-us2">
<div class="our-team"><span class="our-team-name">Our Team</span></div>
<div class="list-teams">
<div class="team">
<div class="teamImage"><img src="images/joomlaux/demo/aboutus/4.jpg" alt="" height="280" /></div>
<div class="teamDesc"><span class="spanName">caroline</span> <span class="spanPosition">Fashion Designers</span> <span class="spanDesc">combined with a handful of model sentence structures</span></div>
<div class="teamSocial">
<ul class="menu">
<li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="fa fa-rss" href="#"><span class="social-title">Rss</span></a></li>
<li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li>
<li><a class="fa fa-flickr" href="#"><span class="social-title">Flickr</span></a></li>
<li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
</ul>
</div>
</div>
<div class="team">
<div class="teamImage"><img src="images/joomlaux/demo/aboutus/5.jpg" alt="" /></div>
<div class="teamDesc"><span class="spanName">alan may</span> <span class="spanPosition">Fashionista</span> <span class="spanDesc">combined with a handful of model sentence structures</span></div>
<div class="teamSocial">
<ul class="menu">
<li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="fa fa-rss" href="#"><span class="social-title">Rss</span></a></li>
<li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li>
<li><a class="fa fa-flickr" href="#"><span class="social-title">Flickr</span></a></li>
<li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
</ul>
</div>
</div>
<div class="team">
<div class="teamImage"><img src="images/joomlaux/demo/aboutus/6.jpg" alt="" /></div>
<div class="teamDesc"><span class="spanName">jessica</span> <span class="spanPosition">Fashion Designers</span> <span class="spanDesc">combined with a handful of model sentence structures</span></div>
<div class="teamSocial">
<ul class="menu">
<li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="fa fa-rss" href="#"><span class="social-title">Rss</span></a></li>
<li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li>
<li><a class="fa fa-flickr" href="#"><span class="social-title">Flickr</span></a></li>
<li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
</ul>
</div>
</div>
<div class="team">
<div class="teamImage"><img src="images/joomlaux/demo/aboutus/7.jpg" alt="" /></div>
<div class="teamDesc"><span class="spanName">rebecca</span> <span class="spanPosition">Fashion Designers</span> <span class="spanDesc">combined with a handful of model sentence structures</span></div>
<div class="teamSocial">
<ul class="menu">
<li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="fa fa-rss" href="#"><span class="social-title">Rss</span></a></li>

<li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li>
<li><a class="fa fa-flickr" href="#"><span class="social-title">Flickr</span></a></li>
<li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
</ul>
</div>
</div>
</div>
</div>

Detail HTML code by Image

Menu assignment: Only on the pages selected

Module Class Suffix: about-us

VIDEO TUTORIAL: This is video tutorial how to configure About Us

In K2 papge we have 4 module, now we will guide you to configure modules

1. Module  Categories

Module type: K2 Tools
Position: sidebar-2

Frontend

Backend Settings

Menu assignment: Only on the pages selected

2. Module Tag

Module type: K2 Tools
Position: sidebar-2

Frontend

Backend Settings

Menu assignment: Only on the pages selected

3. Module Archives

Module type: K2-Tools
Position: sidebar-2

Frontend

Backend Settings

Menu assignment: Only on the pages selected

4. Module Calendar

Module type: K2-Tools
Position: sidebar-2

Frontend

Backend Settings

Menu assignment: Only on the pages selected

 

Here is the frontend Contact Us page

 

Now we will guide you to configure Contact Us pages:

1. Module Jux Google Map

Module type: JUX Google Map
Position: map
Module Class Suffix: fs-map

Frontend

Backend Settings

Menu assignment: Only on the page selected

2. Component Contacts

To configure you can go to backend: Component--> Contacts--> Select Categoires and create category for Component.

And here is the category we created

Then we choose: Contacts to create contacts, and we created Contact Us, you can see Image:

 

Miscellaneous Information


 

1. Template Override

To override template, please clone a style then edit as you wish. After that, assign the cloned style to specific menus. The assigned menus will override the same menus in the default style.

Each style can be configured to use a theme, layout so in one website, you can have menus with different themes, layouts.

2. Layout Configuration

2.1 Select layout for style                                   

In Jux Fashion, each style will use one layout(but please keep in mind that one site use many styles --> so one site can use multiple layouts simultaneously because T3 use multiple styles simultaneously)

2.2 Layout Configuration

In the layout setting, there are 2 parts to be configured: Layout structure and Responsive layout configuration

2.2.1 Layout structure configuration

Set number of columns in each spotlight block

2.2.2 Responsive Layout Configuration

Select responsive layout

In each responsive layout, you can enable/disable content resize module position in spotlight block

3. Theme Configuration

The Theme settings allows you  to configure theme, logo. The settings can be also configured in the ThemeMagic setting panel

3.1 Theme Setting

Select a theme for current style. Each style goes with one theme.

4. Change Theme color for template

4.1 Build up your own page

To assign a layout a certain pase, please follow our instruction bellow:

Step 1: Clone the default style

When you install Fashion template, there is only one style: the default style. However, you can create an unlimited number of different styles for your template.

To create a new style in Galiana template, please open : Extensions-->Template Manager--> Select Galiana template default then hit the Duplicate button


On the demo site, we have already duplicated a number of style for different layout

Step 2: Assign layout to the newly created style

Open the new style then select the respective layout that you want to assign to

Step 3: Assign menu type

Now open menu item that you have assigned to the newly created style to configure it

Step 4: Assign style to each menu item

This is called "style override". The menu item that is assigned to a specific style will have the style override the default style.

4.2 Change Theme color for Template

You can go change theme color for template by the following:

Go to Extensions-->Template Manager--> Select Theme style you want and set “default” for template


 

Here is frontend Logo image

1. Change the Logo image

There are 2 ways to change logo for Jux Fashion template

#1: Change logo from the Template Manager

Each style can go with different logo. To set style for the logo, please go to Extensions-->Template Manager--> Select Theme you’re using:

#2:  Change the Logo  from the variable.less file

Another way to change the logo is changing logo image path in variables.less file, which is located in the template/jux_fashion/less

Note: To change logo, you can input a logo image on any size.

2. Logo Styling

To customize style for logo, open file style.css that is located in the template/jux_juxnews/less/style.css folder. Search for the logo text, you’ll find the style where you can either and more styles or customize it as is.

// Logo
// ----
.logo {
  text-align: center;
  // Left align the logo on  Tablets / Desktop
  @media screen and (min-width: @screen-sm) {
    text-align: left;
  }
  a {
    display: inline-block;
    line-height: 1;
    margin: 0;
  }
}
// Logo Image
// ---------
.logo-image {
  // Hide sitename and slogan
  span, small {
    display: none;
  }
}
// Logo Text
// ----------
.logo-text {
  a {
    text-decoration: none;
    font-size: ceil(@font-size-base * 2);
    font-weight: bold;
  }
  &:hover a,
  a:hover,
  a:active,
  a:focus {
    text-decoration: none;
  }
  // Taglines
  .site-slogan {
    display: block;
    font-size: @font-size-base;
    margin-top: 5px;
  }
}

3. Enable/ Disable Logo Image

You can enabe or disable logo image, you can do the following: Open your site backend then go to: Extensions-->Template Manager-->Select template you’re using then choose General

The image below shows the sample megamenu menu in JUX Fashion demo. In fact you can do much more with what Megamenu supports.

Megamenu is a highlight feature of T3 Framework. The visual configuration (what you configure is what you see in front-page) of Megamenu helps you configure it at ease.

1. Enable Megamenu

Open the template style that you want to enable Megamenu, go to Navigation tab then enable the Megamenu option.

2. Configure Megamenu

Megamenu configuration is a global setting so it's the same for all template styles. On the top of template style, hit the Megamenu button.

Select menu to display in frontend

You can select any menu to configure for Megamenu. But it's not the menu to be displayed in your front-page. The menu to be displayed in your front-page is the menu you assign in the Template style setting, under the Navigation tab.

3. Megamenu configuration level

There are 3 configuration level in Megamenu.: Menu item, column and sub-menu

3.1 Menu item

The menu item setting allows you to enable/disable its sub-menu, add extra class to style the menu item, add icon and caption for the menu item.

3.2 Sub- menu configuration

3.3 Column configuration

The above user guide 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 local host and use it as reference for configurations. This is the best way to work with any template.

You should carefully read all the provided resources to take the maximum advantage of our products. 

Support:

If you have any issue or question please raise your support queries in the forum, or our ticket system. We spend more time in getting the information from user in case the support guidelines are not followed