Noone Template Documentation


Welcome to our Profile. Grab your drink and let’s get to know each other a little! We are NooTheme (“noo” is pronounced as /nu:/ if you don’t know how). We’ve been working and creating and playing with Joomla for several years. Our team has highly skilled & experienced geeks who share passion and desire for Joomla, of bringing better work to Joomla Community. Sometimes we honestly think we’re just children playing around with work & everything to us boils down to curiosity. Work smart. Play hard. Be curious. Try new things. These are the values we respect in anything we do. We’re interested in what’s good. You ain’t different, are you? We designers and developers should always keep the users in mind when we work. Ralph Marston once said “Excellence is not a skill, it is an attitude”.

1. 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!

 

2. About Noone

NOOne is a responsive One Page Joomla Template running on T3V3 Framework with great attention to details in design.

NOOne is developed with elegant HTML5/CSS3 and eye-catching effects to blow your mind! Embroiled in the template are professional elements in clean-clear-simple design with creative style, polish transition and smooth navigation. Plus, NOOne is easy to customize and featured with many awesome Joomla extensions to rock any content.

Template can be used for different types of website: agency, small business/personal portfolio, product presentation, and multi-purpose use.

3. 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:

 

4. Features

5. NooTheme Extensions Supported

- Noo Timeline

- Noo Portfolio

- Noo Contact Form

- Noo Google Map

 

6.3rd  Party Extension Supported

- Unite Revolution Slider 2

- K2

 

7. Layout & Module Positions

Layout

Here are 3 different layouts used in Noo Merito template:

Module positions

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

 

8. 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.  

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 from Themeforest 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:

 

View how to install extension guide

 

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:


 

2. 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

         

2. 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.

2.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"}

 

-->Frontend

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 Document

 

  • 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 Document

 

2. 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.

Note: When you install our quickstart, Unite Revolution Slider 2 don’t load in homepage. You need replace link in slider of module.

Now we will guide you how to display slider on homepage

-         Step 1:  After you install quickstart, you go to backend: Extensions-->Unite Revolution Slider 2--> Setting:

-  Step 2: Click Import/Export to Replace all layer and background image url.

You must enter Replace From options  by http://localhost and enter Replace To by http://yoursite.com

Example:

You install your quickstart on http://quickstart.nootheme.com/noone

You must do below:

          Replace From: http://localhost

          Replace To : http://quickstart.nootheme.com/noone

You can see detail by image follow:

 

 

2.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

                                            :

 

2.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

                                    

 

In Noone template, we add  new feature mutil pages for template. Now we will guide you to create & configure this page.

To have this page, please following these steps:

Let’s roll to see step by step to configure this page.

 

1. Create new layout for blog page

From backend setting, go to : Extensions→ Template Manager→  Select the “Noone_v2 – Default” template style then hit the “Duplicate” button to clone the template style

The duplicated template style inherits all settings from parent template style except the menu assignment(the cloned template style is not assigned to any menu items). Open the cloned template style, configure theme, layout, etc then assign the template style to the menu items. You set name for template you cloned : Noone_v2 – Blog and assigned Blog menu

 

2. Configure in blog page to how to look like in our demo site.

Frontend of Blog page

 

2.1  Configure module in sidebar of blog page

2.1.1 Module Tags

Module type: K2 Tools
Position : sidebar

 

Frontend

Backend Setting

 

2.2.2 Module Calendar

Module type: K2 Tools

Position: sidebar

Frontend

Backend Setting

 

2.2.3 Module Categories

Module type: K2 Tools
Position: sidebar

Frontend

Backend Setting

 

2.2.4 Module Archives

Module type: K2 Tools

Position: sidebar

 

Frontend

Backend Setting

 

2.2 Guide how to create & configure Blog page

To have blog page look like in our demo site,please following these steps:

You can change frontend by changing leading, primary, and secondary options in category.

Note: The Blog Masonry page has the same configuration like the Blog Classic page but you need select template blog-mansory for category you want display in blog page.

1. Template override

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

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

 

2. Layout Configuration

2.1 Select layout for style

In Noone, each style will use one layout (but please keep in mind that one site use many styles --> so one site can use multiple layouts simultaneously because T3 uses multiple styles simultaneously)

 

2.2 Layout Configuration

In the layout setting, there are 2 parts to be configured: Layout Structure and Responsive Layout configuration

2.2.1 Layout Structure

Set number of columns in each spotlight block

 

2.2.2 Responsive Layout Configuration

Select responsive layout

In each responsive layout, you can enable/disable content resize module position in each spotlight block




 

1. Megamenu configuration

The image below shows the sample of megamenu in Noone demo. In fact, you can do much more with what Megamenu supports.

 

Megamenu is a highlighted feature of T3 Framework. The visual configuration (what you configure is what you see in front-page) of Megamenu helps you configure it at ease.

 

1.1 Enable megamenu

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

 

1.2 Configure megamenu

Megamenu configuration is a global setting so it's the same for all template styles. On the top of template style, hit the Megamenu button

 

Select menu to display on frontend

You can select any menu to configure for Megamenu but it's not the menu displayed in your front-page. The menu displayed in your front-page is the menu you assign in the Template style setting, under the Navigation tab.

 

2. Configuration Level

There are 3 level of configuration that you should know

- Submenu setting

- Column setting

- Menu Item setting

2.1  Menu Item setting

The menu item setting allows you to enable/disable its sub-menu, add extra class to style the menu item, and add icon and caption for the menu item.

2.2. Sub menu item setting

2.3 Column configuration

 

3. 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.

3.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

3.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 Noone 

 

1. Change the Logo image

There are 2 ways to change logo for Noone  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/noo_one/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 template/noo_noone/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 Image

// ----------

.homepage {

  .logo {

    @media screen and (max-width: @screen-xs-max) {

      float: left !important;

    }

    .logo-image {

  // Hide sitename and slogan

  //overflow: hidden;


  a {

    display: inline-block;

    background-image: url("@{T3-Logo-Image}");

    background-repeat: no-repeat;

    width: @T3-logo-Width;

    height: @T3-logo-Height;

    text-indent: -9999px;

    line-height: 1;

    margin: 0 auto;


    @media screen and (min-width: @screen-md) and (max-width: @screen-md-max) {

      background-size: 100%;

      height: 100px;

      width: 90px;

    }


    @media screen and (min-width: @screen-sm) and (max-width: @screen-sm-max) {

      width:88px;

      position:relative;

      z-index:9999;

      background-size:100%;

    }


    @media screen and (max-width: @screen-xs-max) {

      width: 55px;

      height: 63px;

      position: relative;

      z-index: 9999;

      margin-top: 38px !important;

      background-size: 100%;

      margin-left: 36px;

    }


    @media screen and (max-width: @screen-xs) {

      width:40px;

      height:45px;

      background-size:100%;

      margin-top:38px !important;

    }

  }


  //hide sitename and slogan

  span, small {

    display: none;

  }

}

 

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.