NOOne Template Documentation


Thank you for choosing and using NOOne  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.

About Joomla version used in NOOne

All NooTheme 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!

About NOOne  Template User Guide

The user guide provided is to help you to quickly learn about NOOne 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. Installing Template and Extensions in your Joomla

  2. Modules Configuration – How to create and customize modules

  3. Template Customization

Features

Third party Extension supported

NooTheme Extensions Supported

Here are the extensions used in NOOne  template:

Module

Layout & Module Positions

Layout

NOOne only support 1 layout : Home

Module positions

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

                                  

 

T3 Framework

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

  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)

  T3 Installation

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

  T3 Setting

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

Layout System

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

Customization

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

1. Choose you site development plan

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

VIDEO TUTORIAL: NOOTheme Template Tutorial - NOOne

This is a video tutorial about how to download, install and configure NOOne Template and its modules, plugins. 

 

2. Download template

To download NOOne 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_noo_noone. Unzip it so you can start upload:

 

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:


 

              Video original link: https://www.akeebabackup.com/videos/1520-ab04-2.html

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

- Step 1: Unzip the downloaded package: unzip1st_noo_noone. 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_noo_noone-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 NOOne template for it to display in frontend.  


After installing the template and set it as default template, we will go and install its modules. To install modules for template NOOne, 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 5 files:



                                 

 

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

 

.                                      

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

 

Below is an instruction to Configuring NOOne template. There are 2 parts:

Let’s roll!

  1. How to create menu in NOOne

In NOOne, each menu item is configured as a Section Block, numbered from 0 to 6 as follow:

Section0                                         Home

Section-1                                       Why Choose Us

Section-2                                       Services

Section-3                                       Projects

Section-4                                       Resume

Section-5                                       Team

Section-6                                        Contact Us

Each section is equivalent to a page (one page). You can click on menu item to view these sections (pages) without having to reload your site.

Here is the menu’s configuration:

 Frontend


                                                                                   

  Backend

To create the menu above, please follow the steps provided.

  1. Menu Home

Menu Item Type: Category Blog

Menu Title: Home

ID: 101

To create this menu item, go to backend: Menu--> Main Menu--> Add New Menu Item with the settings like below:


  1. Menu Why Choose Us

Menu Item Type: External URL

Link: index.php?Itemid=101#section-1

Menu Title: Why Choose Us

To create this menu item, go to backend: Menu--> Main Menu-->Add New Menu Item with the settings like below:

 

 

In the Link shown above, there are 2 parts:

   Link: index.php?Itemid=101#section-1

Do the same settings with other menu items Services, Projects, Resume, Team, and Contact Us with the following values:

Menu Item Type: External URL

Link: index.php?Itemid=101#section-2

Menu Title: Services
Menu Item Type: External URL

Link: index.php?Itemid=101#section-3

Menu Title: Projects
Menu Item Type: External URL

Link: index.php?Itemid=101#section-4

Menu Title: Resume
Menu Item Type: External URL 

Link: index.php?Itemid=101#section-5

Menu Title: Team
Menu Item Type: External URL

Link: index.php?Itemid=101#section-6

Menu Title: Contact Us

Menu Title: Contact Us

           II. How to configure modules in NOOne

In NOOne there are many sections, and each section can load multiple modules at the same time. Here are list of sections and modules loaded by each section:

Next, we’ll learn how to configure each module in NOOne.

  1. Module Why Choose Us

Module type: Module Custom HTML

Module Position: onepage

Class suffix: bg-img-darkgray||{"section":"section-1","subtitle":"Some Things You Should Know About Us"}

Frontend

 

Backend

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

 

      

 

 

You need to read this carefully so that you can understand correctly how module’s class suffix works:

 

 

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

 

In NOOne we use some class suffixes as below:

      *Module’s Class Suffix

Next is the meaning of each class suffix:

bg-img-darkgray: this class suffix allows displaying a dark gray background image

                Ex: Module Why Choose Us

Module Class Suffix: bg-img-darkgray||{"subtitle":"Some Things You Should Know About Us"}

 

 

You can easily change background by changing class suffix of module. For instance, you can change class suffix of module Why Choose Us to:

Module Class Suffix: bg-img-city||{"subtitle":"Some Things You Should Know About Us"}

 

bg-img-city:  this class suffix allows displaying background image as an image of city.

Ex: module Why Choose Us class-suffix: bg-img-city||{"subtitle":"Some Things You Should Know About Us"}

 

 

bg-darkgray: this class suffix allows displaying background with dark gray color

Ex: Module Why Choose Us

Module Class Suffix: bg-darkgray||{"subtitle":"Some Things You Should Know About Us"}

 

 

bg-img-gray: this class suffix allows displaying background with gray image:

Ex: Module Why Choose Us:

Module Class Suffix: bg-img-gray||{"subtitle":"Some Things You Should Know About Us"}

 

 

 

bg-img-sky: this class suffix allows displaying sky background image

Ex: Module Why Choose Us

Module Class Suffix: bg-img-sky||{"subtitle":"Some Things You Should Know About Us"}

 

 

 

Note: if you don’t want to use our background images, you can change them with your own background. Go to file template  noo_one  images and upload your images here (Remember to name your images like our examples below)

 

*Configuration for Section & Subtitle

Configure sections

Section is the position where module loads in frontend. For instance, module Why Choose Us is configured to display at position section-1 (menu Why Choose Us). This module’s configuration:

Module Class Suffix: bg-img-darkgray||{"section":"section-1","subtitle":"Some Things You Should Know About Us"}

In case you want to display this module at another position, i.e. section-2, you just need to change section in module’s class suffix:

Module Class Suffix: bg-img-darkgray||{"section":"section-2","subtitle":"Some Things You Should Know About Us"}

Backend

 

Frontend

 

In case module is not configured with specific section (position), module will be displayed by module’s order number in your backend.

Configure Subtitle

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

                

You can change module’s subtitle by going to module’s class suffix and change subtitle there:

Ex: Why Choose Us module

Module Class Suffix: bg-img-darkgray||{"section":"section-2","subtitle":"Some Things "}

 

Frontend:

 

Hide subtitle

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

 

                           

 

 

Custom Output

 

HTML Code:

<div class="why-choose span4">

<div class="main-why-choose">

<div class="img-why-choose1">

<div class="img-why-choose2">

<div class="img-why-choose3 staff"><img class="image1" src="images/nootheme/demo/staff.png" alt="Sample image" /><img class="image2" src="images/nootheme/demo/staff-over.png" alt="Sample image" /></div>

</div>

</div>

<div class="caption">

<h3>Professional Staff</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

</div>

</div>

</div>

<div class="why-choose span4">

<div class="main-why-choose">

<div class="img-why-choose1">

<div class="img-why-choose2">

<div class="img-why-choose3 innovative"><img class="image1" src="images/nootheme/demo/innovative.png" alt="Sample image" /><img class="image2" src="images/nootheme/demo/innovative-over.png" alt="Sample image" /></div>

</div>

</div>

<div class="caption">

<h3>Innovative Design</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

</div>

</div>

</div>

<div class="why-choose span4">

<div class="main-why-choose">

<div class="img-why-choose1">

<div class="img-why-choose2">

<div class="img-why-choose3 support"><img class="image1" src="images/nootheme/demo/support.png" alt="Sample image" /><img class="image2" src="images/nootheme/demo/support-over.png" alt="Sample image" /></div>

</div>

</div>

<div class="caption">

<h3>Wholehearted Support</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

</div>

</div>

</div>

Here is the meaning of HTML code and how each code pattern displays in frontend:

 

Menu Assignment: Only on the pages selected

 

  

You can configure other modules exactly the same way with the understanding explained above. Here are the settings for remained modules:

Module type: Module Custom HTML

Module position: onepage

Custom Output

<p class="text-center-big">Bring you smooth feel and new experience from your own site.</p>
  • Module Services
Module type: Module Custom HTML

Module position: onepage

Module Class Suffix: bg-img-city||{"section":"section-2","subtitle":"These Are The Services We Provide, These Makes Us Stand Apart"}

Custom Output

<div class="flip-container box1">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service1.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service1-over.png" alt="Sample image" />

<h3>Web Development</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vel turpis. Duis sit amet lectus ac mauris porta viverra.</p>

</div>

</div>

</div>

</div>

<div class="flip-container box2">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service2.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service2-over.png" alt="Sample image" />

<h3>Joomla Development</h3>

<p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>

</div>

</div>

</div>

</div>

<div class="flip-container box3">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service3.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service3-over.png" alt="Sample image" />

<h3>Mobile Ui Design</h3>

<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum</p>

</div>

</div>

</div>

</div>

<div class="flip-container box4">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service4.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service4-over.png" alt="Sample image" />

<h3>Cms Customization</h3>

<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum</p>

</div>

</div>

</div>

</div>

<div class="flip-container box5">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service5.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service5-over.png" alt="Sample image" />

<h3>Web Tools</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vel turpis. Duis sit amet lectus ac mauris porta viverra.</p>

</div>

</div>

</div>

</div>

<div class="flip-container box6">

<div class="flipper rotate-x delay1">

<div class="front dark1"> </div>

<div class="back dark5"> </div>

</div>

<div class="flipper rotate-y delay2">

<div class="front dark2"> </div>

<div class="back dark6"> </div>

</div>

<div class="flipper rotate-y delay3">

<div class="front dark3"> </div>

<div class="back dark7"> </div>

</div>

<div class="flipper rotate-x delay4">

<div class="front dark4"> </div>

<div class="back dark8"> </div>

</div>

<div class="flip-content">

<div class="flip-text">

<div class="main-flip"><img class="services-1" src="images/nootheme/demo/service6.png" alt="Sample image" /> <img class="services-2" src="images/nootheme/demo/service6-over.png" alt="Sample image" />

<h3>Analytics &amp; Consultancy</h3>

<p>If you are going to use a passage of Lorem Ipsum, you need to be sure there is't anything embarrassing hidden in the middle of</p>

</div>

</div>

</div>

</div>

  • Module Projects
Module type: Noo Portfolio

Module position: onepage

Module class-suffix: bg-darkgray||{"section":"section-3","subtitle":"Terre estere doloremique sei laudantium, totames remeseo aperiam, eaque ipsa quae ab illo inventore veritatis rete et quasi architecto beataes vitae dic"}

To learn about Noo Portfolio, please go to our Wiki page.

To view Noo Portfolio’s demo, go to our Demo page.

  • Module Projects
Module type: Module Custom HTML

Module position: onepage

Module class-suffix: bg-img-sky

Custom Output

<div id="carousel-example-generic" class="carousel slide"><!-- Indicators --> <!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<div class="main-item-carousel"><img src="images/nootheme/demo/testimonial.jpg" alt="" />

<div class="description">“Donec in vehicula augue. Sed et nisi sem, at semper dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”</div>

</div>

<div class="main-item-carousel last-item"><img src="images/nootheme/demo/testimonial-b.jpg" alt="" />

<div class="description">“Donec in vehicula augue. Sed et nisi sem, at semper dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”</div>

</div>

</div>

<div class="item">

<div class="main-item-carousel"><img src="images/nootheme/demo/testimonial.jpg" alt="" />

<div class="description">“Donec in vehicula augue. Sed et nisi sem, at semper dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”</div>

</div>

<div class="main-item-carousel last-item"><img src="images/nootheme/demo/testimonial-b.jpg" alt="" />

<div class="description">“Donec in vehicula augue. Sed et nisi sem, at semper dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.”</div>

</div>

</div>

</div>

<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">‹</a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">›</a></div>
  • Module Team
Module type: Module Custom HTML

Module position: onepage

Module class-suffix: bg-img-gray||{"section":"section-5","subtitle":"Experience"}

Custom Output:

<div class="noo-team span3 team1">

<div class="main-team">

<div class="noo-img-hr"><img src="images/nootheme/demo/hr1.jpg" alt="" /></div>

<h3>Cali Doe</h3>

<span class="des-hr">CEO &amp; Founder</span>

<div class="noo-more-info-hr">

<p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>

<ul class="noo-hr">

<li><a class="twitter" href="#">twitter</a></li>

<li><a class="facebook" href="#">facebook</a></li>

<li><a class="google-plus" href="#">google plus</a></li>

</ul>

</div>

</div>

</div>

<div class="noo-team span3 team2">

<div class="main-team">

<div class="noo-img-hr"><img src="images/nootheme/demo/hr2.jpg" alt="" /></div>

<h3>Luci Nguyen</h3>

<span class="des-hr">Project Manager</span>

<div class="noo-more-info-hr">

<p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>

<ul class="noo-hr">

<li><a class="twitter" href="#">twitter</a></li>

<li><a class="facebook" href="#">facebook</a></li>

<li><a class="google-plus" href="#">google plus</a></li>

</ul>

</div>

</div>

</div>

<div class="noo-team span3 team3">

<div class="main-team">

<div class="noo-img-hr"><img src="images/nootheme/demo/hr3.jpg" alt="" /></div>

<h3>MeKirin</h3>

<span class="des-hr">Art Director</span>

<div class="noo-more-info-hr">

<p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>

<ul class="noo-hr">

<li><a class="twitter" href="#">twitter</a></li>

<li><a class="facebook" href="#">facebook</a></li>

<li><a class="google-plus" href="#">google plus</a></li>

</ul>

</div>

</div>

</div>

<div class="noo-team span3 team4">

<div class="main-team">

<div class="noo-img-hr"><img src="images/nootheme/demo/hr4.jpg" alt="" /></div>

<h3>Jon Doe</h3>

<span class="des-hr">CTO</span>

<div class="noo-more-info-hr">

<p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. You're all clear, kid. Let's blow this thing and go home!</p>

<ul class="noo-hr">

<li><a class="twitter" href="#">twitter</a></li>

<li><a class="facebook" href="#">facebook</a></li>

<li><a class="google-plus" href="#">google plus</a></li>

</ul>

</div>

</div>

</div>
  • Module Contact Us
Module type: Noo Contact Form

Module position: onepage

Module Class-suffix: bg-img-darkgray||{"section":"section-6","subtitle":"Come on. We have introduced ourself much. Just leave a message"}

Custom HTML

<h3>Contact Details</h3>

<div class="infor">Ut tincidunt, erat eu pulvinar molestie, justo nisl pharetra erat, sit amet malesuada diam turpis cursus mauris.</div>

<h3 class="address">LonDon</h3>

<ul>

<li class="address"><i class="icon-home"></i>0312 Unknow Str. 22 Miron Drive New York City, 12603 NY</li>

<li class="telephone"><i class="icon-phone"></i>(000) 123456789</li>

<li class="email"><i class="icon-envelope"></i><a title="Email" href="#">contact@noone.com</a></li>

</ul>

To learn about Noo Contact Form, go to our Wiki page.

To view demo, go to our Demo page.

  • Module Contact Us
Module type: Noo Google Map

Module position: onepage

Module class-suffix: map

Custom HTML

The <b>Eiffel Tower</b> (French: <i>La Tour Eiffel</i>, [tuʁ ɛfɛl]) is an iron lattice tower located, whose company designed and built the tower ...<a href="https://en.wikipedia.org/wiki/Eiffel_Tower">see more</a>

To learn about Noo Google Map, go to our Wiki page.

To view demo, go to our Demo page.

 

 

          2. Module Slideshow

Module type: mod_unite_revolution

Module position: onepage

Frontend

 

 

Backend

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

 

              


General Settings

                                    

Menu Assignment: Only on the pages selected

 

             

Note: To configure the slideshow like in our demo, you can learn the tutorial here.

          3. Module Footer

Module type: Footer

Module 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

                                            :

           4. Module Social

Module type: Module Custom HTML

Module position: footer

Frontend

                                               

Backend

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

 

Custom Output

                             

HTML Code:

<div class="social">

<ul>

<li><a class="twiter" href="#">twiter</a></li>

<li><a class="facebook" href="#">facebook</a></li>

<li><a class="youtobe" href="#">youtobe</a></li>

<li><a class="share-location" href="#">share location</a></li>

<li><a class="my-space" href="#">my space</a></li>

</ul>

</div>

Menu Assignment: On all pages

                                    


 

 

1. Template Override

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

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

2. Themes

NOOne supports 4 styles

+> Default

+>Red

+>Blue

+> Dark

 

3. Layout

Noone supports1 layout: onepage

Layout Customization

    1.Configuration layout structure

     2. Customize the layout divices

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

4. Theme Magic

                      

 

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

                                                     .

 

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.