JUX Focus 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”.

TEMPLATE INSTRUCTION

1. About Joomla version used in JUX Focus

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 Focus

JUX Focus - Flat art portfolio template
 
Art works need their own way to be presented. With JUX Focus, they found that way. JUX Focus is the simple, aesthetic template for blog, art gallery, exhibition, paints, decoration and art-related websites. It is available in Joomla 3, display perfectly on PC and all hand held devices. Fully equipped with Bootstrap, HTML5 & CSS3, K2 and social network tabs, the template allows you to share your works easily with special design. 

3. About JUX Focus Template User Guide

The user guide provided is to help you to quickly learn about JUX Focus 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:

3.1 Template Instruction 

3.2 Download & Install

3.3 Background Color

3.4 Home page Configuration

3.5 Blog page Configuration

3.6 Work page Configuration

3.7 Contact Us page Configuration

3.8 Template Customization

3.9 Logo Customization

3.10 Megamenu Configuration

3.11 Recommendation

4. Features

- 100% responsive & retina ready
Flat design makes JUX focus look beautiful on all devices, especially on Windows phone
-  Fast load and simple full screen pages
SEO friendly & convenient to move through the pages
- Flexibly present your pictures and add extra effects with CSS3
The site is suitable to present all kind of on Windows phonepictures, videos and digital artworks in an impressive way
- Smart JUX social tab plugin (worth $15)
Update your site instantly with your fans
- Intelligent JUX portfolio component(worth $30)
Brings to your site an exceptional gallery
- Free combination colours to design your unique website
9 predefined colours to assign for different page sections. You can easily add more to create your own site 

5. Joomlaux Extensions Supported

Here are the extensions used in JUX Focus template:

Modules

Components

6. 3rd  Party Extensions Supported

7. Layouts & Module Positions

Layouts

Here are 3 different layouts used in JUX Focus  template:

Module positions

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

8. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. JUX Focus 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.  

8.1 T3 Framework Introduction

More about T3 framework, please visit HERE

8.2 T3 Installation

Please visit HERE

8.3 T3 Setting

Please visit HERE

8.4 Layout System

Please visit HERE

8.5 Customization

Please visit HERE


 

DOWNLOAD&INSTALL

1. Plan your site Developer
 
1.1  Kick-start a New Joomla Site? - If you are planning to start fresh with a new Joomla site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the How to install Quickstart Package documentation for the in-depth how-to guide for Quickstart Installation.
 
1.2Install on your existing live site? - If you are planning to use this template for your existing Joomla site, then you should follow the How to make your site look like demo site guide first to dig in the steps involved.
 
2. Download Template and Extensions
 
To download JUX Focus 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: JUXFocus_Source.zip Unzip it so you can start upload:
 
 
3. Install Template and Extensions
 
Once you successfully Download the files you need, You'll have to:
 
- Install the template files into your Joomla system.
 
-  At default, during the installation process, JuxFocus  template will be installed with the settings we're used as on the demo website. Therefore, if you would like to make any changes in configuration, it's recommended that you should complete the setup (including installing all the modules and plugins along with the templates as on demo) then carry out any customization afterwards
 

View how to install extension guide

 
 

BACKGROUND COLOR

In this guide, we divide into 3 parts:

1. Background color

In JUX Focus, we supported 11 background colors, you can see below:

Here is the meaning of each background colors:

1.1 bg-yellowgreen-color: this background allows displaying a yellowgreen background image.

Ex: you can see image

1.2 bg-pink-color: this background allows displaying a pink background image

Ex: you can see image

1.3 bg-turquoise-color: this background allows displaying a turquoise background image

Ex: you can see image

1.4 bg-yellow-color: this background allows displaying a yellow background image

Ex: you can see image

1.5 bg- darkgreen-color: this background allows displaying a darkgreen background image

Ex: you can see image

1.6 bg-dull-purple-color: this background allows displaying a purple background image

Ex:

1.7 bg-dim-gray-color: this background allows displaying a gray background image

Ex:

1.8 bg-misty-rose-color: this background allows displaying a misty-rose background image

Ex:

1.9 bg-indian-red-color: this background allows displaying a indian-red background image

Ex:

1.10 bg-gray-light-color: this background allows displaying a gray-light background image

Ex:

1.11 bg-white-color: this background allows displaying a white background image

Ex:

Note: You can define  other background for template by go to {site}/template/jux_focus/less/style.less to define background you want to display in modules

2. Use background color by adding module class suffix for modules(homepage modules)

In homepage, we used background color by adding module class suffix for modules, you can see structure of class suffix in Homepage

--> Structure: module class suffix||{title}

The structure is divided into 2 parts and these parts are separated by ||

+> Part 1: module class-suffix

+> Part 2: configure subtitle

2.1 Module class-suffix

IIn homepage, each module class suffix defines the background color of the module, and you can select background color in part 1 to set the module background color.

Ex: module About Focus

Module class suffix: bg-pink-color||Team of enthusiastic, energetic

--> You can see frontend

You can easily change background by changing class suffix of module. For instance, you can change class suffix of module About Focus

Module class suffix: bg-darkgreen-color||Team of enthusiastic, energetic

-->Frontend

2.2 Configure subtitle

Subtitle is the lower text under module’s title which describes your module’s content in more detail. Subtitle only displays when you select Show for Title in module’s setting.

You can change subtitle by going to class suffix and change subtitle here

Ex: module About Focus

Module class suffix: bg-pink-color||Team

--> Frontend

Hide subtitle

If you don’t want to display subtitle, just remove the subtitle part in module’s class suffix like below:

--> Frontend

3. Use background color by adding code for module

Each module banner uses background color by adding code in Custom HTML of module

--> Structure:

Example: module Banner About

You can easily change background by changing code in Custom HTML of module. Example: module Banner About

<div class="bg-darkgreen-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">About</div>
<div class="small-text">Update the trends and latest news</div>
<div> </div>
</div>
</div>
<p> </p>

You can see frontend after changing

 

HOME PAGE CONFIGURATION

Frontend

1. Module About Focus

Module type: Custom HTML
Position: fullpage
Module Class Suffix: bg-pink-color||Team of enthusiastic, energetic

HTML code

<div class="focus-about">
<div class="col-md-6 col-sm-6 col-sx-12"><img src="images/joomlaux/demo/about-focus.gif" alt="" /></div>
<div class="col-md-6 col-sm-6 col-sx-12">
<div class="about-title"><a href="#">Full Featured Digital Agency</a></div>
<div class="about-desc">We are a full featured Digital Agency based in Europe that focuses on innovation, UX and new technologies. We thrive to be ahead in terms of technology and innovation, using state-of-art methodology in digital creation, being it Web or Mobile.</div>
<div class="about-button"><a href="#">Explore</a></div>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Module Class Suffix

Video tutorial

2. Module Work Focus

Module type: Custom HTML
Position: fullpage
 bg-turquoise-color||Profesional Work

HTML code

<div class="focus-work col-md-12">
<div class="col-md-3 col-sm-6 col-sx-12">
<div class="work-image-1 buzz"><img src="images/joomlaux/demo/work-1.png" alt="" /></div>
<h3 class="work-title"><a href="#">Photography</a></h3>
</div>
<div class="col-md-3 col-sm-6 col-sx-12">
<div class="work-image-2"><img src="images/joomlaux/demo/work-2.png" alt="" /></div>
<h3 class="work-title"><a href="#">Studio</a></h3>
</div>
<div class="col-md-3 col-sm-6 col-sx-12">
<div class="work-image-3"><a href="#"><img src="images/joomlaux/demo/work-3.png" alt="" /></a></div>
<h3 class="work-title"><a href="#">Design</a></h3>
</div>
<div class="col-md-3 col-sm-6 col-sx-12">
<div class="work-image-4 pulse-grow"><img src="images/joomlaux/demo/work-4.png" alt="" /></div>
<h3 class="work-title"><a href="#">Video</a></h3>
</div>
</div>

Frontend

BackendSettings

Menu assignment

Module Class Suffix

Video tutorial

3. Module Latest Entries

Module type: K2 Content
Position: fullpage
Module Class Suffix: bg-yellow-color||Update the trends and latest news

Frontend

Backend Settings

Menu assignment

Video tutorial

4. Module Your Ideal Focus

Module type: Acymailing Module
Position: fullpage
Module Class Suffix: ideal-section bg-darkgreen-color||Our follow the orthes

Frontend

Backend Settings

Menu assignment

Video tutorial

5. Module  Slider Fullpage

Module type: Custom HTML
Position: fullpage

Frontend

In slideshow, we loaded 3 modules: Slideshow1, Slideshow2, Slideshow3 in Custom HTML style for slide position.

Then we created module Slider Fullpage to loaded 3 modules.

Now we’ll guide you to do step by step:

5.1 Create 3 modules : Slideshow1, Slidshow2, Slideshow3

Type: Custom HTML
Position: slide

5.1.1. Create module Slideshow1

Module type: Custom HTML
Position: slide

HTML code

<div class="slideshow1">
<div class="larger-text">Hai, we’re <span class="rw-words grow animation bounceIn"> Focus</span></div>
<div class="medium-text">We Love art - we do it best when capturing the best moment in each photo. we are photographers living in hanoi</div>
<div class="slide-button"><a href="#">Learn more</a></div>
</div>

Frontend

Backend Settings

Menu assignment

Advanced Settings

Similalry, do the same step with module Slideshow2, Slideshow3 with bellow information

5.1.2 Module Slidshow2

Module type: Custom HTML
Position: slide

Custom HTML

<div class="slideshow1">
<div class="larger-text">Don't read, <span class="rw-words buzz-out  animation bounceIn">feel</span> it</div>
<div class="medium-text">Each picture means thousand words We will show you thousands picture</div>
<div class="slide-button"><a href="#">Learn more</a></div>
</div>

5.1.3 Module Slideshow3

Module type: Custom HTML
Position: slide

Custom HTML

<div class="slideshow1">
<div class="larger-text">Not talking a <span class="rw-words wobble-top">picture</span></div>
<div class="medium-text">We design . we inspire . we make it alive</div>
<div class="slide-button"><a href="#">Learn more</a></div>
</div>

5.2 Create module Slider Fullpage to load 3 modules Custom HTML on homepage

Type: Custom HTML
Postion: fullpages

Custom HTML

<p>{loadposition slide}</p>

Backend Settings

Menu assignment

Module Class Suffix

Video tutorial

5.3 Effects in slides

In slides we used effects of http://ianlunn.github.io/Hover/, you can go to this website to learn more about effects and change slides your website.

6. Module Copyright

Module type: Footer
Position: footer

Frontend

Backend Settings

Menu assignment

Video tutorial

7. JUX Social Tabs

Module type: Jux Social Tabs
Position: social

Frontend

Backend Settings

Menu assignment

Social Network Options

Video tutorial

APPLE STYLE PAGE CONFIGURATION

In this guide, we divide into 3 part:

1. Guide how to enable Apple Style template

- Step 1: Clone the default style

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

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

2. Guide how to change logo

Here is frontend logo of Apple Style:

In this page we used a different logo with logo of homepage, you need to enable this logo by doing the following:

- Go to Extensions-->Template Manager-->Select theme you’re using:

3. Guide how to create&configure modules in Apple Style

3.1 Module  Apple Style 1

Module type: Custom HTML
Position: fullpage
Module Class Suffix: bg-gray-light-color section-apple1

Custom HTML

<div class="apple-style1">
<div class="apple-style1-info col-md-4"><img src="images/joomlaux/demo/apple-style1-iphone5c.png" alt="" /> <img src="images/joomlaux/demo/apple-style1-iphone5c2.png" alt="" />
<div class="apple-style1-desc">
<ul>
<li><a href="#">Watch the video</a></li>
<li><a href="#">Watch the keynote</a></li>
</ul>
</div>
</div>
<div class="apple-style1-img col-md-8"><img src="images/joomlaux/demo/apple-style1.jpg" alt="" /></div>
</div>

Frontend

Backend Settings

Menu assignment

Module Class Suffix

3.2 Module Apple Style 2

Module type: Custom HTML
Position: fullpage
Module Class Suffix: bg-white-color

Custom HTML

<div class="apple-style2">
<div class="apple-style2-img col-md-6 col-sm-12 col-xs-12"><img id="iphone2" src="images/joomlaux/demo/apple-style21.png" alt="" /> <img id="iphone3" src="images/joomlaux/demo/apple-style22.png" alt="" /> <img id="iphone4" src="images/joomlaux/demo/apple-style23.png" alt="" /></div>
<div class="apple-style2-info col-md-6 col-sm-12 col-xs-12"><img src="images/joomlaux/demo/apple-style2-title.png" alt="" />
<div class="apple-style2-desc">Every new iPhone comes with better-than-ever versions of iPhoto, iMovie, GarageBand, Pages, Numbers, and Keynote. So you can be creative and productive right from the start. You also get great apps for email, surfing the web, sending texts, making FaceTime calls — there's even an app for finding new apps.</div>
<div class="apple-style2-button"><a href="#">Learn more about the design of iPhone 5c</a></div>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Module Class Suffix

3.3 Module Apple Style 3

Module type: Custom HTML
Position: fullpage
Module Class Suffix: bg-white-color moveDown

Custom HTML

<div class="apple-style3">
<div class="apple-style3-img col-md-5 col-sm-12 col-xs-12"><img id="iphone-yellow" src="images/joomlaux/demo/apple-style31.png" alt="" /> <img id="iphone-red" src="images/joomlaux/demo/apple-style32.png" alt="" /> <img id="iphone-blue" src="images/joomlaux/demo/apple-style33.png" alt="" /></div>
<div class="apple-style3-info col-md-7 col-sm-12 col-xs-12"><img src="images/joomlaux/demo/apple-style3-title.png" alt="" />

<div class="apple-style3-desc">A6 chip. 8MP iSight camera. 4-inch Retina display. Ultrafast LTE wireless. iPhone 5c has the things that made iPhone 5 an amazing phone — and more, including iOS 7. All in a completely new design that feels great in your hand.</div>
<div class="apple-style3-button"><a href="#">Learn more about the design of iPhone 5c</a></div>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Module Class Suffix

3.4 Module Apple Style 4

Module type: Custom HTML
Position: fullpage
Module class suffix: bg-white-color moveDown

Custom HTML

<div class="apple-style4">
<div class="apple-style4-info"><img src="images/joomlaux/demo/apple-style4-title.png" alt="" />
<div class="apple-style4-desc">With a vibrant, lively interface and new features that take full advantage of the technology inside, iOS 7 is made for iPhone 5c on every level.</div>
</div>
<div class="apple-style4-img col-md-12"><img src="images/joomlaux/demo/iphone-two.png" alt="" /></div>
</div>

Frontend

Backend Setting

Menu assignment

Module Class Suffix

3.5. Module Apple Style 5

Module type: Custom HTML
Position: fullpage
Module Class Suffix: bg-gray-light-color section-apple5

Custom HTML

<div class="apple-style5">
<div class="apple-style5-img col-md-12"><img src="images/joomlaux/demo/apple-style5.jpg" alt="" /></div>
<div class="apple-style5-info col-md-12"><img src="images/joomlaux/demo/apple-style5-title.png" alt="" />
<div class="apple-style5-desc">Every new iPhone comes with better-than-ever versions of iPhoto, iMovie, GarageBand, Pages, Numbers, and Keynote. So you can be creative and productive right from the start. You also get great apps for email, surfing the web, sending texts, making FaceTime calls — there's even an app for finding new apps.</div>
<div class="apple-style5-button"><a href="#">Learn more</a></div>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Module Class Suffix

3.6 Module Static Image

Module type: Custom HTML
Position:staticing

Frontend

Backend Setting

Menu assignment

ABOUT PAGE CONFIGURATION

1. Guide how to configure banner module 

In each banner module, you can change background color for module. In Focus template we support 11 background color(refer to background color to learn more)

1.1 Module Banner About

Module type: Custom HTML
Position: slideshow

Custom HTML

<div class="bg-pink-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">About</div>
<div class="small-text">Update the trends and latest news</div>
<div> </div>
</div>
</div>

Frontend

Backend

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

Note: You can see part Background color to change background for module.

Menu assignment: Only on the pages selected

Similarly, do the same step with other  module:

1.2 Module Banner Blog

Module type: Custom HTML
Position: slideshow

Custom HTML

<div class="bg-yellow-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">Blog</div>
<div class="small-text">Update the trends and latest news</div>
<div> </div>
</div>
</div>

1.3 Module Banner Contact

Module type: Custom HTML
Position: slideshow

Custom HTML

<div class="bg-darkgreen-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">Contact</div>
<div class="small-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<div> </div>
</div>
</div>

1.4 Module Banner Work

Module type: Custom HTML
Position: slideshow

Custom HTML

<div class="bg-turquoise-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">Work</div>
<div class="small-text">Work Hard, Play Smart</div>
<div> </div>
</div>
</div>

1.5 Module Banner Element

Module type: Custom HTML
Position: Slideshow

Custom HTML

<div class="bg-pink-color custom-slideshow">
<div class="slideshow-content">
<div class="xlarger-text">Element</div>
<div class="small-text">Typi non habent claritatem insitam</div>
<div> </div>
</div>
</div>

2. Guide how to configure other modules in About us page

2.1 Module About Us

Module type: Custom HTML
Position: navheader
Module Class Suffix : mod-love||Your awesome subtitle goes here.

HTML code

<div class="about-us">
<div class="about-info">
<h3>We Get The Job Done!</h3>
<span class="about-desc"> We are a full featured Digital Agency based in Europe that focuses on innovation, UX and new technologies. We thrive to be ahead in terms of technology and innovation, using state-of-art methodology in digital creation, being it Web or Mobile. Working on Web for years and more recently on Mobile, we followed the market needs and developed other competencies that along with our main skills, help us deliver and overwhelm. From Video Production to Motion Graphics and 3D, we get the job done!We Get The Job Done! </span></div>
<div class="profile-box animation fadeIn col-md-12 clearfix">
<div class="pull-left"><img class="profile-img pull-left" src="images/joomlaux/demo/ab1.jpg" alt="" />
<div class="profile-img-hover"><a class="info" title="Full Image" href="#">Full Image</a></div>
</div>
<div class="profile-desc pull-right col-xs-12">
<h3><span class="first-work">Jane Doe</span> Photograper</h3>
<p>Quisque luctus, quam eget molestie commodo, lacus purus cursus purus, nec rutrum tellus dolor id lorem.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<ul class="profile-social-box">
<li><a class="fa fa-facebook" href="#"> </a></li>
<li><a class="fa fa-twitter" href="#"> </a></li>
<li><a class="fa fa-envelope" href="#"> </a></li>
<li><a class="fa fa-skype" href="#"> </a></li>
</ul>
</div>
</div>
<div class="profile-box animation fadeIn col-md-12 clearfix">
<div class="pull-right"><img class="profile-img pull-right" src="images/joomlaux/demo/ab2.jpg" alt="" />
<div class="profile-img-hover"><a class="info" title="Full Image" href="#">Full Image</a></div>
</div>
<div class="profile-desc pull-left col-xs-12">
<h3><span class="first-work">Jane Doe</span> Designer</h3>
<p>Quisque luctus, quam eget molestie commodo, lacus purus cursus purus, nec rutrum tellus dolor id lorem.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<ul class="profile-social-box">
<li><a class="fa fa-facebook" href="#"> </a></li>
<li><a class="fa fa-twitter" href="#"> </a></li>
<li><a class="fa fa-envelope" href="#"> </a></li>
<li><a class="fa fa-skype" href="#"> </a></li>
</ul>
</div>
</div>
<div class="profile-box animation fadeIn col-md-12 clearfix">
<div class="pull-left"><img class="profile-img" src="images/joomlaux/demo/ab3.jpg" alt="" />
<div class="profile-img-hover"><a class="info" title="Full Image" href="#">Full Image</a></div>
</div>
<div class="profile-desc pull-right col-xs-12">
<h3><span class="first-work">Jane Doe</span> Digital Art</h3>
<p>Quisque luctus, quam eget molestie commodo, lacus purus cursus purus, nec rutrum tellus dolor id lorem.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<ul class="profile-social-box">
<li><a class="fa fa-facebook" href="#"> </a></li>
<li><a class="fa fa-twitter" href="#"> </a></li>
<li><a class="fa fa-envelope" href="#"> </a></li>
<li><a class="fa fa-skype" href="#"> </a></li>
</ul>
</div>
</div>
<div class="profile-box animation fadeIn col-md-12 clearfix">
<div class="pull-right"><img class="profile-img pull-right" src="images/joomlaux/demo/ab4.jpg" alt="" />
<div class="profile-img-hover"><a class="info" title="Full Image" href="#">Full Image</a></div>
</div>
<div class="profile-desc pull-left col-xs-12">
<h3><span class="first-work">Jane Doe</span> Stylist</h3>
<p>Quisque luctus, quam eget molestie commodo, lacus purus cursus purus, nec rutrum tellus dolor id lorem.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<ul class="profile-social-box">
<li><a class="fa fa-facebook" href="#"> </a></li>
<li><a class="fa fa-twitter" href="#"> </a></li>
<li><a class="fa fa-envelope" href="#"> </a></li>
<li><a class="fa fa-skype" href="#"> </a></li>
</ul>
</div>
</div>
</div>

Frontend

<

Backend Settings

Menu assignment

2. Module L o v e

Module type: Custom HTML
Position:navfooter

HTML code

<div id="carousel-2" class="jux-love carousel slide col-md-12 container" data-ride="carousel"><!-- Indicators --> <!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="active item col-md-offset-1 col-md-10">
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer1.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer2.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer3.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer4.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer5.png" alt="" /></a></div>
</div>
<div class="item col-md-offset-1 col-md-10">
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer2.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer3.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer4.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer5.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer1.png" alt="" /></a></div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-2" data-slide="prev"> </a> <a class="right carousel-control" href="#carousel-2" data-slide="next"> </a></div>

Frontend

Backend Settings

Module class suffix

Menu assignment

 

BLOG PAGE CONFIGURATION

1. Module Latest items

Module type:  K2 Content
Position: sidebar

Frontend

Backend Settings

Menu assignment

2. Module Latest Comments

Module type: K2 Comments
Position: sidebar

Frontend

Backend Settings

Menu assignment


 

WORK PAGE CONFIGURATION

In Work page we used component Jux_portfolio.We will guide you to configure this component.

Now let’s see the pictures for this component in Focus template:

General

Gallery

Lightbox

Category

Item

Note: To learn more about JUX_portfolio you install our quickstart to see configure and go to OurWiki

 

CONTACT US PAGE CONFIGURATION

1. Component Contact Us

Frontend

 

To configure, you can go go backend: Component--> Contacts--> Select Categories and create category for Component

Category

Contacts

Miscellaneous Information

2. Module JUX Google Map

Module type: JUX Google Map
Position: navfooter

Frontend

Backend Settings

Menu assignment

Note: To learn more about JUX Google Map, please go to our Wiki

 

TEMPLATE CUSTOMIZATION

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 or layout so in one website, you can have menus with different themes and layouts.

2. Layout Configuration

2.1 Select layout for style

In JUX Focus, each style will use one layout(but please keep in mind that one site uses many styles --> so one site can use multiple layouts simultaneously because T3 uses 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 to 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.







 

LOGO CUSTOMIZATION

Here is frontend Logo image

1. Change the Logo image

There are 2 ways to change logo for JUX Focus 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 {site}/   template/jux_focus/less/

// T3 LOGO
// --------------------------------------------------
@t3-logo-image:               "@{t3-image-path}/logo.png";

2. Logo Styling

To customize style for logo, open file style.css that is located in the {site}/template/jux_focus/less/style.css folder. Search for the logo text, you’ll find the style where you can either style or customize it.

// 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;
  }
}

 




 

MEGAMENU CONFIGURATION

1. Megamenu Configuration

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

1.1 Select a menu to configure Megamenu for the menu items in the selected menu

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

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

2. Configuration Level

There are 3 levels of configuration that you should know

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

2.2 Sub- menu configuration

2.3 Column configuration

Note: In megamenu we created to class suffix left-logo and right-logo-right for menu Feature&Work, you can see the Images

Menu Feature we created Extra Class: left-logo

Menu Work we created Extra Class: right

3. Off-cavas sidebar config

The new Off Cavas sidebar is now independent with Collapse Navigation for small screens. The Off cavas sidebar displays content from defined  position.

3.1 Enable Off Cavas sidebar

To enable Off Cavas sidebar, open Add-ons tab then enable Off Cavas sidebar

Assign module position to Off Cavas-sidebar.By default, off-cavas will be assigned to off-cavas position

Add content for Off Cavas sidebar by creating modules then assign them to off-cavas position

Front-end Appearance

3.2 Use Off-Cavas as Navigator in small screens

In case you want to display Off-Cavas sidebar as navigation in small screens like tablet, mobile, please disable Off-cavas sidebar in responsive layout.

Frontend Appearance:

 


 

RECOMMENDATION

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.