NooNews Template Documentation


1. About Joomla version used in NooNews

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

3. About NooNews Template User Guide

The user guide provided is to help you to quickly learn about NooNews 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. Homepage module configuration

  4. Template Customization

  5. Logo Customization

  6. Megamenu Configuration

  7. Recommendation

4 .Features

5. Nootheme Extension Supported

Plugin

Third- party Extension supported

6.Layout &Module Position

Layout

NooNews supports 4 layout :

Module position

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

                  

7. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. NooDephinus 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.  

7. 1 T3 Framework Introduction

More about T3 framework, please visit HERE

7.2 T3 Installation

Please visit HERE

7.3 T3 Setting

Please visit HERE

7.4 Layout System

Please visit HERE

7.5Customization

Please visit HERE

 

1. Choose you site development plan

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

2. Download & Install

2.1 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_noonews. Unzip it so you can start upload:

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


            

2.3 Install  Template

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

- Step 1: Unzip the downloaded package: unzip1st_noo_noonews. 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_noonews-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 NooNews template for it to display in frontend.  


2.4 Install Module

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



2.5 Install Plugins  

To install Plugins for NooNews 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



 

1. Module Healine

Module type: Noo Ticker
Position: headline

 

Frontend

                                        

Backend

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

           

Basic Option

                                    

Display Options

                                   

Menu assignment : On all pages

                                   

2. Module Background header

Module type: Custom HTML
Position:  position-2

Frontend

                                                        

Backend

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

     

Custom Output

                                                                

Enable Toggle editor and enter this Custom HTML

<p><a href="#"><img src="images/nootheme/demo/background-header.png" alt="" /></a></p>

Menu assignment: On all pages

                                                       

3. Module Top Menu

Module type: Menu
Position:  position-1

Frontend

                          

Backend

To create this module, go to backend : Extensions--> Module manager--> Select module type Menu and set title Top Menu

            

 

Basic Options

                                            

 

Advance Options : this module uses class-suffix : nav-pills


                                          

Menu assignment :  On all pages

                                         

 

4. Module Today Weather

Module type: Noo Weather
Position: weather

Frontend

                                                       

Backend

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

        

Basic Option

                                  

Menu assignment : On all pages

                                   

5. Module Slider

Module type: Noo Slider
Position: slider

Frontend

Backend

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

            

Basic Option

                             

Display option

                              

Menu assignment : Only on the pages selected

6. Module Feature

Module type: K2-Content
Position:  position-6

Frontend

                                 

Backend

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

       

Basic Option

                               

Menu assignment : Only on the pages selected

                         

 

7. Module Last News

Module type: Noo K2 Items
Position: position-7

Frontend

                                                             

Backend

To create  this module Latest News, go to backend : Extensions--> Module manager--. New Select module type Noo K2 Items, and set title : Latest News

Basic Option

                              

Display Option

                                  

 Slide options

                                 

Menu assignment : Only on the pages selected

8. Module slide content

Module type:  Custom HTML
Position: position-8

Frontend

 

Backend

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

          

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="myCarousel" class="carousel slide">
<ul class="carousel-indicators pagination-slider">
<li class="active" data-target="#myCarousel" data-slide-to="0"><a href="#">1</a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">2</a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">3</a></li>
</ul>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div id="content-home1">
<ul id="slider">
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/baseball1.jpg" alt="" /></p>
<h4><a href="#">Tight security will be rule today in Boston</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/finance1.jpg" alt="" /></p>
<p class="title-box">Interactive Map</p>
<h4><a href="#">How the Boston Marathon bombings unfolded</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/securites1.jpg" alt="" /></p>
<p class="title-box">Videos</p>
<h4><a href="#">Scenes from the explosions</a></h4>
</div>
</li>
<li class="no-border">
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/movies1.jpg" alt="" /></p>
<p class="title-box">Map</p>
<h4><a href="#">Location of the explosions</a></h4>
</div>
</li>
</ul>
</div>
</div>
<div class="item">
<div id="content-home1">
<ul id="slider">
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/music1.jpg" alt="" /></p>
<h4><a href="#">Tight security will be rule today in Boston</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/television1.jpg" alt="" /></p>
<p class="title-box">Interactive Map</p>
<h4><a href="#">How the Boston Marathon bombings unfolded</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/basketball1.jpg" alt="" /></p>
<p class="title-box">Videos</p>
<h4><a href="#">Scenes from the explosions</a></h4>
</div>
</li>
<li class="no-border">
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/Football1.jpg" alt="" /></p>
<p class="title-box">Map</p>
<h4><a href="#">Location of the explosions</a></h4>
</div>
</li>
</ul>
</div>
</div>
<div class="item">
<div id="content-home1">
<ul id="slider">
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/north1.jpg" alt="" /></p>
<h4><a href="#">Tight security will be rule today in Boston</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/south1.jpg" alt="" /></p>
<p class="title-box">Interactive Map</p>
<h4><a href="#">How the Boston Marathon bombings unfolded</a></h4>
</div>
</li>
<li>
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/West1.jpg" alt="" /></p>
<p class="title-box">Videos</p>
<h4><a href="#">Scenes from the explosions</a></h4>
</div>
</li>
<li class="no-border">
<div class="main-content-home1">
<p class="img-content"><img src="images/nootheme/demo/securites3.jpg" alt="" /></p>
<p class="title-box">Map</p>
<h4><a href="#">Location of the explosions</a></h4>
</div>
</li>
</ul>
</div>
</div>
</div> 
<!-- Carousel nav --></div>

Menu assignment : Only on the pages selected

                                

9. Module World

Module type: Noo K2 Category Item
Module position: position-8

Frontend

Backend

To create this module World, go to backend : Extensions-->Module manager-->Select type as module Noo K2 Category Item, and set title : World for module

Basic Option

                             

Menu assignment : Only on the pages selected

10. Module Sport

Module type: Noo K2 Category Item
Position: position-8

Frontend

Backend

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

Basic Option

                         

Menu assignment : Only on the pages selected

12. Module Economic

Module type: Noo K2 Category Item
Position: position-8

Frontend

Backend

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


Basic Option

                             

Menu assignment: Only on the pages selected

12. Module Entertaiment

Module type:  Noo K2  Category Item
Position: position-8

Frontend

Backend

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

Basic Option

                              

Menu assignment : Only on the pages selected

14. Module Recent Photo

Module type: K2-Content
Position: position-8

Frontend

                                                                                                                                                               

Backend

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

                                                                                                                                                        

Basic Options

                                                         

Menu assignment : Only on the pages selected

                                                              

14. Module Recent Video

Module type: K2-Content
Position: position-8

Frontend

Backend

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

           

Basic Options

                                                                                                

Menu assignment : Only on the pages selected

                                     

15. Module Adv1

Module type:Custom HTML
Position: sidebar-2

Frontend

 

                                         

Backend

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

      

Custom Output


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

<p style="text-align: center; margin: 0px;"><a href="#"><img class="image-banner" src="images/nootheme/demo/adv1.jpg" alt="" width="100%" /></a></p>

Menu assignment: Only on the pages selected

16. Module Today’s Circulars

Module type:  Custom HTML
Position: sidebar-2

Frontend


                                      

Backend

To create this module Today’s Circulars, go to backend : Extensions-->Module manager--> New--> Select module type Custom HTML, set title Today’s Circular

          

Custom Output

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

<div class="sidebar2-mainbody">
<div class="story">
<p class="figure rel"><img src="images/nootheme/demo/epaper_thumb.jpg" alt="ePaper" /></p>
<h2 class="sidebar2-title"><a href="#">Read the NooNews Feed</a></h2>
<div class="sidebar2-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<ul class="related-stories">
<li><a href="#">Check out the NooNews RSS Feed</a></li>
<li><a href="#">Download the app now for iphone/iPad or Android</a></li>
</ul>
</div>

Menu assignment: Only on the pages selected

17. Module Video

Module type: K2- Content
Position: sidebar-2

Frontend

                                         

Backend

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


        

Basic Options

                                 

Menu assignment : Only on the pages selected

18.Module NooTabs


                                                 

In order to display 2 modules Most Read và Most Popular in the position sidebar-2 as in the image, please follow these steps:

18.1 Create 2 modules: MostRead and Most Popular in tabs position 

1. Create module Most Read

Module type: K2-Content
Position: tabs

 

Frontend

                                           

Backend

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

 

Menu assignment: On all pages

                        

2. Create module Most Popular

Module type: K2-Content
Position: tabs

Frontend

                              

Backend

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

Menu assignment: On all pages

                         

After you create 2 modules Most Popular and Most Read in tabs position, you install our NooTabs plugin (plugin located in the installation package you purchase. You can see in the demo NooTabs HERE). Install guide for plugin we provided in the Download & Install section in userguide.

18.2 Create module Noo Tabs

Module type: Custom HTML
Position: sidebar-2

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


 Note :You must enter this custom HTML: {nootabs type="modules" module="tabs"}{/nootabs} 

Menu assignment: Only on the pages selected

             

After you have completed the above actions, you will have the Most Read and Most Popular module shown in our demo.

19.Module Today Gallery

Module type: Noo Gallery
Position: sidebar-2

Frontend

                                       

Backend

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

       

Basic Options

Menu assignment : Only on the pages selected

20. Module Magazine

Module type:  Noo Slider2
Position: sidebar-2

Frontend

                                       

Backend

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

Basic Options

                          

Display options

                           

Menu assignment : Only on the pages selected

21. Module Opinion

Module type: Custom HTML
Position: sidebar-2

Frontend

                                       

Backend

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

       

Custom Output

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

<div id="Opinion">
<p class="img-opinion"><img src="images/nootheme/demo/author-4.jpg" alt="" width="51" height="54" /></p>
<p class="description-opinion">"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"</p>
<p class="other-opinion">Michel Lequim</p>
</div>
<ul id="readmor-opinion">
<li><a href="#">Groups creating autism brain bank</a></li>
<li><a href="#">New Probation chief named</a></li>
<li><a href="#">Federal agents raid Beacon Hill church</a></li>
<li><a href="#">Benedict XVI returns to Vatican for first time</a></li>
</ul>

Menu assignment : On all pages

                        

22. Module Disclaimer

Module type: Article-Newsflash
Position: sidebar-2

Frontend

                                   

Backend

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

Menu assignment: Only on the pages selected

23. Module Advertisment

Module type: Custom HTML
Position: sidebar-2

Frontend

                                    

Backend

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

        

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

Code :

<p align="center">
<script type="text/javascript">// <![CDATA[
google_ad_client = "ca-pub-1828095744981237";
/* Demo NooNews */
google_ad_slot = "6351438378";
google_ad_width = 327;
google_ad_height = 250;
// ]]></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>


Menu assignment : Only on the pages selected

                            

 

24. Module name Archived News

Module type: Noo Content Slider
Position: position-11

Frontend

Backend

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

Basic Options

                                        

Display Options

                                         

Menu assignment: On al pages

                                                

25. Module NooNews

Module type:  Menu
Position: bottom

Frontend


Backend

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

Menu assignment: On all pages


                                          

26. Module Get In Touch

Module type: Custom HTML
Position: footer-1

Frontend

                                                                 

Backend

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

Enable Toggle editor and enter this Custom HTML

<div class="custom last-child">
<p>Give us a call at<br /><strong class="extra">+1 801 111 3333<br /></strong></p>
<p>Email us at<br /> <strong class="extra">hello@noonews.com</strong></p>
</div>

Menu assignment: On all pages

                                      

27. Module Resource

Module type: Menu
Position: footer-2

Frontend

                                                                              

Backend

To create this module : Extensions--> Module manager--> New-->Select module type Menu and set title Resource

          

Basic Options

                                   

Menu assignment : On all pages


                                      

 

28. Module Follow Us

Module type: Menu
Position: footer-2

Frontend

                                                                  

Backend

To create this module : Extensions--> Module manager--> New--> Select module type Menu and set title Follow Us

                                  

Menu assignment: On all pages

                                     

 

30.Module Footer

Module type:  Footer
Position: footer

Frontend

Backend

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

Menu assignment: On all pages

                                    

31. Module Search

Module type: Search
Position:  search

Frontend

                                                                    

Backend

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

Menu assignment: On all pages


                   










 

1. Select Layout for style

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

2. Layout configuration

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

2.1 Layout structure configuration

Assign module position

Set number of columns in each spotlight block

2.2 Responsive Layout Configuration

Select responsive layout

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

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

3. Theme Configuration

The Theme settings allows you  to configure theme, logo. The settings can be also configured in the ThemeMagic setting panel

Theme Setting

Select a theme for current style. Each style goes with one theme.

4. How to change the theme color for NooNews template

If you want to change theme color, you go to backend: Extensions-->Template Manager--> Select template you’re using and  choose Theme options

After you choosed Theme color, click Save to save Theme color you choosed.And go to frontend, you can see the result

 

1. Change the Logo image

There are 2 ways to change logo for NooRestaurant template

#1: Change logo from the 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 the Logo  from the 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_news/less

Note: You can also changr the logo block size, by changing the value of the @T3logoWidth and @T3logoHeight variables.

2. Logo Stying

To customize style for logo, open file style.css that is located in the template/noo_noonews/less/style.css folder. Search for the logo text, you’ll find the style where you can either and more styles or customize it as is.

3. Enable/ Disable Logo Image

You can enabe or disable logo image, you can do the following: Open your site backend then go to: Extensions-->Template Manager--> Select template you’re using then choose Genaral

                        

1. Megamenu configuration

T3 supports Megamenu, that allows you to display your menu flexiblely. Arrange menu items in columns, adding any content to menu ...


Please note that, the navigation settings are not global settings, that means in each style, it can have difference navigation. In each style, you can display different menus as main menu

To enable Megamenu, please open Navigation tab. Enable Megamenu then open Megamenu  configuration panel

Configuration Level

There are 3 level of configuration that you should know


This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.

2. Column setting

 

In this level of configuration, you can: Add column, remove column, set width of column, assign module to column.

3. Menu Item

 

In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item.

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.