Nozix Template Documentation


Welcome to our Profile. Grab your drink and let’s get to know each other a little! We are NooTheme (“noo” is pronounced as /nu:/ if you don’t know how). We’ve been working and creating and playing with Joomla for several years. Our team has highly skilled & experienced geeks who share passion and desire for Joomla, of bringing better work to Joomla Community. Sometimes we honestly think we’re just children playing around with work & everything to us boils down to curiosity. Work smart. Play hard. Be curious. Try new things. These are the values we respect in anything we do. We’re interested in what’s good. You ain’t different, are you? We designers and developers should always keep the users in mind when we work. Ralph Marston once said “Excellence is not a skill, it is an attitude”.

1.  About Joomla version used in Nozix

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 Nozix

Nozix is a high quality Joomla! template built in T3V3 Framework – the popular Template framework for for Joomla 3.0 using Bootstrap. Nozix is totally responsive, which means your website will have no trouble in loading on any screen size.
 
Nozix comes with high technical quality and esthetic design. It has +4 powerful Joomla! extensions rolled in to give you a smoothly functioned and extremely easy-to-customize website. Plus, you are supported with the Clean-Clear-Simple layout with 4 color styles.
 

The template is born for music business: bands, musicians, DJs, music blogger, music event, shows… Nozix is all you need to create a stunning & perfect music site 

3. About Nozix Template User Guide

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

Main aspects covered in the user guide:

3.1 Template Instruction

3.2 Download & Installation

3.3 Module Configuration

3.4 Template Customization

3.5 Megamenu Configuration

3.6 Logo Customization

3.7 Recommendation

  4. Features

 5. NooTheme Extensions Supported

Here are the extensions used in Nozix template:

Module

Plugins

6. 3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 4 different layouts used in Nozix template:

Module positions

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

 

Position tags load module Video/Photo

8. T3 Framework

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

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 NOZIX - A Joomla Template for music industry released by NOOTheme as an example.

2. Download & Install 

Download Template

To download Nozix template, please go to our website and Log in, then click on Download on main menu:


After downloading, you’ll have a .zip file name: unzip1st_noo_nozix. 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 Nozix, please follow these following steps:

- Step 1: Unzip the downloaded package: unzip1st_noo_nozix. Here are the files you will have:

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

                         

- Step 3: Click on “Choose File” then select pkg_noo_nozix-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 4: After successfully uploading and installing template file, go to Extensions--> Template Manager.

 

                          

- Select Default for Nozix template for it to display in frontend:


 

Install Modules

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

(XXX is the version of the file)

 

                      

 

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

After installing modules, we will go and install plugins. To install Plugins for Nozix please follow these steps:  

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

                 

                     

- Step 2: Choose Plugin file plg_system_nootabs 1.0.0.zip in Plugin folder to upload.

 

             

 

- Step 3: After successfully uploading and installing plugin file, go to Extensions-->Plugin Manager to enable plugin you’ve uploaded

 

 

 

1. Module Login (position: login)

Module Login uses potion login to display in frontend. To learn more about module Login,please see HERE

Below is how Module Login appears on frontend and its full backend setting:

Frontend


                                         

Backend


                             
 

Basic Options

                                    


 

Menu Assignment



                                 

2. Module Slideshow (position: slideshow)

- Module Noo Slider2 uses potion login to display in frontend. To learn more about module Noo Slider2 , please see HERE

Below is how module Noo Slider2 appears on frontend and its full backend setting:

Frontend


Backend

           

Basic options

                         

Display options

                                     

Menu Assignment

                              

3. Module Search (position: search)

Frontend

                                                

 

Backend

To set up a Search module in frontend like above, go to admin section: Extensions--> Module Manager --> New --> Select search to create new module for Search. Then please take the settings below as an example (this is a default Joomla search module):  

                       

Basic Options

                                    

Menu Assignment

 

                                     

 

4. Module Most Viewed (position-1)

Frontend

                                                  

Backend

At  position-1 we display module Most Viewed. To have this module, you need to go to Extensions --> Module Manager -->New --> Select K2-Content and set its title as “Most Viewed”. Look below for full setting for this module:

                 

 

Module Most Viewed uses class-suffix: bagde-hot. To configure this, click on Options:

                             

Menu Assignment

                                        

5. Module Newest (position - 2)

Frontend

                                                     

Backend

To display module Newest at position-2, you need to go to Extensions -->Module Manager -->New--> Select K2-Content and set its title as “Newest”. Look below for full setting for this module:

                     

                                          

6. Module Popular (position-3)

Frontend

                                                    

Backend

To display module POPULAR at position-3, you need to go to Extensions --> Module Manager -->New -->Select K2-Content and set its title as “POPULAR”. Look below for full setting for this module:

                   

This module uses class-suffix: bg-gray. Here is the setting in Options:

                            

Menu Assignment

                                     

7. Module Breaking News (position-4)

Frontend

                                       

Backend

To display module Breaking News at position-4, you need to go to Extensions -->Module Manager -->New -->Select K2-Content and set its title as “Breaking News”. Look below for full setting for this module:

                       

This module uses 2 classes:

                             

Menu Assignment: Only on the pages selected

                                                           

 

8. Module Video/Photo (position-tags)

Frontend

 

Backend

To make this module display on position-tag, you need to install plugin Noo_Tabs. To learn more about Noo_Tabs please visit: http://wiki.nootheme.com/wiki/index.php?title=NOO_Tabs

At first, you need to go to Extensions --> Module Manager -->New -->Select Custom HTML and set its title as “Module Tags”.

Look below for full setting for this module:


             

This module uses class-suffix: tags_video_photo

                             

Custom Output

      

 

Module Assignment

Then, create 2 modules: Video and Photos by going to Extensions --> Module Manager -->New --> Select K2 Content.

Look below for full setting for this module:

                  

Module Assignment

                                  

9. Module Upcoming event (position navcontent)

Frontend


Backend

To create this module, you need to go to Extensions --> Module Manager --> New --> Select Custom HTML and set its title as UPCOMMING EVENT.

Look below for full setting for this module:

         

This module uses class-suffix : bg-gray top-arrow upcoming_events

                          

To set up this position as shown in the screenshot below, use <div> tag:

                                                    

Code :

<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">
<div class="badge-new"><span class="badge"> </span></div>
<div class="event-date">
<div class="event-day">20</div>
<div class="event-month">JAN</div>
</div>

10. Module Artists (position slidebar-1)

Frontend

                                              

Backend

To create this module, you need to go to Extensions--> Module Manager --> New --> Select K2-Content and set its title as ARTISTS.

Look below for full setting for this module:

            

This module use class-suffix: bg-black artists:

                          

Module Assignment:

   

11. Today event (position mast-col1)

Frontend

                      

Backend

To create this module, you need to go to Extensions -->Module Manage-->New--> Select K2-Content and set its title as TODAY EVENT.

Look below for full setting for this module:

              
                     

Module Assignment: Only on the selected pages:


                                              

12. Module Most Popular (position tags_sidebar2)

Frontend


                                            

Backend

To create this module, you need to go to Extensions --> Module Manager --> New -->Select Custom HTML and set its title as “Most Popular”.

Look below for full setting for this module:


         

This module uses class-suffix: popular_tags


                           

Custom Output



 

Module Assignment: Only on the selected pages


                                             

After creating module Most Popular, you need to go to Extensions -->Module Manager -->New--> Select K2-Content and set its title (Album/News) & position (sidebar2-tabs).

             

Menu  Assignment: Only on the selected pages     

                                      

 

13. Module News and Features (position 9)

Frontend


Backend

To create module News and Features at position 9, you need to setup module Noo Content Slider first.To learn more about information about Noo Content Slider, please see HERE


Basic Options


Display Options

                                       


 

This module uses class-suffix: news_features top-arrow



                                         
 

Menu  Assignment:


                                           

14. Module Footer (position: breadcrumbs)

Frontend


                                                       

Backend

To display footer “Home”, you need to go to Extensions --> Module Manager --> New -->Select Breadcrumbs and create a Module breadcrumbs with the following setting:


          
 

Basic Options


                                      


 

Menu  Assignment


                                                         

15. Module Social (position: social)

Frontend


                                                   

Backend

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

         

 

This module uses class-suffix : social_media


                                      
 

Custom Output

 

ul class="menu">
<li class="twitter"><a href="#">twitter</a></li>
<li class="facebook"><a href="#">facbook</a></li>
<li class="rssfeed"><a href="#">rssfeed</a></li>
<li class="flickr"><a href="#">flickr</a></li>
</ul>

Module Assignment


                         

16. Module Contact Us (position footer-1)

 

Frontend


                                         

Backend

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

           

 

Module Assignment


                              

17. Module Feedback/Help (position footer-2)

Frontend

                                                    

Backend

To display Feedback/Help at position footer-2 you need to go to Extensions -->Module Manager -->New-->Select Menu to create a menu module with these settings:


                  

Basic Options


                                 

Module Assignment


                                      

18. Module Newsletter (position footer-3)

Frontend

                                           

Backend

To display module NEWSLETTER at position footer-3, you need to go to Extensions -->Module Manager --> New-->Select mod_acymailing to create an Acymailing module with these settings:

 

 

This module uses class-suffix: newsletter_sigup


 
 

Module Assignment


                                      

19. Module Ads (position footer-4)

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:



 

This module uses class-suffix: blank


Custom Output (You need to insert an image here)

<p><a href="#"><img src="images/footer-image.jpg" alt="" /></a></p>

 

Menu Assignment



                          

 

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

                                         

 

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

Memu Assignment


                          

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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


III. Layout


Supported layouts in Nozix:

 

Layout Customization

1. Configure layout structure

2. Customize the layouts devices




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.

                                               

 

 

 

 

 

 

 
 

1. Install&Configure K2 component

1.1 K2 Instruction

K2 is a powerful & ideal extension that allows you to powerfully control your Joomla content. K2 provides an out-of-the-box integrated solutions featuring rich content forms for items.

To get K2 on your site:

Download K2 component from the website http://getk2.org/

If you are new to K2, go to K2 guide to install and configure the component in your Joomla site.

1.2 Install&Configure K2 pages

To install&configure K2 pages, please follow these steps:

- Step 1:  Go to your site’s backend: Extensions--> Module manager and upload K2 you’ve downloaded

 

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

-  Step 2: Global Configuration

You will find general settings for K2 in Global Configuration. Navigate to System-->Global Configuration:

Click on K2 in the left side, you will have K2 settings displayed. Please see the images below for K2 settings in Global Configuration

Layou&View

K2 Content

K2 Images

K2 Social

K2 Comment

K2 Frontend Editing

- Step 3: K2 Categories

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

2. Guide how to configure Blog page

Frontend of Blog page

To have blog page look like in our demo site, please following these steps

- Step 1: Go to backend: Components-->K2-->Categories-->Select category you want to display in Blog page and configure

You can change frontend by changing Leading count and Primary count in Category Item Layout

- Step 2: To configure display of items,please configure in Item view options in category listings tab. You can Show/Hide fields you want to display in frontend.

3. Guide how to configure Item page

Frontend of Item page

To have Items Blog page look like in our demo site, go to K2 Category you want to display items in frontend and configure Item view options tab, choose Show/Hide options to configure which items displayed.

Note: If you want to display a category like previous category, you can use Inherit parameter options from category. See example below:

Example:  : If you want News category displayed like U.S category, configure as following:

4. Guide how to create Lastest Items View

Frontend of Lastest Items View

To have this page, please following these steps

- Step 1: Go go backend: Menu --> Main menu--> Create new menu and set name

- Step 2: Configure options in Lastest Items View, you can see image below:

5. Guide how to create & configure user blog page

Frontend of User Blog page

To have this page, please following these steps:

- Step 1: Go to backend: Menu-->Main menu--> Create menu and set name User Page with settings below:

- Step 2: Configure User page options, you can see image below:

6. Guide how to configure Tag Blog page

Frontend of page

To have this page, please follow these steps:

- Step 1: Go to backend:  Menu--> Main Menu --> Create menu and set name Tag View with settings bellow:

- Step 2: Configure Tag Blog page options, you can see image

 

 

The image below shows the sample megamenu menu in Noozix demo. In fact you can do much more with what Megamenu supports.

Megamenu is a highlight feature of T3 Framework. The visual configuration (what you configure is what you see in front-page) of Megamenu helps you configure it at ease.

1. Enable Megamenu

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

2. Configure Megamenu

Megamenu configuration is a global setting so it's the same for all template styles. On the top of template style, hit the Megamenu button.

Select menu to display in frontend

You can select any menu to configure for Megamenu. But it's not the menu to be displayed in your front-page. The menu to be displayed in your front-page is the menu you assign in the Template style setting, under the Navigation tab.

3. Megamenu configuration level

There are 3 configuration level in Megamenu.: Menu item, column and sub-menu

3.1 Menu item

 

The menu item setting allows you to enable/disable its sub-menu, add extra class to style the menu item, add icon and caption for the menu item.

3.2 Sub- menu configuration

3.3 Column configuration
 

 

 

Here is frontend Logo image

1. Change the Logo image

There are 2 ways to change logo for Noozix template

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_zix/less/variables.less

2. Logo Styling

To customize style for logo, open file style.css that is located in the template/noo_nozix/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.

// Logo Image
// ----------
.logo-image {
  // Hide sitename and slogan
  span, small {
    display: none;
  }
  @media ( max-width: @screen-sm) { 
    text-align: center;
  }
}
// Logo Text
// ----------
.logo-text {
  a {
    text-decoration: none;
    font-size: ceil(@font-size-base * 2);
    font-weight: bold;
  }
  &:hover a,
  a:hover,
  a:active,
  a:focus {
    text-decoration: none;
  }
  // Taglines
  .site-slogan {
    display: block;
    font-size: @font-size-base;
    margin-top: 5px;
  }
}

 

The above user guide should help one in replicating the Demo site settings for the template and extension on their site. 

If you are new or are confused, we recommend installing Quickstart on your local host and use it as reference for configurations. This is the best way to work with any template.

You should carefully read all the provided resources to take the maximum advantage of our products. 

Support:

If you have any issue or question please raise your support queries in the forum, or our ticket system. We spend more time in getting the information from user in case the support guidelines are not followed.