1. About Joomla version used in JUX Capulus

All Our 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 Capulus

Thank you for choosing and using JUX Capulus Template! We really appreciate your choice and hope that our template will bring the best values and benefits to your business.

You can always reach us for support at our Ticket System. And don’t forget to leave us your comment on our product to help us bring you even better and more excellent Joomla templates & extensions.

3. About JUX Capulus Template User Guide

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

  4. K2 Page Configuration 

  5. Contact Us page configuration 

  6. Megamenu Configuration

  7. Logo Customization

  8. Recommendation

4. Features

·         100% Responsive &Retina ready

·         Compatible with Joomla 3.x

·         Awesome Joomla extensions built-in

·         Animate CSS integrated

·          Built with Bootstrap, HTML5 & CSS

·         Gentle & peaceful theme colours

·         Revolution slider integrated (worth $25)

·         Fully integrated with social network (FB, Twitter, G+...) and location finder plugin

·         Slick & Professional Layout

·         Creatively designed Menu page

·         Fully equipped feature for a cafeteria website

·         Joomla style supported: Smart online reservation form, contact form, error 404 page, blog

·         3 layouts with 6 colors supported

·         Font Awesome Icon Integration

·         Provided with hundreds of Shortcode available

·         T3V3 Framework base with beautiful design, powerful customization feature

·         Comprehensive documentation included

·         Optimized and LESS CSS for SEO on site

·         Cross browser compatibility: IE9, IE10, Firefox, Chrome, Opera and Safari

·         Easy to customize and user friendly

·         Delivered with Quickstart Installation

·         Demo content (pages, posts, layouts etc.) is included so that you can be up and running quickly

·         Full source plus individual PSDs for all sections and patterns included

5. JUX Extensions Supported

Here are the extensions used in JUX Capulus template:

Module

6. 3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 3 different layouts used in JUX Capulus  template:

Module positions

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

The below picture indicates modules’ display in Homepage:

8. T3 Framework

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


 

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.2 Installing 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 Capulus and extensions please go to  our website  and then log in, go to Download section by clicking on Download item on our Main Menu.

3. Install Template and Extensions

Once you successfully Download the files you need, You'll have to:

View how to install extension guide

Now we will guide you to configure Homepage module. In Home page we have 14 modules.

The below picture indicates modules’ display in Homepage:

Next, let’s dive in each module’s detailed configuration Homepage

1. Module Contact Information

Module type: Custom HTML
Module position: find-capulus

HTML code

<div class="contact-infor clearfix">
<div class="find-capulus col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-map-marker"></i><a href="https://plus.google.com/102794176670029630371/about?hl=en" target="_blank">Find <span>Capulus!</span></a></div>
<div class="number-call col-md-6 col-sm-6 col-xs-6"><i class="fa fa-mobile"></i>123.4567.8969</div>
</div>
Frontend
 
 
 
Backend Settings
 
Menu assignment
 
Video tutorial
 
2. Module Top Revolution Slider
Module type: Unite Revolution Slider2
Module position: slideshow

Frontend

Backend Settings

General Settings

Menu assignment

Video tutorial

Note: To learn more about module type Unite Revolution Slider2, you can click HERE

3. Module Welcome To Our Capulus

Module type: Custom HTML
Module position: navheader

HTML code

<div class="welcome-to clearfix">
   <div class="header">
       <h2 class="title-header"><span>Welcome To Our Capulus</span>
       </h2>
       <p class="caption-header">Our is a love story inspired by a good cup of coffee
       </p>
   </div>
   <div class="content clearfix">
       <div class="image-welcome col-md-5 col-sm-5 tilt">
            <a href="index.php?option=com_content&view=article&id=1&Itemid=195"><img src="images/joomlaux/demo/welcome-image.png" alt="" /></a></div>
       <div class="caption-welcome  col-md-7 col-sm-7">
               <h3><a href="index.php?option=com_content&view=article&id=1&Itemid=195">Go on, Rewards Yourself</a></h3>
                   <p>If you want to use a passage of, you need to be sure that there is anything embarrassing hidden in the text. Internet tend to reproduce the same extract endless which makes the only true lipsum.</p>
                   <ul class="list-caption">
                      <li>Buy 9 & 10th beverage in on us</li>
                       <li>Free refils in the store</li>
                       <li>The chance to win amazing prizes</li>
                       <li>Discounts and special offers</li>
                       <li>A little extra birthday love from us</li>
                   </ul>
       </div>
   </div>
</div>
Frontend
 

Backend Settings

Detail HTML

Menu assignment

Video tutorial

4. Module  Feature

Module type: Custom HTML
Position: spotlight 1-1

HTML code

<div class="title-feature clearfix">
<h2 class="title"><span>Feature</span></h2>
<p class="caption">If you want to use a passage of, you need to be sure that there
</p>
</div>

Frontend

Backend Settings

Menu assignment

Video tutorial

5. Module Feature

Module type: JUX CSS3 Accordion Slider
Module position: spotlight 1-1

Frontend

Backend Settings

Display Options

Menu assignment

Video tutorial

6. Module Last Update

Module type: Custom HTML
Position: spotlight 2-1

HTML code

 <div class="last-update left-infor col-md-5 col-sm-12 col-xs-12 animation fadeInLeft">
       <h3>Last Update</h3>
       <p class="caption">If you want to use a passage of, you need to be sure that <br>there is anything embarrassing hidden in the text. <br> Internet tend to reproduce</p>
   </div>
   <div class="last-update right-infor col-md-7 col-sm-12 col-xs-12 animation fadeInRight">
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item1">
           <div class="item-image"><img src="images/joomlaux/demo/most-tasty.png" alt="" /></div>
               <h3>Most tasty</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item1">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item2">
           <div class="item-image"><img src="images/joomlaux/demo/maple_glazed.png" alt="" /></div>
               <h3>Maple Glazed</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item2">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item3">
           <div class="item-image"><img src="images/joomlaux/demo/caramel.png" alt="" /></div>
               <h3>Caramel</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item3">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>  
   </div>
Frontend
 

Backend Settings

Menu assignment

Image CustomHTML1

Image CustomHTML2

Video tutorial

7. Module Parallax scroll

Module type: Custom HTML
Position: navcontent

HTML code

<div class="dot-image"><p><img src="images/joomlaux/demo/icon/icon_top.png" alt="" /></p></div>
<div id="parallax" class="parallax">
   <div class="bg parallax-bg"></div><!-- END PARALLAX BACKGROUND -->
   <div class="overlay"></div><!-- END PATTERN OVERLAY -->
   <div class="container clearfix">
     <div class="parallax-content">
      <div class="contact-details">
        <h2>support@nootheme.com</h2>
        <h1>1234-567-890</h1>
        <h2>71 Irving Place Coffee & Tea, Irving Place, New York, NY, United States</h2>
      </div>
    </div>
  </div>
</div>

Frontend

Backend Settings

Menu assignment

Detail Image HTML

Video tutorial

8. Module Promotions

Module type: Custom HTML
Module position: spotlight 3-1

HTML code

<div class="promotions clearfix animation fadeInLeft ">
    <div class="header"><h2><a href="#">Promotions</h2></a></div>
    <div class="content">
        <h3>Happy Hour, between 4pm & 5pm</h3>
        <div class="image morph"><img src="images/joomlaux/demo/promotions-image.png"/></div>  
        <p class="caption">Donec cone lacinia dui, potitor lec tus condimentum lao. Auctor neque a toncus ut eleifend nibh porttitor. Phasellus molestie magna is est bibendum non venenatis nisl temporisalor...<span class="read-more"><a href="#">(read more)</a></span></p>
    </div>
</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

9. Module Special

Module type: Custom HTML
Module position: spotlight 3-2

HTML code

<div class="special animation fadeInRight">
   <div class="header"><h2><a href="#">Special</h2></a></div>
   <div class="content">
       <h3>Gourmet coffee grinded</h3>           
       <p class="caption">Gourmet coffee grinded from only the most tasty beans on earth, selected for a great mixture of fresh and exotic taste!<br><br>Indulge your taste buds with some of the best sweets!</p>
       <div class="image morph"><img src="images/joomlaux/demo/special-image.png"/></div>
       <p class="read-more"><a href="#">Read more...</a></p>
   </div>
</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

10. Module Contact Us

Module type: Custom HTML
Module position: footer-1

HTML code

<div class="animation fadeInLeftBig">
<div class="contact-us-infor"><span>Cleatskins are a revolutionary footwear accessory designed to allow athletes to move swiftly.</span>
<ul id="contact-us">
<li class="icon-home"><p>Dinh Cong Street, Hoang Mai District, Ha Noi City</p></li>
<li class="icon-phone"><p>+(04)123456.789<br>+123456.789</p></li>
<li class="icon-mail"><p><a href="mailto:contact@joomlaux.com">contact@joomlaux.com
</ul>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Detail Image HTML

Video tutorial

11. Module For Business

Module type: Custom HTML
Module position: footer-2

HTML code

<ul class="for-business animation fadeInLeft">
<li><a href="#">Office coffee</a></li>
<li><a href="#">Food Service</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

12. Module Newsletter

Module type: AcyMailing Module
Module position: footer-3

Frontend

Backend Settings

Module Class Suffix

Menu assingnment

Video tutorial

13. Module Follow Us

Module type: Custom HTML
Module position: footer-4

HTML code

<div class="animation fadeInRightBig">
<div class="follow-introtext">Follow Origin on the following social network sites.</div>
<div class="social_media clearfix">
<ul class="menu clearfix">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="googleplus"><i class="fa fa-google-plus"></i></li>
<li class="youtube"><i class="fa fa-youtube-play"></i></li> 
</ul>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Video tutorial

14. Module Footer

Module type: Footer
Module position: footer

Frontend

Backend Settings

Menu assignment

Video tutorial

In K2 page, with each cateogory we created 1module banner  full pages. Following we will guide you to configure modules:

1. Module All Category Banner

Module type: Custom HTML
Module position:slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/allcategory-banner.png"/>
   <h2 class="title">All Category</h2>
   <div class="caption">Indulge your taste buds with some of the best sweets. Gourmet coffee grinded from only the most tasty beans on earth, selected for a great mixture of fresh <br>
and exotic taste. If you want to use a passage of Ipsum, you need to be sure that there is anything embarrassing hidden in the text. All the Ipsum generators on<br>
the Internet tend to reproduce the same extract endless, which makes the only true lipsum.com</div>

</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Similarly, you can do the step with each module at banner position for each category

2. Module Coffe Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/coffee-banner.jpg"/>
   <h2 class="title">Coffee</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

3. Module Tea Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/tea-banner.png"/>
   <h2 class="title">Tea</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

4. Module Cake Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/cake-banner.jpg"/>
   <h2 class="title">Cake</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

5. Module Book Banner

Module type : Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/book-banner.jpg"/>
   <h2 class="title">Book</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

6. Module Gallery Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/joomlaux/demo/gallery-banner.png"/>
   <h2 class="title">Gallery</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

7. Module About us banner

Module type: Custom HTML
Module position: slideshow

HTML code

 <div class="custom-image-banner">
   <img src="images/joomlaux/demo/about-us-banner.jpg"/>
   <h2 class="title">About Us</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

Beside, in K2 page we also provide other modules as listed below:

1. Module Categories

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

2. Module Tags

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

3. Module Recent Post

Module type:K2 Content
Module position: sidebar

Frontend

Backend Settings

Menu assignment

4. Module Archived

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

5. Module Recent Comments

Module type: K2 Comments
Module position: sidebar

Frontend

Backend Settings

Menu assignment

 






 

 

 

Here is frontend of Contact Us page

Now we will guide you to configure Contact Us pages

1. Module JUX Google Map

Module type: JUX Google Map
Module position: slideshow

Frontend

Backend Settings

Display Options

Menu assignment

2. Component Contact

Frontend

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

And here is category we created

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

Miscellaneous Information

You can add Miscellaneous information for Contact Us

<div class="day">Monday-Thursday</div>
<div class="hours">8am - 5pm</div>
<div class="day">Friday</div>
<div class="hours">8am - 6pm</div>
<div class="day">Saturday</div>
<div class="hours">9am - 5pm</div>
<div class="day">Sunday & Holiday</div>
<div class="hours">Close</div>

Display Options

 

 

 

1. Creating new Template style

Template style feature (version 2.5 and above) is to assign different template styles to individual menu items. The default template style can be partially or completely overridden by assigning different template styles to the desired menu items in order to obtain a different look for their respective pages.

From backend: Go to Extensions→ Template Manager→ Select template jux_apps – Default then hit the “Duplicate” button to clone template style:

Step 2 - assign the template style for menu items:

The duplicated template style inherits all settings from its parent template style except the menu assignment (the cloned template style is not assigned to any menu items). Open the cloned template style → Menu Assignment, then assign the template style to menu items. Those menu items will have template style overridden the default template style.

2. Layout Configuration

2.1 Layout Structure configuration

2.1.1 Clone layout:

To quickly create new layout, clone layout in the layout setting panel, all you have to do is hit the “Save as Copy” button. If you are new to T3, you should clone layout to customize so that you always has backup layout.

2.1.2 Switch layout for any template style

Open any template style, go to "Layout" tab, switch layout for current template style.

2.1.3 Assign module position

To assign module position, hover the position you want to change, hit the setting icon then select position. To change number of positions for spotlight block, just select number of position in the spotlight block

2.1.4 Change number of position in spotlight block

For spotlight block, you can select number of positions. It supports up to 6 positions.

 

2.2 Responsive layout configuration

2.2.1 Select responsive layout

In configuration panel, you will see supported responsive layouts: Large, Medium, Small and Extra Small, select responsive layout to configure.

2.2.2 Disable any position

For responsive purpose, some elements in your site does not fit in specific layout, you can disable the position in the layout. The configuration is only applied for current layout.

2.2.3 Resign positions in spotlight block

For modules in spotlight block, you can drag to resize its size.

 

2.3 Layout customization

JUX Universe template is built with T3 Framework , you can refer to T3 documentation for more detail:

2.4  Theme  magic configuration

ThemeMagic is to customize your themes based on pre-define parameters without changing any style file.

 

Firstly, you have to enable the "ThemeMagic" feature. Open any template style manager, in the General tab, enable the ThemeMagic option. Next, hit the "ThemeMagic" button on the top bar list to open the ThemeMagic working panel

Customize your theme with pre-defined parameters

 

Adding new group and parameters to ThemeMagic

If you want to add new group, parameters to ThemeMagic to customize your themes, please refer to T3 documentation.

Detail Documentaion

Video tutorial


 

 

1. Megamenu configuration and customization

1.1 When disable Megamenu

When Megamenu is disabled, the template will use Joomla drop down menu.

To disable Megamenu, open Template style manager, in the “Navigation”tab, disable “Megamenu” option

 

1.2 When enable Megamenu

Megamenu allows you to display your main menu in different ways and flexibly. You can display menu items in columns, add icon and style for menu item, load module for a module menu item..

1.2.1 Enable megamenu

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

 

In the configuration panel of Megamenu, select menu item/submenu/column or row to configure.

For more detail of how to work with Megamenu, please check out the references below:

 

2. Off-Canvas Configuration

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

2.1 Enable Off-canvas sidebar

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

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

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

Frontend appearance

 

2.2 Use Off-Canvas as Navigator in small screens

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


 

Here is frontend Logo image

1. Change the Logo image

There are 2 ways to change logo for JUX Capulus 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_capulus/less/variables.less

2. Logo Styling

To customize style for logo, open file style.css that is located in the template/jux_capulus/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: center;
  }
  @media (max-width: @screen-xs-max) {
    background: url(../images/title-line-image.png) repeat-x;
    background-position-y: 69%;
  }
 a {
    display: inline-block;
    line-height: 1;
    margin: 0;
  }
}

// Logo Image
// ----------
.logo-image {
  // Hide sitename and slogan
  a{
    background: @body-bg;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 100;
    position: relative;
  }
  span, small {
    display: none;
  }
}
// Logo Text
// ----------
.logo-text {
  a {
    z-index: 100;
    position: relative;
    text-decoration: none;
    font-size: ceil(@font-size-base * 2);

    font-weight: bold;
    background: @body-bg;
    padding-left: 10px;
    padding-right: 10px;
  }
  &:hover a,
  a:hover,
  a:active,
  a:focus {
    text-decoration: none;
  }
  // Taglines
  .site-slogan {
    display: block;
    font-size: @font-size-base;
    margin-top: 5px;
  }
}

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.