Noro Template Documentation


Thank you for choosing and using Noro 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 Joomla version used in Noro

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 Noro Template User Guide

The user guide provided is to help you to quickly learn about Noro template and how to use it easily. This documentation is recommended for both non-advanced & advanced users. Please read carefully.

Main aspects covered in the user guide:

  1. Installing Template and Extensions in your Joomla

  2. Modules Configuration – How to create and customize modules

  3. Template Customization

  4. Mega Menu Configuration

3. Features

Nootheme Extension Supported

Third- party Extension supported

Layout &Module Position

Layout

Noro supports 4 layout :

Module position

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

 

4. T3 Framework

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

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

T3 Framework Introduction

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

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

T3 Installation

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

T3 Setting

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

Layout System

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

Customization

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

1. Choose you site development plan

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

VIDEO TUTORIAL: NOOTheme Template Configuration Tutorial

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

2. Download

Download Template

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

 

For easier installation for user, we created a Quickstart file. By installing this file, you will have a template looks like our demo. Basically, Quickstart installation will clone your site. And then, you’ll only have to replace the default content by yours.

Here is the step-by-step guide to use Quickstart installation:

         

 

     

 

                                  

 

Then you’ll be redirected to ANGIE installer screen:


 

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

- Step 1: Unzip the downloaded package: unzip1st_noo_noro. 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_noro-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 Noro template for it to display in frontend.  


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

 

NORO template uses 1 extension: Noo Gallery (to learn about this extension, go to our Wiki site). We’ll have 3 modules created with Noo Gallery. In our demo, you can click on Gallery menu item to see these modules.

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

  1. Module 2 Columns (position: mast-col1)

Frontend

 

 

Backend

To have this module 2 Columns, go to backend: Extensions -->Module Manager --> New-->Select type as Noo Gallery and set title: 2 Columns for module.

       

 

Basic Options

 

You can enter information for each image (title, link, description):


              

Advanced Options: Module uses class suffix: gallery-2-columns

                                 

Menu Assignment: Only on the pages selected


 

               2. Module 3 Columns (position: mast-col1)

Frontend


Backend

To create this Module 3 Columns go to backend: Extensions --> Module Manager -->New --> Select type as Noo Gallery. Set title: 3 Columns


       

Basic Options


Advanced Options: Module uses class suffix: gallery-3-columns


                            

Menu Assignment: Only on the pages selected


                                  

  1. Module 4 Columns (position: mast-col1)

Frontend

 

Backend

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

                 

 

Basic Options

  

 

Advanced Options: Module uses class suffix: gallery-4-columns


                       

Menu Assignment: Only on the pages selected


               

 

A. K2 Configuration

  1. Install K2 Component

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:

Go to your site’s backend : Extensions--> Extension Manager and Upload file K2 you’ve downloaded:

 

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

 

 

Go to Components -- K2:

                                  

 

          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

                                

 

Content

Images

K2 Images

 

K2 Social

 

K2 Comments

 

 

K2 Frontend Editing

 

 

K2 Advanced

                                   

    2. K2 Category

All categories in K2 use default template.

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

  

 

K2 Category List Page at frondend:


Backend Setting


K2 item detail pages

 

 

     K2 Blog pages



 

B. K2 Module Configuration 

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

  1. Module Featured Items

Position: mast-col1
Page: Home

Frontend


Backend

To create this module, go to backend: Extensions -->Module Manager -->New -->Select type as K2 Content and set title: K2 Featured Items

     


Basic Options

 

                                          

Menu Assignment: Only on the pages selected


                     

  1. Module Project

Position: mast-col1
Page: Projects

 

Frontend

 

 

Backend

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

     

 

Basic Options


                   

Menu Assignment: Only on the pages selected


         

 

  1. Module Categories

Position: sidebar-1
Page: sidebar-content, content-sidebar

Frontend 

                           

Backend

  • To create this module, go to backend: Extensions -->Module Manager -->New -->Select type as K2 tools and set title: Categories

       

 

Basic Options


                                  

Menu Assignment: Only on the pages selected


                       

  1. Module Archived

Position: sidebar-1 
Module type: K2 Tools

Frontend 

                            

Backend

To create this module, go to backend: Extensions -->Module Manager --> New --> Select type as K2 tools and set title:  Archived

         

 

Basic Options

                        

Menu Assignment: Only on the pages selected

                

 

               5. Module Recent Post

          Position: sidebar-1
          Module type: K2 Content

 

Frontend

                                

 

Backend

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

 

 

Basic Options:

  

 

Menu Assignment: Only the on the pages selected

                      

         6. Module Calendar

            Position: sidebar-1

Frontend

                           

Backend

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

 

 

Basic Options

                       

Menu Assignment: Only on the pages selected


                       

          6. Module Tags

          Position sidebar-1

           Page sidebar-content, content-sidebar

Frontend

                                 

 

Backend

To create this module, go to backend: Extensions -->Module Manager -->New--> Select type as K2 tools and set title: Tags

 

Menu Assignment: Only on the pages selected

                   

 

           8. Module Comment

           Position: sidebar-1

Frontend

                             

Backend

To create this module, go to backend: Extensions -->Module Manager -->New -->Select type as K2 Comments and set title: Comments

 

 

Basic Options:

Menu Assignment: Only on the pages selected

                         

 

 

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

  1. Module Phone Contact(position footer)

Frontend

                 

 

Backend

To create this module, go to backend: Extensions -->Module Manager --> New -->Select type as Custom HTML and set title: Phone Contact

         

Options

Advanced Options: this module uses class suffix: phone_contact

                  

 

Menu Assignment: On all pages


                         
 

  1. Module About T3 framework

 

Frontend

Backend

To display this module, you need to go to Extensions --> Module Manager --> New --> Select Custom HTML to create a custom HTML module with these settings:

 

Custom Output



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

 

HTML code

<p><img src="images/t3-logo.png" alt="T3 Logo" style="margin-bottom: 15px;" /> Our <strong>T3 framework</strong> is the most popular template framework for Joomla. It powers all our T3 based templates and is available for Joomla 1.5, 2.5 and 3.0. For the ease of upgrades the framework is in the plugin format and is installed separately.<a class="custom-link" href="#" title="More info">More info</a></p>
<h4>Source:</h4>
<p><a class="custom-link" href="http://demo.t3-framework.org/joomla30/" target="_blank" title="Demo">Demo T3</a> - <a class="custom-link" href="http://t3-framework.org/documentation.html" target="_blank" title="Documentation">Documentation</a> - <a class="custom-link" href="https://github.com/t3framework/t3/tags" target="_blank" title="Download">Download</a></p>

 

Module Assignment: On all pages

                             

 

  1. Module What is new

Frontend

 

 

Backend

To display this module, you need to go to Extensions --> Module Manager -->New -->Select Custom HTML to create a custom HTML module with these settings:


Custom Output

 

 

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

<p><img src="images/mega-menu.png" alt="" style="margin-bottom:     15px;" /> Lorem ipsum dolor sit amet consectetuer elit nibh consequat velit nibh. Nec urna Sed sem pede eros nisl sed mollis consectetuer nisl. Nec Phasellus Aenean wisi Nunc Nunc Aliquam tempus Vestibulum orci Sed.</p>

Module Assignment: On all pages

                        

 

  1. Module Social Media(positiion social)

Frontend

                  

Backend

To create this module, go to backend: Extensions -->Module Manager -->New --> Select type as Custom HTML and set title: Social Media

    

 

Advanced Options: this module uses class suffix: social_media

                      

 

Custom Output

 

 

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

<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


                         

 

5.  Module Footer(position footer)

Frontend

                           

Backend

To have this module footer, go to backend  : Extensions--> Module manager-->Select type as Footer and set title:  Footer for  module

         

 

Menu assignment : On all pages

                             

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 Noro



III. Layout


Supported layouts in Noro

 

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.

                                            

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


 

Video tutorial:

You can watch this below tutorial for MegaMenu configuration 

To change logo of template, please follow these steps:

Step1: Go to Administrator : Extensions -->Template Manager --> Select template style you’re using:

 

                




Step 2:Go to Theme-->Logo Image to change logo

 

                  

 

Step 3: After clicking on “Select”, image folders will display. Select your logo and insert:  

 

 

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


After uploading and selecting logo image, visit frontend to view the change.

 

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.