Noo Travel 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:

3.1 Template Instruction

3.2 Download & Install

3.3 Homepage configuration

3.4 K2 page configuration

3.5 Template Customization

3.6 Megamenu Configuration

3.7 Logo Customization

3.8 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:

8. T3 Framework 

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. Noo Travel uses T3V3 framework which comes with brand-new look, design approach and incredibly powerful customization feature. Please follow the links provided below to learn more about T3 framework and its implementation. 

 8.1 T3 Framework Introduction

More about T3 framework, please visit HERE

8.2 T3 Installation

Please visit HERE

8.3 T3 Setting

Please visit HERE

8.4  Layout System

Please visit HERE

8.5  Customization

Please visit HERE

1. Plan your site Developer
 
 1.1  Kick-start a New Joomla Site? - If you are planning to start fresh with a new Joomla site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the How to install Quickstart Package documentation for the in-depth how-to guide for Quickstart Installation.
 
 1.2  Install on your existing live site? - If you are planning to use this template for your existing Joomla site, then you should follow the How to make your site look like demo site guide first to dig in the steps involved.
 
 2. Download Template and Extensions
 
After you purchased our menu, please following the instruction to download the package. You’ll then find our template  zip file inside the package
 
3. Install Template and Extensions
 
 Once you successfully Download the files you need, You'll have to:
 
-   Install the template files into your Joomla system.
 
-  At default, during the installation process,Noo Wedding  template will be installed with the settings we're used as on the demo website. Therefore, if you would like to make any changes in configuration, it's recommended that you should complete the setup (including installing all the modules and plugins along with the templates as on demo) then carry out any customization afterwards
 

View how to install extension guide

 
 

Frontend of Homepage

 

Now we’ll guide you to create & configure this page.

1. Module Call Number

Module type: Custom HTML
Position: position-0

Custom HTML

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

Frontend

Backend Setting

Menu assignment

2. Module Social Media

Module type: Custom HTMl
Position: social
Module Class Suffix : social_media

Custom HTML

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

Frontend

Backend Setting

Menu assignment

Module Class Suffix

3. Module Login

Module type : Noo Login
Position: login

Frontend

Backend Setting

Menu assignment

4. Module Slideshow

Module type : Noo Slideshow
Position: slideshow

Frontend

Backend Setting

Menu assignment

To learn more about this module,please see Our Documentation

5. Module WHERE ARE YOU GOING ?

Module type: Custom HTML
Position: position-1
Module Class Suffix : going

Custom HTML

<p class="title">WHERE ARE YOU GOING ?</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>

Frontend

Backend Setting

Menu assignment

Module Class Suffix

6. Module Tabs

Module type: Custom HTML
Position: mast-col1

Frontend

In mast-col 1 module, we loaded 4 module Hottest, Popular Destinations, Galery,Hotel type  Custom HTML, position: noo-tabs

Now we’ll guide you to create & configure this module as frontend

6.1 Create 4 module Hottest, Popular Destinations, Gallery, Hotel type Custom HTML, position: noo-tabs

6.1.1 Module Hottest

Module type : Custom HTML
Position: noo-tab

Custom HTML

<div id="tab1" class="tab-pane">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/36519586?color=ff9933" width="100%" height="483" frameborder="0"></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>

Frontend

Backend Setting

Menu assignment

Similarly, do the same step with another modules

6.1.2 Module Popular Destinations

Module type: Custom HTML
Position:  noo-tab

Custom HTML

<div id="tab2" class="tab-pane active">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/4636202" width="100%" height="483" frameborder="0"></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>

Frontend

6.1.3 Module Galery

Module type: Custom HTML
Position: noo-tab

Custom HTML

<div id="tab3" class="tab-pane">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/53673455" width="100%" height="483" frameborder="0"></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>

Frontend

6.1.4 Module Hotel

Module type: Custom HTML
Position: noo-tab

Custom HTML

<div id="tab4" class="tab-pane active">
<div class="tab-video video"><iframe src="http://player.vimeo.com/video/52302939" width="100%" height="483" frameborder="0"></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>

Frontend

6.2 Create module Tabs to load 4 module Hottest, Popular Destinations, Galery,Hotel in mast-col1 position.

Custom HTML

{nootabs type="modules" module="noo-tab"}{/nootabs}

Backend Setting

Menu assignment

7. Module Get Call Back

Module type: Custom HTML
Position:  mast-col3
Module Class Suffix : call-back

Custom HTML

<div class="text">
<p>Save more today by booking your trip as a package.<span id="color">Say hello to saving.</span></p>
</div>
<div class="call-back">
<p><a href="#">GET A CALL BACK</a></p>
</div>

Frontend

Backend Setting

Menu assignment

Module Class Suffix

8. Module Events

Module type: K2-Content
Position: position-5

Frontend

Backend Setting

Menu assignment

9. Module Discover

Module type: Noo Content Slider
Position: position-6

Frontend

Backend Setting

Display Options

Menu assignment

10. Module FLIGHT

Module type:  Custom HTML
Position: position-7
Module Class Suffix : flight

Custom HTML

<h3 class="module-title">FLIGHT</h3>
<div class="flight">
<h4>No booking fee.ever</h4>
<table class="table">
<thead>
<tr><th>Price</th><th>From</th><th>To</th></tr>
</thead>
<tbody>
<tr class="success">
<td class="price">$233</td>
<td>Newwark</td>
<td>Toronto</td>
</tr>
<tr class="success">
<td class="price">$57</td>
<td>Atlanta</td>
<td>Macon</td>
</tr>
<tr class="success">
<td class="price">$72</td>
<td>Chicago</td>
<td>Minneapolis</td>
</tr>
<tr class="success">
<td class="price">$72</td>
<td>Minneaplis</td>
<td>Chicago</td>
</tr>
<tr class="success">
<td class="price">$71</td>
<td>Houston</td>
<td>Dallas</td>
</tr>
<tr class="success">
<td class="price">$71</td>
<td>Dallas</td>
<td>Houston</td>
</tr>
<tr class="success">
<td class="price">$72</td>
<td>Fort Lauderdale</td>
<td>Tampa</td>
</tr>
</tbody>
</table>
</div>

Frontend

Backend Setting

Menu assignment

Module Class Suffix

11. Module App Store Smartphone

Module type: Custom HTML
Position: position-9

Custom HTML

<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="#"> Free download </a></div>
</div>

Frontend

Backend Setting

Menu assignment

12. Module Slide Images

Module type: Custom HTML
Position: navfooter

Custom HTML

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

Frontend

Backend Setting

Menu assignment

13. Module Book a trip

Module type: Module Menu
Position: footer-1

Frontend

Backend Setting

Menu assignment

14. Module Destinations

Module type: Menu
Position:  footer-2

Frontend

Backend Setting

Menu assignment

15. Module Travel Partners

Module type: Menu
Position: footer-3

Frontend

Backend Setting

Menu assignment

16. Module Newsletter

Module type: Menu
Position: footer-4

Frontend

Backend Setting

Menu assignment

In this module, you can add Intro Text options below:

<p id="title">Subscribe <span>to Our Newsletter</span></p>
<div class="modns">
<div class="modnsintro">Sign up with your email to get fresh updates.</div>
</div>

17. Module Categories

Module type: Menu
Position: footer

Frontend

Backend Setting

Menu assignment

18. Module Contact Us

Module type:  Custom HTML
Position: footer-2
Module Class Suffix : contactus

Custom HTML

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

Frontend

Backend Setting

Module Class Suffix

Menu assignment

19. Module About Us

Module type: Menu
Position: footer-3

Frontend

Backend Setting

Menu assigment

20. Module  We accept

Module type: Custom HTML
Position: footer-4
Module Class Suffix: linkaccept

Custom HTML

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

Frontend

Backend Setting

Menu assignment

Module Class Suffix

21. Module Copyright

Module type: Footer
Position: footer

Frontend

Backend Setting

Menu assignment


 

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:

 

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. Layout Configuration

2.1 Select layout for style

In Noo Travel we supported one style:

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 configuration

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 spotlight block













 

The image below shows the sample megamenu menu in Noo Travel  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.

2.1 Enable Megamenu

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

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

2.2.1 Configuration Level

There are 3 level of configuration that you should know

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.

Sub- menu configuration

Column configuration

 

Here is frontend of Logo in Noo Travel 

1. Change Logo image

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