DOCUMENTATION
From
JOOMLAUX
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:
Template Instruction
Download&Install
Homepage Configuration
K2 Page Configuration
Contact Us page configuration
Megamenu Configuration
Logo Customization
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
JUX Google Map
JUX CSS3 Accordion Slider
6. 3rd Party Extension Supported
Module K2
AcyMailing Module
Unite Revolution Slider2
7. Layout & Module Positions
Layout
Here are 3 different layouts used in JUX Capulus template:
Content- Sidebar
Sidebar-Content
No-Sidebar
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:
Install the template file onto your Joomla system.
At default, during the installation process, JUX Capulus 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
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>
Module type: Unite Revolution Slider2 Module position: slideshow
Frontend
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>
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
5. Module Feature
Module type: JUX CSS3 Accordion Slider Module position: spotlight 1-1
Frontend
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> </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> </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> </p> </div> </div> </div>
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
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
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
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
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
12. Module Newsletter
Module type: AcyMailing Module Module position: footer-3
Frontend
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
14. Module Footer
Module type: Footer Module position: footer
Frontend
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
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
2. Module Tags
Module type: K2 Tools Module position: sidebar
Frontend
3. Module Recent Post
Module type:K2 Content Module position: sidebar
Frontend
4. Module Archived
Module type: K2 Tools Module position: sidebar
Frontend
5. Module Recent Comments
Module type: K2 Comments Module position: sidebar
Frontend
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
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:
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>
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.
Step 1: Duplicate the template default style:
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.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
Step 1: Select Theme: all theme will be listed here , select theme you want to customize
Step 2: Custom your theme with pre-defined paramers. In the setting bar, open the parameter group you want to configure, change value for the pre-defined parameters.
Step 3: you can add External CSS Urls to import and use for ThemeMagic. It's very useful to load web fonts such as Goggle fonts. You can add many external CSS urls, just make sure each external CSS url is in one line. Opening the "Advanced" group, adding your external CSS url, change setting of pre-defined parameters then save as the theme.
Step 4: hit the Preview button to view the changes, if you satisfy with the changes, please save as the theme.
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.
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:
Megamenu options: how to use options in the Megamenu configuration panel like: how to enable sub-menu, how to assign module, how to add new column/row, etc >> detail documentation
Style Megamenu: how to add style for a menu item, sub-menu, column or row in Megamenu >> detail documentation.
Add icon for menu item in Megamenu: how to add icon for menu item in Megamenu: Font awesome icons and Bootstrap icons >> detail documentation
Animation configuration: multiple animation types for Megamenu: Fading, slide, elastic, room >> detail documentation
Video tutorials: how to work with Megamenu configuration panel >> view video now
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.