NooDesigner Template Documentation


1. About Joomla version used in NooDesigner

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 NooDesigner 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 Noo Designer Template User Guide

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

  2. Download&Install

  3. Module Homepage Configuration

  4. About us page configuration

  5. Portfolio page configuration

  6. Template Customization

  7. Megamenu Configuration

  8. Recommendation

4. Features

  1. Ultra Responsive Layout

  2. Mega Menu Ready

  3. 4 Colors Style

  4. 4+ Premium Joomla Extensions

  5. Joomla T3V3 Framework

  6. HTML5, CSS3, Cross Browsers supported

  7. Bootstrap integration

  8. Many more…

 

5. NooTheme Extensions Supported

Here are the extensions used in NooDesignertemplate:

Module

Component

Plugin

6. 3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 4 different layouts used in NooDesigner 4 template:

Module positions

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

 

 


-  1: login, load module Noo Login

- 3: slideshow, load module Responsive Revolution Slider(Unite Revolution Slider)

-  4: navheader, load module Welcome(Custom HTML)

-  5: position-1, load module Graphic Design(Custom HTML)

-  6: position-2, load module Webdesign(Custom HTML)

- 7: position-3, load module Logo Design(Custom HTML)

-  8: position-4, load module Custom Design(Custom HTML)

-  9: position-5, load module Latest work(Noo Portfolio)

-  10: mast-col1, load module Featured(Custom HTML)

-  11: side-bar1, load module And More(Custom HTML)

-  12: navfooter, load module Our Clients(Custom HTML)

-  13: footer-1, load module Footer About(Custom HTML)

- 14: footer-2, load module Newletter(Acymailing Module)

- 15: footer-3, load module Twittes(Skyline Twitter)

-  16: footer -4, load module Gallery(Noo Gallery)

-  17: footer, load module Footer

- 18: social, load module Social Media(Custom HTML)

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

 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:

2. Download & Install

Download Template

   To download NooDesigner  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_designer. 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 NooDesigner, please follow these following steps:

- Step 1: Unzip the downloaded package: unzip1st_noo_designer. 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_designer-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 NooDesigner 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 NooDesigner, 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 Component&Plugin

 

To install Component  for NooDesigner please follow these steps:  

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

     

                      

- Step 2: Choose Component file. There are 2 file:



                            


 

1. Module Login

Module type: Noo Login
Position: login

Frontend

 

Backend

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

 

            :

Menu Assignment: On all pages

                               

2 Position: Slideshow

At position: slideshow, we created 5 modules with different slideshow displays. Depend on your utility purpose, please choose one you find it best suit for your need. The slideshow modules are:

2.1 Module Responsive Revolution Slider

Module type: Unite Revolution Slider
Position: slideshow

Frontend

 

Backend

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

 

General Settings

                                 

Menu Assignment: Only on the pages selected

 

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

 

2.2 Module Full-Width Revolution Slider

Module type: Unite Revolution Slider
Position: slideshow

Frontend

 

Backend

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

 

General Settings


                                

Menu Assignment: Only on the pages selected


                         

2.3 Module JSE Slideshow

Module type: JSE Slideshow
Position: slideshow

Frontend


Backend

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

 

Basic Options


Details for slide’s image 1, 2, 3, 4, 5 above are:

Image 1

Image 2:

 

Image 3:

 

Image 4:

Image 5:

 

Menu Assignment: Only on the pages selected

 

                          

2.4 Module NooSlideshow

Module type: Noo Slideshow
Position: slideshow

Frontend

Backend:

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

 

Basic Options

 

Details for slide’s image 1, 2, 3, 4, 5 above are:

Image 1

          :

Image 2

 

           :

Image 3

         :

Image 4

          :

Menu Assignment: Only on the pages selected

 

          

 

2.4 Module Noo 3D Slideshow

Module type: Noo Slideshow
Position: slideshow

Frontend

 

Backend

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

 

Basic Options

 

Menu Assignment: Only on the pages selected

 

3. Module Welcome

Module type: Custom HTML
Position: navheader

Frontend

 

Backend

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

 

Custom Output

 

 

Enable Toggle Editor and enter this Custom HTML

<div class="mod-welcome">
<h1>Welcome</h1>
<div class="welcome-desc">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</div>
</div>

Menu Assignment: Only on the pages selected

 

 

4. Module Graphic Designer

Module type: Custom HTML
Position: position-1

Frontend

                                                  

Backend

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

 

Custom Output

 

Enable Toggle Editor and enter this Custom HTML

<div class="our-services"><span class="circle icon-dashboard"><span class="circle-border"> </span></span>
<h3>Graphic Design</h3>
<p>Cleatskins are a revolutionary foot wear accessory designed to allow athletes, designed to allow.</p>
</div>

 


Menu Assignment: Only on the pages selected

 

 

5. Module Web Design

Module type: Custom HTML
Position: position-2

Frontend

                                                 

Backend

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

 

Custom Output

Enable Toggle Editor and  enter this  Custom HTML:

<div class="our-services"><span class="circle icon-laptop"><span class="circle-border"> </span></span>
<h3>Web Design</h3>
<p>Cleatskins are a revolutionary foot wear accessory designed to allow athletes, designed to allow.</p>
</div>

 


Menu Assignment: Only on the pages selected

 

                  

 

6. Module Logo Designer

Module type: Custom HTML
Position: position-3

Frontend

                                          

Backend

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

 

Custom Output

 

Enable Toggle Editor and enter this Custom HTML

<div class="our-services"><span class="circle icon-magic"><span class="circle-border"> </span></span>
<h3>Logo Design</h3>
<p>Cleatskins are a revolutionary foot wear accessory designed to allow athletes, designed to allow.</p>
</div>

 


Menu Assignment: Only on the pages selected

 

                   

 

7. Module Custom Design

Module type: Custom HTML

Position: position-4

Frontend

                                                             

Backend

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

 

Custom Output

 

               

Enable Toggle Editor and enter this Custom HTML

<div class="our-services"><span class="circle icon-gear"><span class="circle-border"> </span></span>
<h3>Custom Design</h3>
<p>Cleatskins are a revolutionary foot wear accessory designed to allow athletes, designed to allow.</p>
</div>

 


Menu Assignment: Only on the pages selected

         

 

8. Module Latest work

Module type: Noo Portfolio
Position: position-5

Frontend

 

Backend

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

 

      

Basic Options

Advanced Options

 

                      

Module use Class-suffix: ||Check our all latest work in this section. This is the subtitle of module.

Menu Assignment: Only on the pages selected

 

                      

 

9. Module Featured

Module type:  Custom HTML
Position: mast-col1

Frontend

 

Backend

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

 

Advanced Options: module use class suffix: features to configure icons for module 

                           

 

Custom Output

 

                   

Enable Toggle Editor and enter this Custom HTML:

<div class="row">
<div class="span4">
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-group"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">24/7 Customer Support</h4>
<p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-html5"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">HTML5 / CSS3 / JS</h4>
<p class="tall">Lorem ipsum dolor sit amet, adip.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-flag"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">300+ Awesome Font Icons</h4>
<p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-star-half-empty"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">4 Preset Colors Style</h4>
<p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
</div>
</div>
</div>
<div class="span4">
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-desktop"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">100% Responsive Style</h4>
<p class="tall">Lorem sit amet, consectetur adip.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-spinner"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">3 Slideshow Built-in</h4>
<p class="tall">Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-reorder"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">Mega Menu Built-in</h4>
<p class="tall">Lorem ipsum dolor sit, consectetur adip.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-box-icon"><span class="icon-smile"> </span></div>
<div class="feature-box-info">
<h4 class="shorter">Based on T3 Framework</h4>
<p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
</div>
</div>
</div>
</div>

 



Menu Assignment: Only on the pages selected

 

   

 

10. Module And More

Module type: Custom HTML
Position: side-bar1

 

Frontend

                                     

Backend

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

 

Advanced Options

Module uses class-suffix: nopadding no-bg

 

                              

Custom Output

 

Enable Toggle Editor and enter this Custom HTML

<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-pencil"> </span> Collapsible Group Item #1 </a></div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
<div class="accordion-inner">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-camera"> </span> Collapsible Group Item #2 </a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-bell"> </span> Collapsible Group Item #3 </a></div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</div>
</div>
</div>
</div>

 


Menu Assignment: Only on the pages selected

 

                 


 

11. Module Our Clients

Module type: Custom HTML
Position: navfooter

Frontend

 

Backend

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

 

Advanced Options

 

                    

Module uses class-suffix: our-clients top-arrow||Check our all our clients in this section

The module’s class-suffix above has 2 parts:

Custom Output

 

Enable Toggle Editor and enter this Custom HTML

<div id="myCarousel" class="carousel slide"><!-- Carousel nav -->
<div class="noo-cs-control"><a class="icon-chevron-left" href="#myCarousel" data-slide="prev"></a> <a class="icon-chevron-right" href="#myCarousel" data-slide="next"></a></div>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-1.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-2.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-3.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-4.png" alt="" /></a></div>
</div>
<div class="item">
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-1.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-2.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-3.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-4.png" alt="" /></a></div>
</div>
<div class="item">
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-1.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-2.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-3.png" alt="" /></a></div>
<div class="event"><a href="#"><img src="images/nootheme/demo/logo-4.png" alt="" /></a></div>
</div>
</div>
</div>

 

Menu Assignment: On all pages


                                    

12. Module Footer About

Module type: Custom HTML
Position: footer-1

Frontend

                                                         

Backend

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


Custom Output

 

Enable Toggle Editor and enter this Custom HTML

<div class="mod-designer">
<div class="designer-image"><img src="templates/noo_designer/images/footer-logo.png" alt="" /></div>
<div class="designer-desc">Cleatskins are a revolutionary footwear accessory designed to allow athletes to move swiftly to and from their sport without damaging their cleated shoes or risking injury.</div>
</div>


Menu Assignment: On all pages


                                                 

13. Module Newsletter

Module type: AcyMailing
Position: footer-2

Frontend

                                              

Backend

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


Basic Options

 

Menu Assignment: On all pages


                                     

14. Module Twittes

Module type: Skyline Twitter
Position:  footer-3

Frontend

                                                   

Backend

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

 

Basic Options

 

                                  

Menu Assignment: On all pages


                                                 

15. Module Gallery

Module type: Noo Gallery
Position: footer-4

Frontend

                                                               

Backend

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

 

 

Basic Options

 

Menu Assignment: On all pages


                                                 

Note: To learn more on how to configure this module, please go to our WIKI

16. Module Copyright

Module type: Footer
Position: footer

Frontend

                                       :

Backend

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

 

Menu Assignment: On all pages

                                    

17. Module Social Media

Module type: Custom HTML
Position: social

 

Frontend

                                                                  

Backend

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

 

Advanced Options

 

                              

Module use class-suffix: social-media

Custom Output

 

                 

Enable Toggle Editor and enter this Custom HTML

<div class="social-media">
<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-flickr" href="#"><span class="social-title">Flickr</span></a></li>
</ul>
</div>

Menu Assignment: On all pages


                                             

 

VIDEO TUTORIAL: This is video tutorial how to configure Homepage

1. Module Our Vision

Module type: Custom HTML
Position: mast-col1

 

Frontend

 

 

Backend:

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

 

 

Custom Output

 

 

Enable Toggle  Editor and enter this Custom HTML

<div class="row">
<div class="span6">
<div class="carousel-box">
<div id="myCarousel" class="carousel slide"><ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li class="active" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item"><img src="images/nootheme/demo/item1.jpg" alt="" /><br />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item"><img src="images/nootheme/demo/item2.jpg" alt="" /><br />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras usto odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active"><img src="images/nootheme/demo/item3.jpg" alt="" /><br />
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>
</div>
<div class="skill-box">
<h4 class="inside-title">Our Skills</h4>
<hr class="underline" />
<div class="progress progress-info">
<div class="bar" style="width: 75%;"><span class="pull-left skill-left">Design</span> <span class="pull-right skill-right">75%</span></div>
</div>
<div class="progress progress-success">
<div class="bar" style="width: 29%;"><span class="pull-left skill-left">Photography</span> <span class="pull-right skill-right">29%</span></div>
</div>
<div class="progress progress-warning">
<div class="bar" style="width: 45%;"><span class="pull-left skill-left">3D</span> <span class="pull-right skill-right">45%</span></div>
</div>
<div class="progress progress-danger">
<div class="bar" style="width: 100%;"><span class="pull-left skill-left">HTML5</span> <span class="pull-right skill-right">100%</span></div>
</div>
<div class="progress progress-warning progress-striped active">
<div class="bar" style="width: 55%;"><span class="pull-left skill-left">CSS3</span> <span class="pull-right skill-right">55%</span></div>
</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 63%;"><span class="pull-left skill-left">PHP</span> <span class="pull-right skill-right">63%</span></div>
</div>
</div>
</div>
<div class="span6">
<div class="about-text">
<h4 class="inside-title">Our Vision</h4>
<hr class="underline" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat veniam aut perferendis eos quidem ratione consequuntur quod dolorum magnam inventore delectus dolor possimus quia cum porro maxime nam tenetur at quam aperiam hic ipsum voluptate ut maiores sit! <span class="text-success">Non animi doloribus rem quos</span> vero deleniti veniam rerum architecto hic earum. Quidem debitis quia ducimus temporibus mollitia culpa cupiditate odit et repellat fugit! Doloribus officia in aperiam!</p>
<p class="text-error">Totam rem delectus voluptatum quaerat libero veritatis soluta tempore illo inventore deleniti vel asperiores id voluptates nisi possimus iste voluptatibus placeat provident non quod voluptas officiis excepturi illum</p>
<p>aliquid nesciunt quos blanditiis quasi sed tenetur perspiciatis et praesentium aut numquam accusantium rerum <span class="color-text">perferendis ut nulla sunt deserunt</span> necessitatibus! Quod deserunt repellendus officia ab quae illo nesciunt veniam tenetur voluptatum quidem quia sint!</p>
</div>
<div class="about-tabs margint80">
<h4 class="inside-title">Our Vision</h4>
<hr class="underline" />
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-pencil"> </span>Lorem Tab 1</a></div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-camera"> </span>Lorem Tab 2</a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-bell"> </span>Lorem Tab 3</a></div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
</div>
</div>
</div>
</div>

 

Detail code HTML:

In Custom Output module divide 3 part

Part 1: HTML configure

Part 2: HTML code

<div id="skill-box" class="animated-area margint20">
<h4 class="inside-title">Our Skills</h4>
<hr class="underline" />
<div class="progress progress-info">
<div class="bar" style="width: 75%;"><span class="pull-left skill-left">Design</span> <span class="pull-right skill-right">75%</span></div>
</div>
<div class="progress progress-success">
<div class="bar" style="width: 29%;"><span class="pull-left skill-left">Photography</span> <span class="pull-right skill-right">29%</span></div>
</div>
<div class="progress progress-warning">
<div class="bar" style="width: 45%;"><span class="pull-left skill-left">3D</span> <span class="pull-right skill-right">45%</span></div>
</div>
<div class="progress progress-danger">
<div class="bar" style="width: 100%;"><span class="pull-left skill-left">HTML5</span> <span class="pull-right skill-right">100%</span></div>
</div>
<div class="progress progress-warning progress-striped active">
<div class="bar" style="width: 55%;"><span class="pull-left skill-left">CSS3</span> <span class="pull-right skill-right">55%</span></div>
</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 63%;"><span class="pull-left skill-left">PHP</span> <span class="pull-right skill-right">63%</span></div>
</div>
</div>

 

 

Part 3: HTML code

<div class="about-tabs margint80">
<h4 class="inside-title">Our Vision</h4>
<hr class="underline" />
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-pencil"> </span>Lorem Tab 1</a></div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-camera"> </span>Lorem Tab 2</a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-parent="#accordion2" data-toggle="collapse"><span class="icon icon-bell"> </span>Lorem Tab 3</a></div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tempora commodi impedit et minima ex quisquam odio autem aliquam fuga doloribus cumque quia necessitatibus consequuntur molestiae possimus neque culpa temporibus excepturi porro omnis sunt error molestias est ab vitae nostrum maiores tempore officia placeat aspernatur eaque quaerat aliquid reiciendis illum ipsam unde quod accusantium asperiores dolores eveniet!</div>
</div>
</div>
</div>
</div>
</div>


2. Module Our Team

Module type: Custom HTML
Position: mast-col2

 

Frontend

 

 

Backend

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

 

 

Custom Output

 

 

Enable Toggle Editor and enter this HTML code:


<div class="row">
<div class="span3">
<div class="profile-box">
<h3>Jane Doe</h3>
<p>CEO</p>
<img class="profile-desc" src="images/nootheme/demo/hr1.jpg" alt="" />
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad labore sint ducimus ipsa adipisci consectetur dolorem debitis porro id reprehenderit?</p>
</div>
</div>
<div class="span3">
<div class="profile-box">
<h3>Jake Doe</h3>
<p>CEO</p>
<img class="profile-desc" src="images/nootheme/demo/hr2.jpg" alt="" />
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad labore sint ducimus ipsa adipisci consectetur dolorem debitis porro id reprehenderit?</p>
</div>
</div>
<div class="span3">
<div class="profile-box">
<h3>John Doe</h3>
<p>CEO</p>
<img class="profile-desc" src="images/nootheme/demo/hr3.jpg" alt="" />
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad labore sint ducimus ipsa adipisci consectetur dolorem debitis porro id reprehenderit?</p>
</div>
</div>
<div class="span3">
<div class="profile-box">
<h3>Linda Doe</h3>
<p>CEO</p>
<img class="profile-desc" src="images/nootheme/demo/hr4.jpg" alt="" />
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad labore sint ducimus ipsa adipisci consectetur dolorem debitis porro id reprehenderit?</p>
</div>
</div>
</div>

 

Menu assignment: Only on the pages selected

 

                        

3. Module Resume

Module type: Noo Timeline
Position: mast-col3

 

Frontend

 

 

Backend

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

 

 

     

 

Basic Options

 

 

Menu assignment: Only on the pages selected

 

                   

 

To learn more how to configure this module, please go to our WIKI

 

II. Guide how to configure abour Joomla Page

1. Module Login

Module type: Login
Position: sidebar-1

 

Frontend

                                      

Backend

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

 

 

 

Menu assignment: Only on the pages selected

 

2. Module Tags

Module type: Popular Tags
Position: sidebar-1

 

Frontend

                                  

Backend

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

 

 

       

 

Basic Options

                               

Menu assignment: Only on the pages selected

 

3. Module Subscribe Newsletter

Module type: AcyMailling
Position: sidebar-1

 

Frontend

                                     

Backend

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

 

Menu assignment: Only on the pages selected

 

 

4. Module Latest News

Module type:  Articles Category
Position: sidebar-1

 

Frontend

                                 

Backend

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

 

 

 

Basic Options

                            

Display Options

                             

 

Menu assignment: Only on the pages selected

 

 

 

5. Module Social Module

Module type:  Custom HTML
Position: sidebar-1

 

Frontend

                                       

Backend

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

 

 

Custom Output

                     

 

Enable Toggle Editor and enter this HTML code:

<ul class="social-networks widget">
<li><a class="twitter" href="#">twitter</a> <span>2024</span></li>
<li><a class="facebook" href="#">facebook</a> <span>10K</span></li>
<li><a class="dribbble" href="#">dribbble</a> <span>124</span></li>
</ul>

Menu assignment: Only on the pages selected

 

6. Module Sample Menu

Module type: Custom HTML
Position: sidebar-1

 

Frontend

                                        

Backend

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

 

 

Advance Options: module uses class-suffix: nopadding

 

                      

 

Custom Output

                

 

Enable Toggle Editor and enter this Custom HTML

<ul class="list-menu-icon">
<li><a class="description" href="#"><span class="icon icon-book"> </span>Latest articles</a></li>
<li><a class="description" href="#"><span class="icon icon-comments-alt"> </span>Popular Comments</a></li>
<li><a class="description" href="#"><span class="icon icon-html5"> </span>HTML 5 </a></li>
<li><a class="description" href="#"><span class="icon icon-android"> </span>Android Apps</a></li>
<li><a class="description" href="#"><span class="icon  icon-dashboard"> </span>Website Usage</a></li>
<li><a class="description" href="#"><span class="icon icon-envelope"> </span>Email address</a></li>
</ul>


 

Menu assignment:  Only on the pages selected

 

VIDEO TUTORIAL: This is video tutorial how to configure About Us page

Guide to  How to configure Portfolio page

1. Module Portfolio - Door Style

Module type: Noo Portfolio
Position: mast-col1

Frontend

 

Backend

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

 

Basic Options

                   

Advanced Options: module uses class-suffix: ||Check our all latest work in this section.

 

                              

Menu Assignment: Only on the pages selected

 

                      

2. Module Portfolio - Vario Style

Module type: Noo Portfolio
Position: mast-col1

Frontend

 

Backend

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

 

         

Basic Options

                            

Advanced Options

Module uses class-suffix: ||Check our all latest work in this section.

                              

Menu Assignment: Only on the pages selected

                                 

3. Module Portfolio - Flex Style

Module type: Noo Portfolio
Position: mast-col1

Frontend

 

Backend

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

 

Basic Options

                        

Advanced Options

Module uses class-suffix: ||Check our all latest work in this section.

                             

Menu Assignment: Only on the pages 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

Here are styles supported in NooDesigner


III. Layout


Supported layouts in NooDesigner


 

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

                                         .

 

Noo Designer  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_Designer 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


To change logo of template, please follow these steps:

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

 

                                


Step 2: Go to Theme-->Logo Image to select logo image:

 

  

 

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.