1. About Joomla version used in JUX Universe

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 Universe

Universe is the responsive Mobile App Joomla Template for app showcase landing page. Designed for mobile first, Universe has interesting skin and effects that will make your app’s features stand out. Built with Joomla 3.x, Bootstrap 3, K2, HTML5 and CSS3, the template is easy to install and customize. Featured with JUX portfolio for beautiful image gallery presentation and unique blog listing in timeline, Universe is good choice for a mobile app landing page

3. About JUX Universe Template User Guide

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

- Home page setting

- Other page setting

- Template Customization

- Megamenu Configuration

- Logo Customization

- Recommendation

4. Features

5. JoomlaUX Extensions Supported

- JUX Portfolio

6.3rd  Party Extension Supported

- K2 Component

7. Layout & Module Positions

Layout

Here are 3 different layouts used in JoomlaUX template:

Module positions

Take a look at the picture below for all modules’ position on Joomlaux

 

8. T3 Framework

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

After you purchased our menu, please following the instruction to download the package. You’ll then find our template  zip file inside the package

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,JUX Wedding  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

 

Here is frontend of homepage

Now we’ll guide you to create & configure each module in Home page:

1. Module name: Top header

Module type: Custom HTML
Position: top-header
Custom HTML
<div class="content-header-top">
   <div class="col-md-6 col-md-offset-6 des-header">
       <h2>We design <span>creative apps</span> you'll fall in love with.</h2>
       <p>
           Lorem ipsum dolor sito amet, consectetuer adipiscing elit, sed diam nonummy nibh euis tincidunt ut laoreet dolore magna aliquam erat volutpat.
       </p>
       <div class="action"> 
		      <a href="#" class="app-store"><img src="images/joomlaux/demo/app-store-text.png" alt="app-store-text">
		</a>
		      <a href="#" class="google-play"><img src="images/joomlaux/demo/google-play-text-logo.png" alt="google-play-text-logo"></a>
       </div>
   </div>
</div>

Frontend

Backend Setting

Detail Custom HTML

Video Tutorial

 

2. Module Social

Module type: Custom HTML
Position: social
Custom HTML
<div class="social">
       <ul class="social-item">
           <li>
               <a href="#"><img src="images/joomlaux/demo/social/icon-facebook.png" alt="" />
               </a>
               <a href="#"><img src="images/joomlaux/demo/social/icon-google.png" alt="" />
               </a>
               <a href="#"><img src="images/joomlaux/demo/social/icon-dribbble.png" alt="" />
               </a>
               <a href="#"><img src="images/joomlaux/demo/social/icon-twitter.png" alt="" />
               </a>
           </li>
       </ul>
   </div>

Frontend

Backend Setting

Detail Custom HTML

Video tutorial

 

3. Module CMC - Newsletter subscription

Module type: CMC- Newsletter subscription
Position: top-header
Module Class Suffix: home-top-header
Intro text
<p>Be the first to hear about our newest apps and special promotions. No Spam.</p>

Frontend

Backend Setting

Module Class Suffix

Video tutorial

 

4. Module our-sevices-content

Module type: Custom HTML
Position: introduct-1
Custom HTML
<div class="wrap-intro">
 <div class="col-xs-12 col-sm-4 our-sevices-col animatedParent">
     <div class="service-icon-wrap fadeInLeft animated">
         <span class="service-icon">
                       <i class="fa fa-globe"></i>
                     </span>
         <div class="text-block">
             <h5>Excepteur sint occaecat cupidatat</h5>
             <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
         </div>
     </div>
 </div>

 <div class="col-xs-12 col-sm-4 our-sevices-col animatedParent">
     <div class="service-icon-wrap fadeInUp animated">
         <span class="service-icon">
                       <i class="fa fa-cloud-upload"></i>
                     </span>
         <div class="text-block">
             <h5>Lorem ipsum dolor sit ament</h5>
             <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
             </p>
         </div>
     </div>
 </div>

 <div class="col-xs-12 col-sm-4 our-sevices-col animatedParent">
     <div class="service-icon-wrap fadeInRight animated">
         <span class="service-icon">
                       <i class="fa fa-dropbox"></i>
                     </span>
         <div class="text-block">
             <h5>Ut enim ad munim veniam</h5>
             <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
             <p>
             </p>
         </div>
     </div>
 </div>
</div>

Frontend

Backend Setting

Detail Custom HTML

Video tutorial

 

5. Module App-provide

Module type: Custom HTML
Position: provide
Custom HTML
<div class="arrow-down animatedParent ">
 <img class="rotateInDownLeft animated" src="images/joomlaux/demo/introduction/arrow-down.png" alt="" />
</div>
<div class="wrap-provide animatedParent">
<div class="col-md-6 content-left fadeInLeft animated">
 <h2>Our apps provide great user experinence</h2>
 <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. We focus on how people experience an interface at every stage of that journey, and believe it’s the tiny details which make up the interactive experience that leave a lasting impression. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
 <p>Qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Typi non habent claritatem insitam; est usus legentis in iis quiem. Minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <p>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-md-6 content-right fadeInRight animated">
   <div class="img">
       <img src="images/joomlaux/demo/introduction/macbook.png" alt="" />
   </div>
</div>
</div>
<div class="arrow-up animatedParent ">
 <img class="fadeInDown animated go" src="/joomlaux/2015/Apps/homepage/images/joomlaux/demo/introduction/arrow-up.png" alt="">
</div>

Frontend

Backend Setting

Detail Custom HTML

Video Tutorial

 

6. Module App-product

Module type: Custom HTML
Position: product
Custom HTML
<div class="wrap-product animatedParent">
   <div class="col-md-6 col-sm-12 fadeInLeft animated">
       <div class="img-product">

           <div class="item"><img src="images/joomlaux/demo/introduction/iphone.png" alt="" />
           </div>
       </div>
   </div>
   <div class="col-md-6 col-sm-12 fadeInRight animated">
       <h2>Looks great on Tablets and iphone retina ready.</h2>
       <div class="intro-app">
        <a href="#"><i class="fa fa-arrow-circle-right"></i>Clear Display illum dolore eu feugiat nulla facilisis.  Retina</a>
        <a href="#"><i class="fa fa-arrow-circle-right"></i>Retina Ready illum dolore eu feugiat nulla facilisis at vero.</a>
        <a href="#"><i class="fa fa-arrow-circle-right"></i>Awsome Features illum dolore eu feugiat nulla</a>
        <a href="#"><i class="fa fa-arrow-circle-right"></i>Great Graphics illum eu feugiat nulla facilisis vero eros</a>
        <a href="#"><i class="fa fa-arrow-circle-right"></i>Smart Design illum eu feugiat nulla facilisis vero eros</a>
       </div>
   </div>
</div>

Frontend

Backend Setting

Detail Custom HTML

Video tutorial

 

7. Module App-featured

Module type: Custom HTML
Position: featured
Custom HTML
	<div class="row clearfix">
	  <div class="col-md-6"></div>
	  <div class="col-md-6">
	    <div class="arrow-down animatedParent ">
	      <img class="rotateInDownLeft animated" src="images/joomlaux/demo/introduction/arrow-down.png" alt="">
	    </div>
	  </div>
	</div>
	<div class="row wrap-featured clearfix animatedParent">
	  <div class="col-md-6 content-left fadeInLeft animated">
	    <h2>Let's check out our apps features:</h2>
	    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. We focus on how people experience an interface at every stage of that journey, and believe it’s the tiny details which make up the interactive experience that leave a lasting impression. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
	    <p>Qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Typi non habent claritatem insitam; est usus legentis in iis quiem. Minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	    <p>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	  </div>
	  <div class="col-md-6 content-right fadeInRight animated">
	    <div class="img">
	      <img src="images/joomlaux/demo/introduction/iphone-app.png" alt="" />
	    </div>
	  </div>
	</div>
	<div class="row clearfix">
	  <div class="wrap_cmc">
	    <div class="col-md-3 col-sm-5 bt-download">
	      <div class="bg-bt">
	        <a href="#" class="download"><i class="fa fa-cloud-download"></i>Download</a>
      </div>     </div>     <div class="col-md-9 col-sm-7 status-download">       <p>Download the free version of our latest app</p>     </div>   </div> </div>

Frontend

Backend Setting

Detail Custom HTML

8. Module Download

Module type: Custom HTML
Position: download
Custom HTML
<div class="col-md-3 col-sm-5 bt-download">
<div class="bg-bt">
         <a href="#" class="download"><i class="fa fa-cloud-download"></i>Download</a>
       </div>
</div>
<div class="col-md-9 col-sm-7 status-download">
<p>Download the free version of our latest app</p>
</div>

Frontend

Backend Setting

Detail Custom HTML

Video Tutorial

 

9. Module testimonials

Module type: Custom HTML
Position: download
Custom HTML
	<div class="testimonial-wrap animatedParent">
	  <div class="container">
	    <div class="testimonial-inner fadeInUp animated">
	      <div class="carousel slide" id="carousel-testimonial">
	        <div class="carousel-inner">
	          <!-- START ITEM 1 -->
	          <div class="item active">
	            <div class="slide-content">
	              <div class="our-customer-info">
	                <div class="avatar">
	                  <a href="#"><img src="images/joomlaux/demo/testimonials/testimonial1.jpg" alt="testimonial1.jpg"></a>
	                </div>
	                <div class="custom-desc">
	                  <h4>Harry Brewer</h4>
	                  <p>CEO of CNS</p>
	                </div>
	              </div>
	              <div class="testimonial-desc">Phasellus tempor fringilla commodo. Ut eu convallis ligula. In mollis maximus felis, et finibus lectus porta a. Aenean id odio ut quam pretium ullamcorper. Proin tortor lacus, rutrum et elit ac, placerat semper velit.</div>
	            </div>
	          </div>
	          <!-- END ITEM 1 -->
	
          <!-- START ITEM 2 -->           <div class="item">             <div class="slide-content">               <div class="our-customer-info">                 <div class="avatar">                   <a href="#"><img src="images/joomlaux/demo/testimonials/testimonial2.jpg" alt="testimonial2.jpg"></a>                 </div>                 <div class="custom-desc">                   <h4>Howard Schultz</h4>                   <p>CEO of CNS</p>                 </div>               </div>               <div class="testimonial-desc">Phasellus tempor fringilla commodo. Ut eu convallis ligula. In mollis maximus felis, et finibus lectus porta a. Aenean id odio ut quam pretium ullamcorper. Proin tortor lacus, rutrum et elit ac, placerat semper velit.</div>             </div>           </div>           <!-- END ITEM 2 -->
          <!-- START ITEM 3 -->           <div class="item">             <div class="slide-content">               <div class="our-customer-info">                 <div class="avatar">                   <a href="#"><img src="images/joomlaux/demo/testimonials/testimonial3.jpg" alt="testimonial3.jpg"></a>                 </div>                 <div class="custom-desc">                   <h4>Larry Page</h4>                   <p>CEO of CNS</p>                 </div>               </div>               <div class="testimonial-desc">Phasellus tempor fringilla commodo. Ut eu convallis ligula. In mollis maximus felis, et finibus lectus porta a. Aenean id odio ut quam pretium ullamcorper. Proin tortor lacus, rutrum et elit ac, placerat semper velit.</div>             </div>           </div>           <!-- END ITEM 3 -->         </div>         <ol class="carousel-indicators">           <li data-target="#carousel-testimonial" data-slide-to="0" class="active"><span class="indicator-title">Indicator Title</span></li>           <li data-target="#carousel-testimonial" data-slide-to="1"><span class="indicator-title">Indicator Title</span></li>           <li data-target="#carousel-testimonial" data-slide-to="2"><span class="indicator-title">Indicator Title</span></li>         </ol>         <a class="left carousel-control" href="#carousel-testimonial" role="button" data-slide="prev"><i class="fa fa-chevron-left"><span class="control-title">Control Title</span></i></a>         <a class="right carousel-control" href="#carousel-testimonial" role="button" data-slide="next"><i class="fa fa-chevron-right"><span class="control-title">Control Title</span></i></a>       </div>     </div>   </div> </div>

Frontend

Backend Setting

Detail Custom HTML

 

10. Module screenshots

Module type: JUX Content Slider
Position: screenshots

Frontend

Backend Setting

Configure for modules

11. Module statistic

Module type: Custom HTML
Position: statistic
Custom HTML

	<div class="statistic-wrap animatedParent">
	  <div class="container">
	    <div class="row">
	      <div class="statistic-col col-xs-12 col-sm-3 bounceIn animated">
	        <div class="statistic-content">
	          <div class="statistic-icon"><i class="fa fa-download"><span class="icon-title">download</span></i></div>
	          <div class="jux-counter">3689</div>
	          <h4 class="statistic-title">Downloads</h4>
	        </div>
	      </div>
	
	      <div class="statistic-col col-xs-12 col-sm-3 bounceIn animated">
	        <div class="statistic-content">
	          <div class="statistic-icon"><i class="fa fa-heart-o"><span class="icon-title">heart</span></i></div>
	          <div class="jux-counter">950</div>
	          <h4 class="statistic-title">Top Rates</h4>
	        </div>
	      </div>
	
	      <div class="statistic-col col-xs-12 col-sm-3 bounceIn animated">
	        <div class="statistic-content">
	          <div class="statistic-icon"><i class="fa fa-star-o"><span class="icon-title">star</span></i></div>
	          <div class="jux-counter">2078</div>
	          <h4 class="statistic-title">Likes</h4>
	        </div>
	      </div>
	
	      <div class="statistic-col col-xs-12 col-sm-3 bounceIn animated">
	        <div class="statistic-content">
	          <div class="statistic-icon"><i class="fa fa-share-alt"><span class="icon-title">share</span></i></div>
	          <div class="jux-counter">1519</div>
	          <h4 class="statistic-title">Shares</h4>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>

Frontend

Backend Setting

Detail Custom

12. Module Feature

Module type: Custom HTML
Position: feature
Custom HTML
<div class="title-feature">
       <p>LIGHTWEIGHT & POWERFUL</p>
       <h3 class="status-feature">Our App's Amazing Features
       <h3 class="line"></h3>
       </h3>
   </div>
   <div class="container">
           <div class="row row-1">
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-1">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f1.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-2">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f2.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-3">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f3.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-4">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f4.png" alt="" />
                       </div>
                   </a>
               </div>
           </div>
           <div class="row row-2">
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-5">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f5.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-6">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f6.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-7">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f7.png" alt="" />
                       </div>
                   </a>
               </div>
               <div class=" col-md-3 col-sm-6 col-xs-12">
                   <a href="#" title="" class="feature-8">
                       <div class="pd"><img src="images/joomlaux/demo/feature/f8.png" alt="" />
                       </div>
                   </a>
               </div>
           </div>
           <div class="row cloudy animatedParent">
               <div class="cloud-up">
                   <img class="fadeInUp animated" src="images/joomlaux/demo/feature/arrow-down.png" alt="" />
               </div>
               <div class="muti-cloud">
                   <span class="cloud-1 fadeInUp animated"><img src="images/joomlaux/demo/feature/cloud-1.png" alt="" /></span>

                   <span class="cloud-2  fadeInLeft animated"><img src="images/joomlaux/demo/feature/cloud-2.png" alt="" /></span>


                   <span class="cloud-3  fadeInLeft animated"><img src="images/joomlaux/demo/feature/cloud-3.png" alt="" /></span>

                   <span class="cloud-4 fadeInRight animated"><img src="images/joomlaux/demo/feature/cloud-4.png" alt="" /></span>

                   <span class="cloud-5 fadeInRight animated"><img src="images/joomlaux/demo/feature/cloud-5.png" alt="" /></span>
               </div>
               <div class="des-warring rotateInDownRight animated">
                   <p class="warring">Don't miss the chance
                       <br> to get these awesome apps!</p>
               </div>
           </div>
   </div>

Frontend

Backend Setting

Detail Custom HTML1

Detail Custom HTML2

Detail Custom HTML3

Video Tutorial

 

13. Module Our team

Module type: Custom HTML
Position: our-team
Custom HTML
<div class="jux-team col-md-4 col-sm-4 col-xs-12  team1">
   <div class="main-team">
     <div class="jux-img-hr">
       <img class="team-1" src="images/joomlaux/demo/agent/agent-1.png" alt="" />
       <img class="team-2" src="images/joomlaux/demo/agent/agent-1-hv.png" alt="" />
       <div class="des">
           <a href="#"><i class="fa fa-user"></i>Rebecca brought in 2 new contracts.</a>
       </div>
     </div>
   </div>
</div>

<div class="jux-team col-md-4 col-sm-4 col-xs-12  team1">
   <div class="main-team">
     <div class="jux-img-hr">
       <img class="team-1" src="images/joomlaux/demo/agent/agent-2.png" alt="" />
       <img class="team-2" src="images/joomlaux/demo/agent/agent-2-hv.png" alt="" />
       <div class="des">
           <a href="#"><i class="fa fa-user"></i>Rebecca brought in 2 new contracts.</a>
       </div>
     </div>
   </div>
</div>

<div class="jux-team col-md-4 col-sm-4 col-xs-12  team1">
   <div class="main-team">
     <div class="jux-img-hr">
       <img class="team-1" src="images/joomlaux/demo/agent/agent-3.png" alt="" />
       <img class="team-2" src="images/joomlaux/demo/agent/agent-3-hv.png" alt="" />
       <div class="des">
           <a href="#"><i class="fa fa-user"></i>Rebecca brought in 2 new contracts.</a>
       </div>
     </div>
   </div>
</div>

 Frontend

Backend Setting

Detail Custom HTML

Video Tutorial

 

14. Module Footer

Module type: Footer
Position: footer

Frontend

Backend Setting

Video Tutorial

 

Frontend of About-us

 

1. Module About Us

Module type: Custom HTML
Position: about-us
Custom HTML
<div class="col-md-5 col-sm-6 about-img">
<img src="images/joomlaux/demo/introduction/about-us.png" alt="" />
</div>
<div class="col-md-7 col-sm-6 about-intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros. Nullam tellus turpis, fringilla sit amet congue ut, luctus a nulla. Donec sit amet sapien neque, id ullamcorper diam. Nulla facilisi. Pellentesque pellentesque arcu a elit congue lacinia.</p>
<p>Nullam tellus turpis, fringilla sit amet congue ut, luctus a nulla. Donec sit amet sapien neque, id ullamcorper diam. Nulla facilisi. Pellentesque pellentesque arcu a elit congue lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

 

Frontend

Backend Setting

Detail Custom HTML

2. Module About Us -1

Module type: Custom HTML
Position: about-us-middle
Custom HTML
<div class="col-md-6 title-middle">
<h3>Mission Statement</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros. Nullam tellus turpis, fringilla sit amet congue ut, luctus a nulla. Donec sit amet sapien neque, id ullamcorper diam. Nulla facilisi. Pellentesque pellentesque arcu a elit congue lacinia.</p>
</div>
<div class="col-md-6 title-middle">
<h3>Fun FActs</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros. Nullam tellus turpis, fringilla sit amet congue ut, luctus a nulla. Donec sit amet sapien neque, id ullamcorper diam. Nulla facilisi. Pellentesque pellentesque arcu a elit congue lacinia.</p></div>

Frontend

Backend Setting

Detail Custom HTML

 

3. Module Services

Module type: Custom HTML
Position: services
Custom HTML
<div class="container clearfix">
   <h3 class="module-title "><span>Services</span></h3>
</div>

<div class="our-sevices-inner">
   <div class="container clearfix">
       <div class="row">
           <div class="col-md-3 col-sm-6 col-xs-6 ">
               <div class="wrap-service">
                <div class="service-item">
                   <div class="img-ser buzz">
                       <img src="images/joomlaux/demo/icons/website.png" alt="" />
                   </div>
               </div>

               <div class="name-services">
                   <p>Websites</p>
               </div>
               </div>
           </div>

           <div class="col-md-3 col-sm-6 col-xs-6 ">
               <div class="wrap-service">
                <div class="service-item">
                   <div class="img-ser skew-backward">
                       <img src="images/joomlaux/demo/icons/photo.png" alt="" />
                   </div>
                </div>

               <div class="name-services">
                   <p>Photography</p>
               </div>
              </div>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-6 ">
               <div class="wrap-service">
                <div class="service-item">
                   <div class="img-ser pulse-grow">
                       <img src="images/joomlaux/demo/icons/seo.png" alt="" />
                   </div>
               </div>

               <div class="name-services">
                   <p>Seo</p>
               </div>
               </div>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-6">
               <div class="wrap-service">
                <div class="service-item">
                   <div class="img-ser skew">
                       <img src="images/joomlaux/demo/icons/app.png" alt="" />
                   </div>
               </div>

               <div class="name-services">
                   <p>Applications</p>
               </div>
               </div>
           </div>
       </div>
   </div>
</div>

Frontend

Backend Setting

Detail Custom HTML

 

4. Module Services des

Module type: Custom HTML
Position: service-des
Custom HTML
<div class="col-md-12">
<p class="intro-services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu erat lacus, vel congue mauris. Fusce velit justo, faucibus eu sagittis ac, gravida quis tortor. Suspendisse non urna mi, quis tincidunt eros. Nullam tellus turpis, fringilla sit amet congue ut, luctus a nulla. Donec sit amet sapien neque, id ullamcorper diam. Nulla facilisi. Pellentesque pellentesque arcu a elit congue lacinia.</p>
<div class="list-services">
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit fringilla sit amet.</a>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit luctus donec.</a>
</div>
</div>

 

Frontend

Backend Setting

Detail Custom HTML

 

 

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 of JUX Universe

 

1. Change the Logo image

There are 2 ways to change logo for JUX Universe template

#1: Change logo from 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. Select image for logo on your site as shown in picture below:

 

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

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

// TEMPLATE 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 dev/templates/jux_universe/less/style.css folder. Search for the logo text, you’ll find the style where you can either add more styles or customize it as you want.

// Logo
// ----
.logo {

 text-align: left;
 padding-top: 35px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 transition: all 0.4s ease;

 // Left align the logo on  Tablets / Desktop
 @media (max-width: @screen-xs-max) {
   padding-top: 15px;
 }
 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;
 }
}


 

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 our Support Forum or in Our Ticket System. (for Developer Membership only) We spend more time in getting the information from user in case the support guidelines are not followed.