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
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:
Template Instruction
Download&Install
Homepage Module Configuration
About Us Page Configuration
K2 Page Configuration
Contact Us Page Configuration
Template Customization
Loggo Customization
Megamenu Configuration
Recommendation
4. Features
5. 3rd Party Extension Supported
6. Layout & Module Positions
Module
Layout
Here are 3 different layouts used in JUX Fashion template:
Content- Sidebar
Sidebar-Content
No-Sidebar
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:
Are you making new site? If you are making a new site, we suggest you to use Quickstart to quickly install our product on your site. Just use our Quickstart package to clone the demo site and replace the demo content with yours.
Are you installing on live site? If you’re installing our product on a live site, please follow the installation guide below for necessary steps required. Take a quick look at How to make your site like our demo to learn the steps involved
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”:
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:
mod_jux_maps -XXX.zip
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
Enable and set position for the module
To display the module in fron-page, you must public and set right position for the module
Assign modules to specific menus
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
- Step 4: For the rest step of installing Quickstart, please watch the video below:
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:
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 & Inspiration</a></li> <li class="item"><a href="#">Nail Polish</a></li> <li class="item"><a href="#">Medium Haircuts & 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
Menu assignment: Only on the pages selected
2. Module Tag
Module type: K2 Tools Position: sidebar-2
Frontend
Menu assignment: Only on the pages selected
3. Module Archives
Module type: K2-Tools Position: sidebar-2
Frontend
Menu assignment: Only on the pages selected
4. Module Calendar
Module type: K2-Tools Position: sidebar-2
Frontend
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
Menu assignment: Only on the page selected
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 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