NooTravel 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 NooTravel

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 NOO Travel

NOOTravel is a responsive Joomla template made to help you build a kick-ass travel website.

3. About NooTravel Template User Guide

The user guide provided is to help you to quickly learn about NooTravel 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. Template Instruction 

  2. Download&Install

  3. Include extension configuration

  4. K2 module configuration

  5. Joomla module configuration

  6. Template Customization

  7. Mega Menu Configuration

  8. Logo Customization 

  9. Recommendation 

4. Features

5. NooTheme Extensions Supported

Here are the extensions used in NooTravel template:

Module

Plugins

6. 3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 4 different layouts used in NooTravel template:

Module positions

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

 

+> Module Hottest(Custom HTML), position nootab

+>Module Popular Destinations(Custom HTML), position nootab

+> Module Galery(Custom HTML), position nootab

+> Module Hotel(Custom HTML), position nootab

8. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. Noo Times 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. Choose you site development plan

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

VIDEO TUTORIAL: NOOTheme Template Configuration Tutorial

This is a video tutorial about how to download, install and configure Nootheme Template and its modules, plugins. The video uses NooTravel- A Joomla Template for music industry released by NOOTheme as an example.

 

2. Download & Install

Download Template

To download NooNews  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_nootravel.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 NooTravel, please follow these following steps:

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

 

 

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


                         

- Step 4: Click on “Choose File” then select pkg_noo_nootravel-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 5: After successfully uploading and installing template file, go to Extensions--> Template Manager.

                                     

- Select Default for NooTravel 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 NooTravel, 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 7 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 Plugin

To install Plugins for NooTravel please follow these steps:  

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

 

                                 

- Step 2: Choose Plugin file plg_system_nootabs XXX.zip in Plugin folder to upload.

 

                                   

- Step 3: After successfully uploading and installing plugin file, go to Extensions--> Plugin Manager to enable/disable plugin you’ve uploaded

 




 

NOOTRAVEL uses 3 extensions :

Let’s roll down to see how to create& configure them:

1. Module Discover

            Type: Noo Content Slider
            Position: position-6

Frontend

                                      

Backend

To have this module, go to backend: Extensions-->Module manager-->New--> Select  type as Noo Content Slider, and set titile Discover

 

   

Basic Option

                       

Display Options

                                  

Menu assignment:  Only on the pages selected

                                    

2. Module Noo Login

            Module type: Noo Login
            Position: login

Frontend

                                                                          

Backend

To have this module, go to backend : Extensions--> Module manager--> New-->Select module type Noo Login, and set title Login


Menu assignment : On all pages

 

                                                    

 

3. Module Noo Slideshow

            Module type: Slideshow
            Position: slideshow

Frontend

 

Backend

To create this module Slideshow, go to backend: Extensions--> Module manager--> New--> Select module type Noo Slideshow, and set title Slideshow

 

Basic Options

 

Menu assignment : Only on the pages selected

 

                    

 

1. Install&Configure K2 component

1.1 K2 Instruction

K2 is a powerful & ideal extension that allows for incredible control of your Joomla content. K2 provides an out-of-the box integrated solution featuring rich content forms for items.

To get K2 on your site:

Download K2 component from the website http://getk2.org/

If you are new to K2, go to K2 guide to install and configure the component in your Joomla!.

1.2 Install&Configure K2 pages

To install&configure K2 pages, please follow these steps:

- Step 1:  Go to your site’s backend: Extensions--> Module manager and upload K2 you’ve downloaded

- After uploading successfully, you will have the message and K2 information like below:

- Step 2: Global Configuration

You will find general settings  for K2 in Global Configuration. Navigate to System--> Global Configuration:

Click on K2 on the left side, you will have K2 settings displayed. Please see the images below for K2 settings in Global Configuration:

Layout & View

Contents

Images

Social

Comments

Frontend Edditing

- Step 3:  K2 categories

To build K2 for your website like our demo, navigate to Components --> K2 --> Categories:

 

2. Guide how to create & configure Blog pages

Frontend of Blog pages

To have this page, please following these steps:

2.1 Module Banner

Module type: Custom HTML
Position: slidehow

Custom HTML

<p><img src="images/nootheme/demo/travel_banner.jpg" alt="" /></p>

Frontend

Backend Settings

Menu assignment

2.2 Configure Blog page

Frontend of  Blog page

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

- Step 1 : Go to backend: Components--> K2-->Categories-->Select categories you want to display in Blog pages and configure

You can change frontend by change leading count and Primary count in category.

- Step 2: Beside, you can configure to display of items,please configure in Item view options in category listings tabs, you can Show/Hide fields you want to display in frontend

3. Guide how to configure Item Blog page

Frontend of Item Blog page

To have this Items Blog page look like in our demo site, please following these steps:

- Go to K2 category you want to display items in frontend and configure Item view options tab, you can Show/Hide options:

4. Guide how to create & configure Last Item

Frontend of pages

To have this pages, please following these pages:

- Step 1: Go to backend: Menu --> Main Menu--> Create new menu and set name  Latest Items with the settings

- Step 2:  Configure options for lastest items, you can see image below:

5. Guide how to create & configure User Blog Pages

Frontend of page

To have this pages, please following these steps:

- Step 1: Go to backend: Menu-->Main menu --> Create new menu and set name User Blog Page with the settings bellow:

- Step 2: Configure options for User Blog Page, you can see image below:

5. Guide how to create & configure other module in K2 page

In NooTravle, there are 7  K2 module. We’re going to learn how to create and configure these K2 modules so they can display as in our Demo site.

5.1 Module Events

         Module type: K2-Content
         Module position: position-5

Frontend


                                      

Backend

To create this module Events, go to backend : Extensions--> Module manager--> New--> Select module type K2-Content, and set title Events

Basic Options

                                 

 

Menu assignment : Only on the pages selected

                                

 

5.2 Module Archive

         Module type: K2-Tools
         Module position: sidebar-1

Frontend

                                 

Backend

To create this module, go to backend : Extensions-->Module manager--> New--> Select module type K2-Tools, and set title Archive

        

 

Basic Option

                           

 

Menu assignment : Only on the pages selected


                              
 

5.3 Module Categries

               Module type: K2-Tools
                Module position: sidebar-1

Frontend

                                                           

Backend

To create this module, go to backend : Extensions--> Module manager-->New--> Select module type K2- Tools, and set title Categories

 

Basic Options

                

Menu assignment : Only on the pages selected

                           

 

5.4 Module Recent post

             Module type:K2-Content
             Module position: sidebar-1

Frontend

                                          

Backend

To create this module, go to backend : Extensions-->Module manager--> New--> Select module type K2- Content, and set title Recent Post

       

 

Basic Options:

                            

 

Menu assignment: Only on the pages selected

                               

 

5.5 Module K2-Calendar

               Module name: K2- Calendar
               Module position; sidebar-1

Frontend

                                                

Backend

To create this module, go to backend: Extensions--> Module manager--> New--> Select module type K2-Tools, and set title K2 Calendar

 

Basic Options

                   

Menu assignment: Only on the pages selected

                                      

 

5.6 Module Tag

             Module type: K2-Tools
            Module position: sidebar-1

Frontend

 

                                              

Backend

To create this module, go to backend: Extensions--> Module manager-->New--> Selec module type K2- Tools, and set title Tag

 

Basic Options

                       

 

Menu assignment: Only on the pages selected

                     

 

5.7 Module Recent Comments

                Module type: K2-Comments
                Position: sidebar-1

Frontend

                                                          

Backend

TO create this module K2- Comments, go to backend: Extensions--> Module manager--> New--> Select module type K2- Comments, and set title Recent Comments

 

Basic Options

 

Menu assignment: Only on the pages selected

                             

 

1. Joomla Module Configuration

A. Module Custom HTML

NooNews  uses 5  modules Custom HTML. The below section will guide you how to create and configure them

1. Module Call Number

Module type: Custom HTML
Module position: position-0

Frontend

                                  

 

Backend

To create this module, go to backend : Extensions--> Module manager-->New-->Select module type Custom HTML and set title Call Number

 

Custom Output

                              

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor:

         <p>Book online or call:<span>1800.123.4560</span></p>

Menu assignment : On all pages

                               

2. Module Search

Module type: Custom HTML
Module position: navheader

Frontend:

 

Backend

To create this module Search, go to backend : Extensions--> Module manager--> New--> Select module type Custom HTML, and set title Search

         

 

Custom Output

                      

 

To have content display as above, enable Toggle mode in the editor and paste this Custom HTML code to your editor

<div class="travel-search">
<div class="search search-tour"><input onfocus="if(this.value == 'Search tours.') this.value = '';" onblur="if(this.value=='') this.value='Search tours.';" type="text" value="Search tours." /><a href="#">search</a></div>
<div class="search search-calenda-in"><input onfocus="if(this.value == 'Check in.') this.value = '';" onblur="if(this.value=='') this.value='Check in.';" type="text" value="Check in." /><a href="#">search</a></div>
<div class="search search-calenda-out"><input onfocus="if(this.value == 'Check out.') this.value = '';" onblur="if(this.value=='') this.value='Check out.';" type="text" value="Check out." /><a href="#">search</a></div>
</div>
<div class="iconsearch"><a href="#">search</a></div>

 

Menu assignment :  On all pages except those selected


                                 

3. Module Where are you going

Module type: Custom HTML
Module position: position-1

Frontend

 

Backend

To create this module Where are you going, go tobackend: Extensions--> Module Manager--> New--> Select module type Custom HTML and set title Where are you going

   

 

Advance Options : Module uses class-suffix : going

 

                        

Custom Output :

               

To have content display as above, enable Toggle  mode in the editor and paste this HTML code to your editor

<p class="title">WHERE ARE YOU <span>GOING ?</span></p>
<div class="row">
<div class="span2 item-first">
<div id="Mod140" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map1.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map1_hover.png" alt="" /></a></p>
<p>Centerat &amp; South-ameltraica</p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 ">
<div id="Mod141" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map2.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map2_hover.png" alt="" /></a></p>
<p>America</p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 ">
<div id="Mod142" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map3.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map3_hover.png" alt="" /></a></p>
<p>Africa</p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 ">
<div id="Mod143" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map4.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map4_hover.png" alt="" /></a></p>
<p>Asia</p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 ">
<div id="Mod144" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map5.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map5_hover.png" alt="" /></a></p>
<p>Europe</p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 item-last">
<div id="Mod145" class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="last-img"><a href="#"><img src="images/nootheme/demo/map6.png" alt="" /></a></p>
<p class="firt-img"><a href="#"><img src="images/nootheme/demo/map6_hover.png" alt="" /></a></p>
<p>Autralia</p>
</div>
</div>
</div>
</div>
</div>
</div>

Menu assignment: Only on the pages selected

                                

4. Module  PRESONAL 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 Module Custom HTML with the settings below :

      

 

Advance Options : Module uses class-suffix : booking

                             

 

Custom Output

                            

 

To have content display as above, enable Toggle mode in the editor and paste this

HTML code to your editor

Code :

<div class="row">
<div class="span4 item-last-booking">
<div class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p>select the date you would like to book for our ses-sion or consultation.</p>
<img src="images/nootheme/demo/calenda-bk.jpg" alt="" />
<p class="room-type"><span>Room Type:</span><select>
<option>Double Room(2 pers)</option>
<option>Double Room(3 pers)</option>
</select></p>
<p class="room-type"><span>Insurance:</span><select>
<option>None, i'll get my own</option>
<option>None, i'll get my own 2</option>
</select></p>
</div>
</div>
</div>
</div>
</div>
<div class="span6 item booking">
<div class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<p class="acc-booking"><span>First name:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>Last name:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking date-birth"><span class="datebirth">Date of Birth:</span><input class="booking-input-date" type="text" /><span class="yearyear">YYYY:</span><input class="booking-input-date" type="text" /><span class="monmon">MM:</span><input class="booking-input-date" type="text" /><span class="dayday">DD:</span></p>
<p class="acc-booking"><span>Email address:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>Telephone:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>City / Town:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>County / State:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>County:</span><span class="note">*</span><input class="booking-input" type="text" /></p>
<p class="acc-booking"><span>Comment:</span><textarea rows="4" cols="50"></textarea></p>
</div>
</div>
</div>
</div>
</div>
<div class="span2 item-first-booking">
<div class="t3-module module">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<div class="people-time">
<p>People:</p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select></div>
<div class="people-time time">
<p>Time:</p>
<select>
<option>07:00</option>
<option>08:00</option>
<option>09:00</option>
</select></div>
</div>
</div>
</div>
</div>
</div>
<div class="span10">
<p class="acc-booking submit"><span>(</span><span class="note">*</span><span>)</span><span>You are required to enter this</span><a href="#"><span class="submit-booking">Booking</span></a></p>
</div>
</div>

 

Menu assignment :  Only on the pages selected

                          

 

5. Module Tabs, position mast-col1

Module tabs load 4 module:

+> Module Hottest(Custom HTML), position noo-tabs

+> Module Popular Destinations(Custom HTMl), position noo-tabs

+> Module Galery(Custom HTML), position noo-tabs

+> Module Hotel(Custom HTML), position noo-tabs

 

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

 

Custom Output

                 

Menu assignment : Only on the pages selected

                     

 

5.1 Module Hottest

Module type: Custom HTML
Module position: noo-tabs

Frontend

 

Backend

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

         

 

Custom Output

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div id="tab1" class="tab-pane">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/36519586?color=ff9933" frameborder="0" width="100%" height="483"></iframe></div>
<div class="tab-video">
<ul class="images">
<li class="left hover"><img src="images/nootheme/demo/tab-img1.jpg" alt="" />
<div class="title">
<p class="title1">BELIZE</p>
<p class="title2">23/15</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img2.jpg" alt="" />
<div class="title">
<p class="title1">WAIMEA</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="left hover"><img src="images/nootheme/demo/tab-img3.jpg" alt="" />
<div class="title">
<p class="title1">TULUM, MEXICO</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img4.jpg" alt="" />
<div class="title">
<p class="title1">BIOME</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/+hover.png" alt="" /></p>
</div>
</div>
</li>
</ul>
</div>
</div>

 

Menu assignment : On all pages

                                      

5.2 Module Popular Destinations

Module type: Custom HTML
Module position: nootabs

Frontend

Backend

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

         

Custom Output

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div id="tab2" class="tab-pane active">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/4636202" frameborder="0" width="100%" height="483"></iframe></div>
<div class="tab-video">
<ul class="images">
<li class="left hover"><img src="images/nootheme/demo/tab-img2.jpg" alt="" />
<div class="title">
<p class="title1">BELIZE</p>
<p class="title2">23/15</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img3.jpg" alt="" />
<div class="title">
<p class="title1">WAIMEA</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="left hover"><img src="images/nootheme/demo/tab-img4.jpg" alt="" />
<div class="title">
<p class="title1">TULUM, MEXICO</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img1.jpg" alt="" />
<div class="title">
<p class="title1">BIOME</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
</ul>
</div>
</div>

Menu assignment : On all pages

                                

5.3 Module Galery

Module type: Custom HTML
Module position: noo-tabs

Frontend

 

Backend

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

       

 

Advance Options: module uses class- suffix galery

                     

 

Custom Output

 

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div id="tab3" class="tab-pane">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/53673455" frameborder="0" width="100%" height="483"></iframe></div>
<div class="tab-video">
<ul class="images">
<li class="left hover"><img src="images/nootheme/demo/tab-img3.jpg" alt="" />
<div class="title">
<p class="title1">BELIZE</p>
<p class="title2">23/15</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p>Show more</p>
<p class="tab-hover-img"><a href="#"><img src="images/nootheme/demo/view-galery.png" alt="" /></a></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img4.jpg" alt="" />
<div class="title">
<p class="title1">WAIMEA</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p>Show more</p>
<p class="tab-hover-img"><a href="#"><img src="images/nootheme/demo/view-galery.png" alt="" /></a></p>
</div>
</div>
</li>
<li class="left hover"><img src="images/nootheme/demo/tab-img2.jpg" alt="" />
<div class="title">
<p class="title1">TULUM, MEXICO</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p>Show more</p>
<p class="tab-hover-img"><a href="#"><img src="images/nootheme/demo/view-galery.png" alt="" /></a></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img1.jpg" alt="" />
<div class="title">
<p class="title1">BIOME</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p>Show more</p>
<p class="tab-hover-img"><a href="#"><img src="images/nootheme/demo/view-galery.png" alt="" /></a></p>
</div>
</div>
</li>
</ul>
</div>
</div>

 

Menu assignment :On all pages


                                      

5.4 Module Hotel

Module type: Custom HTML
Module position: noo-tabs

 

Frontend


Backend

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

 

   

 

Advance Options: Module uses class-suffix: last

                       

 

Custom Output:

 

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code 

<div id="tab4" class="tab-pane active">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/52302939" frameborder="0" width="100%" height="483"></iframe></div>
<div class="tab-video">
<ul class="images">
<li class="left hover"><img src="images/nootheme/demo/tab-img4.jpg" alt="" />
<div class="title">
<p class="title1">BELIZE</p>
<p class="title2">23/15</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img3.jpg" alt="" />
<div class="title">
<p class="title1">WAIMEA</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="left hover"><img src="images/nootheme/demo/tab-img2.jpg" alt="" />
<div class="title">
<p class="title1">TULUM, MEXICO</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
<li class="right hover"><img src="images/nootheme/demo/tab-img1.jpg" alt="" />
<div class="title">
<p class="title1">BIOME</p>
<p class="title2">30/25</p>
</div>
<div class="tab-hover">
<div class="tab-hover-content">
<p class="tab-hover-img"><img src="images/nootheme/demo/tab-hover1.png" alt="" /></p>
</div>
</div>
</li>
</ul>
</div>
</div>

Menu assignment : On all pages

                                 

 

6. Module Get Call Back

Module type: Custom HTML
Module position: mast-col3

Frontend

 

Backend

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

 

       

 

Advance Options: module uses class- suffix : call-back

                         

 

Menu assignment : Only on the pages selected

 

                          

 

7. Module App Store Smartphone

              Module type: Custom HTML
              Module position: position-9

Frontend

 

Backend

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

        

 

Custom Output

                           

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div class="phoneapp">
<div class="phoneapp-img"><img src="images/nootheme/demo/phoneapp.png" alt="" /></div>
</div>
<div class="phoneapp">
<div class="phoneapp-text">
<h3><a href="#">STORE APP</a></h3>
<p>Introducking</p>
<p>COMPANY HOTELS</p>
<p>Save with iPhone, even last minute</p>
</div>
</div>
<div class="phoneapp">
<div class="phoneapp-input"><a class="linkphoneapp" href="#"> <span>Free download </span> </a></div>
</div>

 

Menu assignment: Only on the pages selected

                          

 

8. Module Slide Images

             Module type: Custom HTML
           Module position: navefooter

Frontend

 

Backend

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

 

Custom Output

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div class="slide_logo">
<p><a href="#"><img src="images/nootheme/demo/logo-1.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-3.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-4.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-5.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-6.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-7.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-8.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/logo-9.png" alt="" /></a></p>
</div>

 

Menu assignment :  On all pages


                                   

9. Module We accept

              Module type: Custom HTML
              Module position: footer-4

Frontend


                                                  

Backend

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

 

Advanced Options: module uses class-suffix: linkaccept

                          

 

Custom Output

                               

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code :

<p><a class="master" href="#">master</a> <a class="paypal" href="#">paypal</a> <a class="visa" href="#">visa</a> <a class="co" href="#">co</a></p>

 

Menu assignment: On all pages

                            
 

10. Module Social Media

                Module type: Custom HTML
               Module position: social

Frontend

                                                              

Backend

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

 

Advance Options: module uses class-suffix: social_media

                    

 

Custom Output

                         

 

To have content display as above, enable Toggle mode tin the editor and paste this HTML code to your editor

Code:

<ul class="menu">
<li><a class="icon icon-facebook" href="#"><span class="social-title">Facebook</span></a></li>
<li><a class="icon icon-twitter" href="#"><span class="social-title">Twitter</span></a></li>
<li><a class="icon icon-pinterest" href="#"><span class="social-title">Pinterest</span></a></li>
<li><a class="icon icon-rss" href="#"><span class="social-title">RSS Feed</span></a></li>
<li><a class="icon icon-google-plus" href="#"><span class="social-title">Google Plus</span></a></li>
</ul>

 

Menu assignment: On all pages


                                     

11. Module Contact Us

              Module type: Custom HTML
              Module position: footer-2

Frontend

                                                                         

Backend

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

 

 

Advance Options: module uses class-suffix: contactus

                             

 

Custom Output

 

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<ul>
<li>White St, New York</li>
<li>+112 345 6789</li>
<li>Travel Planet</li>
<li>travel@nootheme.com</li>
</ul>

 

Menu assignment: On all pages


                                          

12. Module Offline Social

                Module type: Custom HTML
              Module position: ofsocial

Frontend

Backend

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

        

 

Custom Output

                   

To have content display as above, enable Toggle mode in the editor and paste this HTML code to your editor

Code:

<div class="of-social">
<p>In the mean time, meet us at:</p>
<p> <a href="#"><img src="images/nootheme/demo/of-social-face.png" alt="" /></a><a href="#"><img src="images/nootheme/demo/of-social-tw.png" alt="" /></a></p>
</div>

 

Menu assignment : On all pages

                                         

 

B. Module Menu

1. Module Book a trip

Module type: Menu 
Position: footer-1

Frontend

                                                                                     

Backend

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

 

Basic Options

                                      

Menu assignment: On all pages

                                        

2. Module Categories

 Module type: Menu
 Module position: footer-1

Frontend

                                                                                      

Backend

To have this module, go to backend: Extensions--> Module Manager--> New--> Select type as Module Menu and set title Categories

 

Basic Options

                                       

 

Menu assignment: On all pages


                                          

3. Module Destinations

Module type: Menu
Module position: footer-2

Frontend

                                                                           

Backend

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

 

Basic Options

                                  

 

Menu assignment: On all pages


                                  

4. Module Travel Partners

Module type: Menu
Module position: footer-3

Frontend

                                                       

 

Backend

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

 

Basic Options

                                                 

Menu assignment: On all pages

                                                     


 

5. Module About Us

Module type: Menu
Module position: footer-4

Frontend

                                                                            

Backend

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

 

 

Basic Options

                                              

Menu assignment: On all pages

                                               

 

3. Module Breadcrumbs

Module type:Breadcrumbs
Module position: breadcrumbs

Frontend

                                                           

Backend

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

         

 

Basic Options

                                            

 

Menu assignment:On all pages except those selected


                                    

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

NooTravel supports only 1 style


                    

III. Layout


Supported layouts in NooNews

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.

 

                                              


 

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

Megamenu is a highlight 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.  Enable Megamenu

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

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 in frontend

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

Configuration Level

There are 3 level of configuration that you should know

-         Submenu setting

-         Column setting

-         Menu Item setting

1.1 Menu item

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

1.2 Sub- menu configuration

1.3 Column configuration

 

Here is frontend of Logo in Noo Wedding

1. Change Logo image

There are 2 ways to change logo for Noo Wedding 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:

#2:  Change Logo from variable.less file

Another way to change the logo is changing logo image path in variables.less file, which is located in the {site}template/noo_travel/less

@T3logoWidth:               109px;
@T3logoHeight:              97px;
@T3LogoImage:               "@{T3ImagePath}/logo.png";

2. Logo Styling

To customize style for logo, open file style.css that is located in template/noo_travel/less/style.css folder. Search for “logo text”, you’ll find the style where you can either add more styles or customize it with preset style.

// Logo Text
// ----------
.logo-text {
 h1 {
   color: @grayDark;
 }
 h1 a {
   color: @grayDark;
   text-decoration: none;
 }
 &:hover h1 a,
 h1 a:hover,
 h1 a:active,
 h1 a:focus {
   text-decoration: none;
 }
 // Taglines
 .site-slogan {
   display: block;
   font-size: @baseFontSize;
   margin-top: 5px;
 }
}  
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 the forum, or our ticket system. We spend more time in getting the information from user in case the support guidelines are not followed.