NooMetro Template Documentation


  1. About Joomla version used in NooMetro

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 NooTheme

Thank you for choosing and using NooMetro Template! We really appreciate your choice and hope that our template will bring the best values and benefits to your business.

You can always reach us for support at our Ticket System. And don’t forget to leave us your comment on our product to help us bring you even better and more excellent Joomla templates & extensions.

  1. About NooMetro Template User Guide

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

  1. NooTheme Extensions Supported

Here are the extensions used in NooMetro  template:

Module

6. Layout & Module Positions

Layout

Here are 3 different layouts used in NooMetro  template:

Module positions

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

The below picture indicates modules’ display in Homepage:

 


Modules’ positions are:


  1. T3 Framework

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

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

8.1 T3 Framework Introduction

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

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

8.2 T3 Installation

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

8.3 T3 Setting

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

8.4 Layout System

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

8.5 Customization

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

1. Choose you site development plan

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

2. Download & Install

Download Template

To download NooMetro  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: NOO_NooMetro_Source.zip 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 NooMetro, please follow these following steps:

- Step 1: Unzip the downloaded package: NOO_NooMetro_Source.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_metro-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 NooMetro 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 NooMetro, please follow these steps:

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


                                      

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




                            


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

modules.

                                              

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

 

Guide to How to configure Homepage in Metro

The below picture indicates modules’ display in Homepage:

Modules’ positions are:

Let’s dive in each module detailed configuration in Homepage:

  1. Module Slideshow

Module type: Noo Slideshow
Position: slideshow

Frontend


Backend

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

Module:

 

You can add Descriptions for images in Slideshow. In Slideshow module’s we add descriptions bellow:

 


Image 1: Description

<div class="slidecontent-right">
<div class="text-large">RESPONSIVE</div>
<div class="text-xlarge"><span class="text-bold">& RETINA</span> READY</div>
<hr class="separate-line"></hr>
<div class="description">SOLID & CLEAN, FRAMEWORK WITH ALL FEATURES ON PRODUCT</div>
</div>

Image 2: Description

<div class="slidecontent-left black text-short">
<div class="text-large">MODERN</div>
<div class="text-xlarge"><span class="text-bold">INTERIORS</span></div>
<hr class="separate-line"></hr>
<div class="description">DISCOVER ELEGANT SOLUTION FAST, RELIABLE, AFFORDABLE!</div>
</div>

Image 3:Description

<div class="slidecontent-left text-opacity text-short">
<div class="text-large">FRESH</div>
<div class="text-xlarge"><span class="text-bold">& CLEAN</span></div>
<hr class="separate-line"></hr>
<div class="description">SOLID & CLEAN, FRAMEWORK WITH ALL FEATURES ON PRODUCT</div>
</div>

Image 4: Description

<div class="slidecontent-left">
<div class="text-large">EXCLUSIVE</div>
<div class="text-xlarge"><span class="text-bold">& USERFRIENDLY</span></div>
<hr class="separate-line"></hr>
<div class="description">SOLID & CLEAN, FRAMEWORK WITH ALL FEATURES ON PRODUCT</div>
</div>

Menu assignment: Only on the pages selected

 

Advanced

                                 

  1. Module name: Footer

Module type: Footer
Position: footer

Frontend

                                      


Backend

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



Menu assignment: On all pages


                                 

  1. Module name: Social Media

Module type: Custom HTML
Position: social

Frontend

                                                    

Backend

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

Module

 

 

Custom Output: Enable Toggle editor and enter this 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>

Menu assignment: On all pages


 

Module Class Suffix:  module uses Module Class Suffix: social_media

 


 

Guide to how to configure Homepage--> Background Slider


  1. Module name: JUX Background Slideshow

Type:JUX Background Slideshow
Position: slideshow

Frontend

 


Backend

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

Module


Menu assignment: Only on the pages selected

 

                

Image Gallery

 

Supersized Advanced Options

 

Advanced Options

 

Custom Css:

body div.overlay,
.body .container{
background: none !important;
}
body div.overlay{
background: none !important;
}
#supersized img{
height: 633px !important;
}
.only-progress-back {
bottom: 42px !important;
}

To learn more on how to configure this module, please visit HERE


Guide to how to configure Homepage-->Background Video

  1. Module name: JUX Background Video

Module type: JUX Background Video
Position: slideshow

Frontend

Please see a video :


Backend

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

Module & Video Configuration


Menu assignment: Only on the pages selected


Video Playlist


To learn more on how to configure  this module, please visit HERE

 

             2. Module name: Overlay Slideshow

Module type: Custom HTML
Position: slideshow

Frontend



Backend

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

 


Custom Output: Enable Toggle editor and enter this Custom HTML:

<div class="overlay-slideshow">
<div class="medium-text">MAKE THEIR LIVES</div>
<div class="large-text"><strong>EASIER!</strong></div>
<div class="small-text">Try out a few of the basic options
to see what our Background Slideshow can do.
There are many more options available on the Backend!
</div>
<div class="overlay-btn">
<a class="btn-overlay" href="#">VIEW PORTFOLIO</a>
</div>
</div>

Detailed Image's Custom HTML



Menu assignment: Only on the pages selected

 

         


Frontend Background slider

 

 

VIDEO TUTORIAL: This is video tutorial how to configure Homepage module configuration

In K2 Page, each module has a class suffix which is module’s background color. Here are modules’ class suffixes in K2 Page:

Class suffix’s detail:

  1. Bg-gray: module class suffix bg-gray displays module’s background color in frontend as gray color.

For example: With module Categories, module class suffix: bg-gray


                                      

You can easily change module’s background color by changing module’s class suffix. For instance, you can change background color to green by changing class suffix to: Module Class Suffix: bg-green

 

                       

                                       

  1. Bg- yellow: This class suffix displays module’s background color as yellow color.

For example: in module Categories, Module Class Suffix: bg-yellow.



                               

  1. Bg-red: This class suffix displays module’s background color as red color.

For example in module Categories, Module Class Suffix: bg-red

 

               

                             


  1. Bg-darkblue: This class suffix displays module’s background color as dark blue color.

For example: in module Categories, module class suffix: bg-darkblue

                               

  1. Bg-green: This class suffix displays module’s background color as green color.

For example: in module Categories, module class suffix: bg-green

                                


You can flexibly and easily change background color for modules in K2 pages by following the above guide.


  1. Module name: Archived

Type: K2-Tools
Position: sidebar-1
Class-Suffix: bg-yellow
  1. Module name: Recent Post

Type: K2 Comment
Position: sidebar-1
Class-Suffix: bg-red
  1. Module name: Calendar

Type: K2- Tools
Position: sidebar-1
Class-Suffix: bg-darkblue
  1. Module name: Tags

Type: K2-Tools
Position: sidebar-1
Class-Suffix: bg-green
  1. Module name: Comments

Type: K2 Comments
Position: sidebar-1
Class- Suffix: bg-darkblue

I. Template Override

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

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

II. Themes

Here are styles supported in NooMetro


III. Layout
 

Supported layouts in NooMetro


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.




 

To change logo of template, please follow these steps:

 

                                      






 


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


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

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

1. Enable mega menu


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


Configure for selected menu item, sub-megamenu


Frontend appearance


1. Module Portfolio Door Style

Module position: Noo Portfolio
Position: mast-col1

Frontend



Backend

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

Module:


 

Menu assignment: Only on the pages selected

                                        


Display Options

 

                   


Advanced

 

             


 

2. Module Portfolio Flex Style

Module type: Noo Portfolio
Position: mast-col1

Frontend

 


Backend

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

Module

 


Menu assignment: Only on the pages selected


                                             

Display Options

 

    


Advanced

 



3. Module Portfolio Vario Style

Module type: Noo Portfolio
Position: mast-col1

Frontend



Backend

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

Module:


Menu assignment: Only on the pages selected

 

                                                              

 


Display Options


Advanced


1. Module name: Latest New

Module type: Latest  New
Position: sidebar-1

Frontend


                                         

Backend

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

 


Menu assignment: Only on the pages selected

 

                                          

2. Module name: Login

Module type: Login
Position: login

Frontend

 

                                                  


Backend

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

 


Menu assignment: Only on the pages selected

 

                                                   

Module name: Project

Module type: K2 Content
Position: mast-col1

Frontend


Backend

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


                                               

Menu assignment: Only on the pages selected

 

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.