JUX Ciao Template Documentation

INSTRUCTION

1.  About Joomla version used in JUX Ciao

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!

            Download Joomla 3.x HERE

            Learn How to Install Joomla 3.x HERE

2. About JoomlaUX

Thank you for choosing and using JUX Ciao 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 Ciao Template User Guide

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

4.   Features

5.  JoomlaUX Extensions Supported

Here are the extensions used in JUX Ciao template:

Module

Components

            JUX 3D Restaurant Menu

           Unite Revolution Slider

6.  3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 4 different layouts used in JUX Ciao template:

Module positions

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

The below picture indicates modules’ display in Homepage: 

Modules’ positions are:

-          Number 1: position-1, loads module Contact Information(Custom HTML)

-          Number 2: login, loads module Login(JUX Login)

-          Number 3: head search, loads module Search

-          Number 4: slideshow, loads module Revolution Slideshow(Unite Revolution Slider)

-          Number 5: navcontent, loads module Testtimonial Slider(Custom HTML)

-          Number 6:  mast-col-1, loads module About Us(Custom HTML)

-          Number 7:  mast-col-2, loads module Featured(JUX CSS3 Accordion Slider)

-          Number 8: position-5, loads module Contact Us(Custom HTML)

-          Number 9: position-6, loads module For Business(Custom HTML)

-          Number 10: position-7, loads module Follow Us(Custom HTML)

-          Number 11: position-8, loads module Newsletter(AcyMailling Module)

-          Number 12: footer, loads module Footer

 

8. T3 Framework

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

More about T3 framework: Please visit http://t3-framework.org/documentation/introduction.html

8.1. T3 Framework Introduction

More about T3 framework, please visit http://t3-framework.org/documentation/introduction.html

Main Features: http://t3-framework.org/documentation/introduction.html)

8.2. T3 Installation

Please visit: http://t3-  framework.org/documentation/installation.html

8.3. T3 Setting

Please visit: http://t3-framework.org/documentation/t3-settings.html

8.4.  Layout System

Please visit: http://t3-framework.org/documentation/layout-system.html

8.5. Customization

Please visit: http://t3-framework.org/documentation/customization.html

DOWNLOAD&INSTALL

 

1. Choose you site development plan

Before installing template and extensions, please indicate clearly a plan for your site:

 

2. Download & Install

Download Template

 To download JUX Ciao  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: unzip1st_jux_ciao. Unzip it so you can start upload:

 

Install Quickstart

For easier installation for user, we created a Quickstart file. By installing this file, you will have a template looks like our demo. Basically, Quickstart installation will clone your site. And then, you’ll only have to replace the default content by yours.

Here is the step-by-step guide to use Quickstart installation:

 

Then you’ll be redirected to ANGIE installer screen:


Install  Template

If you don’t use Quickstart installation to install JUX Ciao, please follow these following steps:

- Step 1: Unzip the downloaded package: unzip1st_jux_ciao. Here are the files you will have

 

                            :

 

-  Step 2: Log in to Joomla! Administrator Panel. Go to Extensions-->Extension Manager  

 


- Step 3: Click on “Choose File” then select pkg_jux_ciao-XXX.zip to install (XXX is the version of the file). Click “Upload &Install” (if the upload is successful, there will be a message “Installation package was successful”):  

 

- Step 4: After successfully uploading and installing template file, go to Extensions--> Template Manager.

 

 

- Select Default for JUX Ciao template for it to display in frontend.  



 

Install Module

After installing the template and set it as default template, we will go and install its modules. To install modules for template JUX Ciao, please follow these steps:

- Step 1: Log in to Joomla! Administrator. Go to Extensions --> Extension Manager


- Step 2:  Click on “Choose File”, select files in folder Modules and upload all. There are 4  files:

- Step 3:  After successfully uploading and installing module files, go to Extensions--> Module Manager to publish modules

- Step 4: Publish modules by ticking on the box then click Publish.

 

 

Install Component

To install Component  for JUX Ciao please follow these steps:  

- Step 1: Log in Joomla! Administrator Panel. Select Extensions --> Extension Manager

 

- Step 2: Choose Component file. There are 2 file:

MODULE HOMEPAGE CONFIGURATION

Next, let’s dive in each module’s detail configuration in Homepage.

  1. Module Contact Information

Module type: Custom HTML
Module Position: position-1

 

Frontend

 

Backend:

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

   

Custom Output:

Enable Toggle Editor and enter this Custom HTML:

<div id="contact-info"><span class="find-ciao-text"><a href="#">Find <span>Ciao!</span>
</a></span><span class="number-call">123.4567.8969</span></div>

Menu Assignment: On all pages

  1. Module Login

Module type: JUX Login
Module position: login

Frontend

Backend

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

 

Menu Assignment: On all pages

  1. Module Search

Module type: head-search
Module position: search

Frontend

Backend

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

Menu Assignment: On all pages


  1. Slideshow position

At slideshow position, we created 3 modules with different slideshow displays. Depend on your utility purpose, please choose one you find it best suit for your need. The slideshow modules are:

4.1 Module Revolution Slideshow

Module type: Unite revolution Slider
Module position: slideshow

Frontend

 

Backend

To have this module, go to backend: Extensions--> Module Manager-->New--> Select module as Unite revolution Slider with settings below:

 

General Settings

Menu Assignment: Only on the pages selected

 

Note: To learn more on how to configure the slides in this slideshow, please visit HERE.

4.2 Module JSE Slideshow

Module type: JSE Slideshow
Module position: slideshow

 

Frontend

 

Backend

To have this module, go to backend: Extensions--> Module Manager--> New-->Select type as JSE Slideshow, with the settings below:

 

Details for slide’s image 1, 2, 3 above are:

Image 1:

 

Image 2:

 

Image 3:

Menu Assignment: Only on the pages selected

Note: To learn more about this module, you can go to our Wiki.

   4.3 Module JUX Slideshow

Module type: JUX Slideshow
Module position: slideshow

Frontend

Backend

To have this module, go to backend: Extensions--> Module manager--> New-->Select type as JUX Slideshow with the settings bellow:

You need to enter Custom HTML for each image 1, 2, 3 above:  

Image1:

HTML Code:

<div id="cake-slideshow">
<div class="description1">Limited Editon</div>
<div class="description2"><span id="text1">wheels
</span><span id="text2">cake</span></div>
<div class="description3">A combination of coffee and mint,
inspired by the North African tradition
of hospitality and friendship.</div>
<div class="description4"><a href="#">Learn more »</a></div>
</div>

Image2:

HTML Code

<div id="coffee-slideshow">
<div class="description1">New</div>
<div class="description2"><span class="text1">Proof</span>
<span class="text2">In Every</span>
<span class="text3">Single Cup</span></div>
<div class="description3">Bold. Distinctive. And Now,Convenient.
</div>
<div class="description4"><a href="#">Learn more »</a></div>
</div>

                                    Image 3:

                                     HTML Code

<div id="tea-slideshow">
<div class="description1">The new green tea CIAO!</div>
<div class="description2">New mint flavor</div>
<div class="description3">Relaxation
Sweeter</div>
<div class="description4">Le Lorem Ipsum
 ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, 
ou des touches d'humour.
</div>
<div class="description4"><a href="#">Learn more »</a></div>
</div>

Menu Assignment: Only on the pages selected

To leanr more aboutthis module you can visit our Wiki.

 5. Module Testimonial Slider

Module type: Custom HTML
Module position: navcontent

 

Frontend

Backend

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


Custom Output:

Enable Toggle Editor and enter this Custom HTML: 

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="row-fluid">
<div class="span4 carousel1"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Plusieurs versions sont apparues avec le</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4 carousel2"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Si vous voulez utiliser un passage du...</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4 carousel3"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">"Lorem ipsum dolor sit amet..."</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span4 carousel1"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">"Lorem ipsum dolor sit amet..."</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4 carousel2"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Si vous voulez utiliser un passage du...</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4 carousel3"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Plusieurs versions sont apparues avec le</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row-fluid">
<div class="span4"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Si vous voulez utiliser un passage du...</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">"Lorem ipsum dolor sit amet..."</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
<div class="span4"><span class="jux-tall"><img src="images/joomlaux/demo/tall.png" alt="" /></span>
<div class="content-slider">
<p class="title">Si vous voulez utiliser un passage du...</p>
<p class="email">email@yoursite.com</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Menu Assignment: Only on the pages selected

 

 6. Module About Us

Module type: Custom HTML
Module position: mast-col-1

Frontend:

 

Backend

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

 

Custom Output:

Enable Toggle Editor and enter this Custom HTML:

<div id="about">
<div class="image-about"><img src="images/joomlaux/demo/about.jpg" alt="" /></div>
<div class="main-infor-about">
<div class="inner-infor-about">
<h2><a href="index.php?option=com_content&view=article&id=1&catid=2&Itemid=195">About</a></h2>
<p class="infor-about letter-firts">Plusieurs variations 
de Lorem Ipsum peuvent être trouvées ici ou là,
 mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de 
mots aléatoires qui ne ressemblent pas une seconde à du texte standard.
</p>
<p> </p>
<p class="infor-about">Si vous voulez utiliser un passage du Lorem Ipsum,
 vous devez être sûr qu'il n'y a rien d'embarrassant 
caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à
 reproduire le même extrait sans fin, 
ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. 
Iil utilise un dictionnaire de plus de 200 mots latins, 
en combinaison de plusieurs structures de phrases,
 pour générer un Lorem Ipsum irréprochable.
</p>
<p> </p>
<p class="infor-about">There are many variations of passages of Lorem 
Ipsum available, but the majority have suffered alteration in some form, 
by injected humour, embarrassing hidden in the middle of text.......
<a href="index.php?option=com_content&view=article&id=1&catid=2&Itemid=195">( read more )</a></p>
</div>
</div>
</div>

Menu Assignment: Only on the pages selected

 

 


 

7. Module Featured

Module type: JUX CSS3 Accordion Slider
Module position: mast-col-2

Frontend

 

Backend

To have this module, go to backend: Extensions--> Module manager--> New--> Select type as JUX CSS3 Accordion Slider with the settings below:

 

Basic Options

Menu Assignment: Only on the pages selected

8. Module Contact Us

Module type: Module Custom HTML
Module position: position-5

Frontend

Backend

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

 

Custom Output:

Enable Toggle Editor and enter this Custom HTML:

<div class="contact-us-infor"><span>Ut tincidunt, erat eu pul
vinar molestie, justo nisl pharetra erat, sit amet malesuada diam turpis cursus mauris.
</span>
<ul id="contact-us">
<li class="icon-phone"><span>Tel: (+844) 8882888</span></li>
<li class="icon-print"><span>Fax: (+844) 8883888</span></li>
<li class="icon-envelope"><span>Email: <a href="mailto:mailto:contact@joomlaux.com">contact@joomlaux.com
</ul>
</div>

Code explanation in Frontend:

 

Menu Assignment: On all pages

 

9. Module For Business

Module type: Module Custom HTML
Module position: position-6

Frontend

;

Backend

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

 

Custom Output

Enable Toggle Editor and enter this Custom HTML:

<ul class="menu">
<li><a href="#">Office coffee</a></li>
<li><a href="#">Food Service</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>

 

Menu Assignment: On all pages

10. Module Follow Us

Module type: Custom HTML
Module position: position-7

Frontend

Backend

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

 

Custom Output

Enable Toggle Editor and enter this Custom HTML:

<div class="follow-introtext">Follow Origin on the following social network sites.</div>
<div class="social_media">
<ul class="menu">
<li class="facebook"><a href="#">facbook</a></li>
<li class="googleplus"><a href="#">googleplus</a></li>
<li class="twitter"><a href="#">twitter</a></li>
<li class="youtube"><a href="#">youtobe</a></li>
</ul>
</div>

Menu Assignment: On all pages

11. Module Newsletter

Module type: AcyMailling Module
Module position: position-8

Frontend:

Backend:

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

Basic Options

Menu Assignment: On all pages

 

12. Module Footer

Module type: Footer
Position: footer

Frontend

Backend

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

 

 

Menu Assignment: On all pages


 

This is video tutorial configure Home page

MENU PAGE CONFIGURATION

 

I.Guide to How to configure  Menu page

 

1.   Module Menu Banner

Module type: Module Custom HTML
Module position: slideshow

Frontend:

 

Backend:

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

 

Advanced Options

 

This module uses class-suffix: banner. This class-suffix helps module to display full page. You can change the way it displays by adding or not adding class suffix. 

 

Custom Output

Enable Toggle Editor and enter this Custom HTML:

<p><img src="images/joomlaux/demo/banner-menu.jpg" alt="" /></p>
<h1 class="title-category">Ciao! World's Coffee</h1>
<div class="description-category">"Il n’y a personne qui n’aime la 
souffrance pour elle-même, qui ne la recherche et qui ne la veuille pour elle-même…"
</div>

Code explanation in Frontend:

 

Menu Assignment: Only on the pages selected

 

 

2. Components: JUX 3D Restaurant Menu

Frontend:

 

To have restaurant’s menu as in our Menu page, we used JUX 3D Restaurant Menu. Please configure this extension with these following steps:  

Step 1: Go to backend: System --> Global Configurations--> Select JUX Resmenu

 

 

You can insert Custom HTML

Cover Page:

 

<div class="noorm-top">For the best coffee around
</div>
<div class="noorm-logo">
<img src="templates/jux_ciao/images/logo.png" alt="Joomlaux Restaurant Menu Component" />
</div>
<p><img src="templates/jux_ciao/images/cover_img1.png" alt="Joomlaux Restaurant Menu Component" /></p>
<h3>Freshly Made Every Day</h3>
<h6>Welcome to the little coffee house</h6>
<div class="jux-rm-info-res">
<ul>
<li>All our coffee is 100% Fair trade</li>
<li>Delicious selection of home made cakes and pastries</li>
</ul>
</div>
<p><a class="noorm-button-open" href="#">View the Menu</a></p>
<div class="noorm-info">
<p><strong>Ciao Coffee</strong><br /> Telephone +(001) 123.456.789<br /> Fax +(001) 123.456.789<br /> E-mail hello@nootheme.com</p>
</div>
<div class="noorm-coffee-image"><img src="templates/jux_ciao/images/coffee_image.png" alt="" /></div>

Code explanation in Frontend:

Restaurant Info:

Custom HTML Code

<div class="noorm-order">
<p><strong>Would you like us to cater your event?</strong> Call us &amp; we'll help you find a venue and organize the event: <strong>+(001) 123.456.789</strong></p>
</div>

Step 2: Go to backend: Components--> JUX 3D Restaurant Menu --> Then select category to create category:

In JUX Ciao we have these categories:

Step 3: Go to Components--> JUX 3D Restaurant Menu--> Select Items to create article.

 


This is video tutoril configure Menu page

GALLERY PAGE CONFIGURATION

I. Guide to How to configure Gallery page

Frontend

 

 

In Gallery page, our intention is displaying the content a little “overlapped” with the banner – this is one element that makes the template look unique. To configure this display of Gallery page, we created a class suffix: ciao-bg-upon for Gallery page.

Gallery banner

Page Display Options

 

          

This is video tutorial configure Gallery page

K2 PAGE CONFIGURATION

1.      Configure to display articles in category of Joomla & K2

In Joomla & K2 pages we used the following class suffixes:

To change module class-suffix you need go to Backend: Menu--> Main Menu--> Find & Open Menu Item you want to add module class suffix.In Ciao template you can find Menu Item Type: Category Blog(Joomla Category) and Categories(K2 Category). Then navigate to Page Display tab to change module class suffix on Page Class option:

Example: We change module class- suffix of Ciao Coffee which items are displayed on K2--> All Categories--> Ciao Coffee menu.

Below is the explanation for each class suffix:

 ciao-bg-brown: using this class suffix, module’s background will be brown color

Then in frontend it will be brown color as below:

 

 

If you want your background is different color, for example, blue, for item’s background in category Ciao Coffee, you just need to change class suffix: ciao-bg-blue

ciao-bg-blue: using this class suffix, you’ll have background color as blue color. This is also our default class suffix. When you download template and install it, the default color of items in K2 and Joomla pafe is blue.  

E.g.: Joomla-->Ciao Teas

 

 

To change the background of items in category Ciao Teas, go to menu Ciao Teas then change class-suffix. For example if we want to change the color to red, we’ll only have to change class suffix: ciao-bg-red

ciao-bg-red: using this class suffix your background will be red color

E.g.: Joomla-->Ciao Cake

 

 

·        

ciao-bg-purple: using this class suffix, your background will be purple color.

E.g.: category Ciao Books

 

  2. How to configure modules displaying at sidebar-2 position in Joomla& K2page

In these modules displaying at sidebar-2 position, we use these class suffixes:

  • bg-red

  • bg-yellow

  • bg-purple

  • bg-green

The detail of these class suffixes is described below:

  • bg-red: allows displaying background in red color

E.g.: module Recent Post has class-suffix: bg-red

Frontend

You can changecolor of background by changing class-suffix in module.E.g.: Module’s class suffix: yellow

  • bg-yellow:  allows displaying background in yellow color

E.g.: module Recent Post

Module class suffix: bg-yellow

  • Frontend

  • bg-purple: allows displaying background in purple.

E.g.: module Recent Post

Module class suffix:bg- purple

  • bg-green: allows displaying background in green color

E.g.: module Tag

Module class suffix:bg- green

  • Frontend

You can do the same with other modules:

Module categories

                 Module type: K2 tool
                Module position: sidebar-2

Module Recent Comments

                  Module type: K2-Commments
                  Module position: sidebar-2
                  Module Class-suffix:bg-yellow

Module Archived

                  Module type: K2 tools
                  Module position: sidebar-2
                  Module Class-suffix: bg-purple

Module Tags

                 Module type: K2 tools
                 Module position: sidebar-2
                 Module Class-suffix: bg-green

Module Calendar

                Module type:  K2 tools
               Module position: sidebar-2
                                   Module position: sidebar-2

 

3.  How to configure banner modules in category pages of K2 and Joomla

 

    2.1 Module Tea Banner

Module type: Custom HTML
Module position: slideshow

Frontend

 

Backend

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

 

  

Advanced Options: This module uses class-suffix: banner--> this class suffix helps banner to display full page’s width.

Custom Output

You can add custom HTML:

<p><img src="images/joomlaux/demo/banner-tea.jpg" alt="" /></p>
<h1 class="title-category">Ciao Teas</h1>
<div class="description-category">"Il n’y a personne qui n’aime la souffrance 
pour elle-même, qui ne la recherche et qui ne la veuille pour elle-même…"</div>

Menu Assignment: Only on the pages selected

 

You can do the same configuration with other modules:

Module Cake Banner

Module type: Custom HTML
Module position: slideshow
Module class suffix: banner
Custom Output

<p><img src="images/joomlaux/demo/banner-cake.jpg" alt="" /></p>
<h1 class="title-category">Ciao Cake</h1>
<div class="description-category">"Il n’y a personne qui n’aime la souffrance pour 
elle-même, qui ne la recherche et qui ne la veuille pour elle-même…"</div>

Module Coffee Banner

Module type: Custom HTML
Module position: slideshow
Module class suffix: banner
Custom Output

<p><img src="images/joomlaux/demo/banner-coffee.jpg" alt="" /></p>
<h1 class="title-category">Ciao Coffee</h1>
<div class="description-category">"Il n’y a personne qui n’aime la souffrance pour elle-même, qui ne la recherche et qui ne la
 veuille pour elle-même…"</div>

Module Book Banner

Module type: Custom HTML
Module position: slideshow
Module class suffix: banner
Custom Output

<p><img src="images/joomlaux/demo/banner-book.jpg" alt="" /></p>
<h1 class="title-category">Ciao Books</h1>
<div class="description-category">"Il n’y a personne qui n’aime la souffrance pour elle-même, qui
 ne la recherche et qui ne la veuille pour elle-même…"</div>

 This is video tutorial configure K2 page

TEMPLATE CUSTOMIZATION

I. Template Override

To override template, please clone a style then edit as you wish. After that, assign the cloned style to specific menus. The assigned menus will override the same menus in the default style.

Each style can be configured to use a theme, layout so in one website, you can have menus with different themes, layouts.

II. Themes

Here are styles supported in JUX Ciao


III. Layout

Supported layouts in JUX Ciao


 

Layout Customization

  1. Configure layout structure


2. Customize the layouts devices



 

IV. Theme magic

To customize theme with the feature, firstly, you have to enable the option:


In the setting panel, you can customize all the themes. The left panel is the setting area while the right panel is your site front-end. Each time you change setting, click on "Preview" button to view the change in front-end on the right panel.

;

 

MEGAMENU CONFIGURATION

 

JUX Ciao uses mega menu to display the main menu of your site. This implementation helps to make your menu more flexible, powerful and friendly.  

To configure mega menu, go to: Extensions--> Template manager--> open JUX_Ciao template, in the Navigation setting, you can configure mega menu.

1. Enable mega menu

 

 

2. Select menu item, sub-megamenu... 

 

 

Configure for selected menu item, sub-megamenu


 

Frontend appearance

 


LOGO CONFIGURATION

To change logo of template, please follow these steps:

Step1: Go to Administrator : Extensions -->Template Manager --> Select template style you’re using:

 

Step 2: Go to Theme--> Logo Image to select logo image:

 

 

Step 3: After clicking on “Select”, image folders will display. Select your logo and insert:  

 

 

In case you haven’t had a logo image uploaded in image folder, follow these steps below:

 

 

After uploading and selecting logo image, visit frontend to view the change.

 

RECOMMENDATION

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.