NooDelphinus Template Documentation


 

  1. About Joomla version used in NooDelphinus

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 few minute!

Thank you for choosing and using NooDelphinus Template! We highly 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. Please  don’t forget to leave us your comment on our product to help us bring you even better and more excellent Joomla templates & extensions.

  1. About NooDelphinus Template User Guide

The user guide will  help you to quickly learn about NooDelphinus 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 and Install

  3. HomePage module configuration

  4. AboutPage module configuration

  5. Template Customization

  6. Megamenu Configuration

  7. Logo Configuration

 

  1. Features

  2. Full homepage design files (PSD) include
  1. NooTheme Extensions Supported

Here are the extensions used in NooDelphinus  template:

Module:

Layout

Here are 3 different layouts used in NooDelphinus template:

Module positions

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

The below picture indicates modules’ display in Homepage:

 

  

 

Modules’ positions are:

 

  1. T3 Framework

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

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

8.1 T3 Framework Introduction

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

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

8.2 T3 Installation

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

8.3 T3 Setting

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

8.4 Layout System

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

8.5 Customization

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

1. Choose you site development plan

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

2. Download & Install

Download Template

     1. Visit our website

     2.Log in at (http://www.nootheme.com/login)

     3.  Go to Download section by clicking on Download item on our Main Menu.

After downloading, you’ll have a .zip file name: NOO_NooDelphinus_Source.zip Unzip it and you can start upload:


                         

Install Quickstart

For easier installation , we created a Quickstart file. By installing this file, you will have a template that 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:

 


Step 3: After done with extracting files, go to local host on your site and click on the name of folder you’ve created above. In this example, click on “Quickstart_Delphinus”:      

                                                                                 

 

In this video we'll learn how to use Quickstart to Install NooTheme Templates:

 

 

Install  Template

If you want  to install to live website , please follow these following steps:

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

 

                      

 

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


                              

- Step 4: Click on “Choose File” then select pkg_noo_delphinus-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 NooDelphinus template for it to display in frontend.  



 

Install Module

After installing the template and set it as default template, we will start  and install its modules. To install modules for template NooDelphinus, 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 2  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 NooDelphinus please follow these steps:  

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

 

                                     

- Step 2: Choose Component file: 



                          


 

Noo Delphinus  configuration  includes the follow sections:


Guide to How to configure module in Homepage

The below picture indicates modules’ display in Homepage: 

 

                                                          

 

Modules’ positions are:

Next, let's dive in each module’s detailed configuration in Homepage:

 

  1. Module Full-Width Revolution Slider
           Module type: Unite Revolution Slider
           Module position: slideshow

Frontend


Backend

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

Module:

 

General settings:

                

Menu assignment: Only on the pages selected

 

Note: To learn more  how to configure the slides in the slideshow, please visit HERE

  1. Module Welcome

Module type: Module Custom HTML
Module Postion: navheader

 

Frontend

 

Backend

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

Module

 

Custom Output: Enable Toggle Editor and enter this Custom HTML

<div class="mod-welcome">
<div class="welcome-desc">Welcome to Delphinus.
A fully responsive theme with clean &amp; pixel perfect design.
</div>
<a class="welcome-btn" href="#">Learn More</a>
</div>

Detail Custom HTML

Menu assignment: Only on the pages selected

 

  1. Module Graphic Design

Module type: Custom HTML
Module position: position-1

Frontend


                                                         

Backend

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

Module

 

Custom HTML: Enable Toggle Editor and enter this Custom HTML

<div class="our-services">
<a class="services-icon services-icon-graphic" href="#"> </a>
<h3>Graphic Design</h3>
<p>Nunc congue eros at eros ornare hendrerit. 
Sed urna augue, pretium id libero vel, blandit ultrices tellus. 
<br /><a style="text-align: center;" href="#">Read more...</a></p>
</div>

Detail Custom HTML

 

Menu assignment: Only on the pages selected

 

  1. Module Web Design

Module type: Custom HTML
Module position: position-2

 

Frontend

                                   

Backend

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

Module

 

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

<div class="our-services">
<a class="services-icon services-icon-web" href="#"> </a>
<h3>Web Design</h3>
<p>Nunc congue eros at eros ornare hendrerit. 
Sed urna augue, pretium id libero vel, blandit ultrices tellus.
<br /><a style="text-align: center;" href="#">Read more...</a></p>
</div>

Detail Custom HTML Image’s

Module Class suffix: In Web Design module we use module class suffix : animation bounceIn.

                  

Menu assignment: Only on the pages selected

 

  1. Module Logo Design

Module type: Custom HTML
Module position: position-3

Frontend

 

                             

Backend

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

Module:


Custom Output: Enable Toggle Editor and enter this HTML :

<div class="our-services"><a class="services-icon services-icon-logo" href="#"> </a>
<h3>Logo Design</h3>
<p>Nunc congue eros at eros ornare hendrerit. Sed urna augue, pretium id libero vel, blandit ultrices tellus. <br /><a style="text-align: center;" href="#">Read more...</a></p>
</div>

Detail HTML Code:

Module Class Suffix: In Logo Design module, we use clas-suffix: animation bounceIn

                

 

Menu assignment: Only on the page selected

 

  1. Module Custom Design

Module type: Custom HTML
Module position: position-4

Frontend

                                           

Backend

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

Module:

Custom Output: Enable Toggle Editor and enter Custom HTML code:

<div class="our-services">
<a class="services-icon services-icon-custom" href="#"> </a>
<h3>Custom Design</h3>
<p>Nunc congue eros at eros ornare hendrerit.
Sed urna augue, pretium id libero vel, blandit ultrices tellus. 
<br /><a style="text-align: center;" href="#">Read more...</a></p>
</div>

Detail Custom HTML:

 

Module class suffix: In Custom Design module we used class suffix: animation bounceIn

 

Menu assignment: Only on the pages selected

 

  1. Latest work

Module type: Noo Portfolio
Module position: position-5

 

Frontend

 

Backend

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

Module:

 

Display Options


 

Module Class Suffix: ||Check our all latest work in this section -->Subtitle for module


Menu assignment: Only on the pages selected

 

  1. Module Feature

Module type: Custom HTML
Module position: mast-col1

Frontend

 

Backend

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

 

Custom Output: Enable Toggle editor and enter Custom HTML:

<div class="row">
<div class="animation fadeInLeft col-xs-12 col-sm-8  col-md-6">
<div class="feature-box">
<div class="feature-box-icon"><span class="fa fa-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="fa fa-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="fa fa-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="fa fa-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="animation fadeInRight col-xs-12 col-sm-8  col-md-6">
<div class="feature-box">
<div class="feature-box-icon"><span class="fa fa-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="fa fa-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="fa fa-bars"> </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="fa fa-meh-o"> </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>

 

Detail Custom HTML:


Module Class Suffix: features

                    

Menu assignment: Only on the pages selected

 

 

  1. Module and more…

Module type: Module Custom HTML
Module position: sidebar-1

Frontend

 

                                


Backend

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

 


Custom Output: Enable Toggle editor and enter  this Custom HTML

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> <span class="fa fa-pencil"> </span>Collapsible Group Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">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="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion"> <span class="fa fa-camera"> </span>Collapsible Group Item #2 </a>
</h4>
</div>
<div="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">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="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion"> <span class="fa fa-bell"> </span>Collapsible Group Item #3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">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>

Detail Custom HTML:

 

Module Class Suffix: nopadding no-bg animation pulse

                     

Menu assignment: Only on the pages selected

  1. Module Purches Theme

Module type: Custom HTML
Module position: navcontent

Frontend


Backend

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



Custom Output: Enable Toggle editor and enter this Custom HTML

<div class="purchases-theme">
<div class="large-text">With various templates, site building easily</div>
<div class="medium-text">We've focused on making each little detail perfect</div>
<div class="small-text">A fully responsive theme with clean &amp; pixel perfect design.
Suspendisse tristique ante sit amet sem pulvinar posuere</div>
<a class="purchase-btn" href="#">Buy Theme</a>
</div>

Detail Custom HTML:

 

Module Class Suffix: module uses class-suffix: bg-navcontent


                   

Menu assignment: Only on the pages selected

 

 

  1. Our Clients

Module type: Custom HTML
Module position: navfooter

Frontend



Backend

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

 


Custom Output: Enable Toggle editor and enter this Custom HTML

<div id="myCarousel" class="carousel slide"><!-- Carousel nav -->
<div class="noo-cs-control">
<a class="fa fa-chevron-left" href="#myCarousel" data-slide="prev"> </a> 
<a class="fa fa-chevron-right" href="#myCarousel" data-slide="next"> </a>
</div>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer1.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer2.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer3.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer4.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer5.png" alt="" /></a>
</div>
</div>
<div class="item">
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer1.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer3.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer2.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer4.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer5.png" alt="" /></a>
</div>
</div>
<div class="item">
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer1.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer5.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer3.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer4.png" alt="" /></a>
</div>
<div class="event animation bounceIn">
<a href="#"><img src="images/nootheme/demo/logo-footer2.png" alt="" /></a>
</div>
</div>
</div>
</div>

Detail Custom HTML:

 

Module Class Suffix: our-clients top-arrow||Check our all our clients in this section

Class Sufifix includes 2 parts:

+> Part 1: type "our-clients top-arrow" -->module's class suffix 

+>Part 2: type "Check our all our clients in this section"--> subtitle of module

             

Menu assignment: Only on the pages selected

 

        

  1. Newsletter

Module type: Acy Mailing
Module position: footer-top1

     Frontend

                                          

    Backend

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

      

Module Class Suffix:dark-style

Menu assignment: On all pages

                                    

  1. Follow Us

Module type: Custom HTML
Module position: footer-top2

Frontend

                                          

Backend

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


Custom Output: Enable Toggle editor and enter this Custom HTML

<div class="social-media">
<ul class="menu">
<li>
<a class="fa fa-facebook" href="#">
<span class="social-title">Facebook</span>
</a>
</li>
<li>
<a class="fa fa-twitter" href="#">
<span class="social-title">Twitter</span>
</a>
</li>
<li>
<a class="fa fa-pinterest" href="#">
<span class="social-title">Pinterest</span>
</a>
</li>
<li>
<a class="fa fa-flickr" href="#">
<span class="social-title">Flickr</span>
</a>
</li>
<li>
<a class="fa fa-google-plus" href="#">
<span class="social-title">G+</span>
</a>
</li>
</ul>
</div>

Module Class Suffix: social-media

 


Menu assignment: On all pages


                            

      13  Module Footer About

              Module type: Custom HTML
              Module position: footer-1

         Frontend

                                                     

    Backend

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

Custom Output: Enable Toggle editor and enter this Custom HTML

<div class="mod-designer">
<div class="designer-image">
<img src="templates/noo_delphinus/images/footer-logo.png" alt="" />
</div>
<div class="designer-desc">Cleatskins are a revolutionary footwear accessory designed to allow athletes to move swiftly.</div>
<div class="contact-address">
<ul class="contact-address">
<li><i class="fa fa-home"> </i> <span class="contact-street">141, Truong Dinh Street, Hoang Mai, Hanoi, Vietnam</span></li>
<li><i class="fa fa-phone"> </i> <span class="contact-telephone">+1123456789</span></li>
<li><i class="fa fa-envelope"> </i> <span class="contact-email"><a href="#">hello@yourmail.com</a></span></li>
</ul>
</div>
</div>

 

Detail Custom HTML:

 

Menu assignment: On all pages

 

 

14. Module Quick Links

           Module type: Menu
           Module position: footer-2

                       Frontend

                                                                          

              Backend

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

Menu assignment: On all pages

 

                             

          15. Module Term

         Module type: Custom HTML
         Module position: footer-3

                 Frontend

                                                                       

Backend

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

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

<ul class="menu-footer-bottom">
<li class="item"><a href="#">Pricing Table</a></li>
<li class="item"><a href="#">Accordion</a></li>
<li class="item"><a href="#">Alert</a></li>
<li class="item"><a href="#">Awesome Font Icons</a></li>
<li class="item"><a href="#">Buttons</a></li>
<li class="item"><a href="#">Labels and Badges</a></li>
<li class="item"><a href="#">Progress Bars</a></li>
<li class="item"><a href="#">Typography</a></li>
</ul>

Detail Custom HTML:

 

Menu assignment: On all pages

 

                                      

         16. Module From The Blog

        Module type: K2 Content
        Module position: footer-4

      Frontend

                                                       

Backend

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

Module:

Advanced

                                             

Menu assignment: On all pages

VIDEO TUTORIAL: This is video tutorial how to configure Homepage modules
 

 

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

<div class="row">
<div class="col-xs-12 col-sm-6  col-md-6">
<div class="carousel-box animation fadeIn">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/nootheme/demo/item1.jpg" alt="" />
<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="" />
<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/item3.jpg" alt="" />
<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>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
<span class="glyphicon fa fa-chevron-left"> </span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
<span class="glyphicon fa fa-chevron-right"> </span> 
</a>
</div>
</div>
<div class="skill-box animation fadeIn">
<h4 class="inside-title">Our Skills</h4>
<hr class="underline" />
<div class="progress progress-info">
<div class="progress-bar progress-bar-info">
<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="progress-bar progress-bar-success">
<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="progress-bar progress-bar-warning">
<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="progress-bar progress-bar-danger">
<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="progress-bar progress-bar-warning progress-striped active">
<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="progress-bar progress-bar-striped active">
<span class="pull-left skill-left">PHP</span> 
<span class="pull-right skill-right">63%</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6  col-md-6  animation fadeIn">
<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="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
</div>
</div>
</div>
</div>

 

Detail code HTML:

In Custom Output module, the code is divided into 3 parts 

Part 1: HTML configure

 

 

Part 2: HTML code


<div class="skill-box animation fadeIn">
<h4 class="inside-title">Our Skills</h4>
<hr class="underline" />
<div class="progress progress-info">
<div class="progress-bar progress-bar-info">
<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="progress-bar progress-bar-success">
<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="progress-bar progress-bar-warning">
<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="progress-bar progress-bar-danger">
<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="progress-bar progress-bar-warning progress-striped active">
<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="progress-bar progress-bar-striped active">
<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="col-xs-12 col-sm-6  col-md-6  animation fadeIn">
<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="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
</div>
</div>
</div>

 

 

  1. 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="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="profile-box animation fadeIn">
<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>
<ul class="profile-social-box">
<li><a href="#"><span class="fa fa-facebook"> </span></a></li>
<li><a href="#"><span class="fa fa-twitter"> </span></a></li>
<li><a href="#"><span class="fa fa-envelope"> </span></a></li>
<li><a href="#"><span class="fa fa-skype"> </span></a></li>
<li><a href="#"><span class="fa fa-flickr"> </span></a></li>
<li><a href="#"><span class="fa fa-pinterest"> </span></a></li>
<li><a href="#"><span class="fa fa-foursquare"> </span></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="profile-box animation fadeIn">
<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>
<ul class="profile-social-box">
<li><a href="#"><span class="fa fa-facebook"> </span></a></li>
<li><a href="#"><span class="fa fa-twitter"> </span></a></li>
<li><a href="#"><span class="fa fa-envelope"> </span></a></li>
<li><a href="#"><span class="fa fa-skype"> </span></a></li>
<li><a href="#"><span class="fa fa-flickr"> </span></a></li>
<li><a href="#"><span class="fa fa-pinterest"> </span></a></li>
<li><a href="#"><span class="fa fa-foursquare"> </span></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="profile-box animation fadeIn">
<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>
<ul class="profile-social-box">
<li><a href="#"><span class="fa fa-facebook"> </span></a></li>
<li><a href="#"><span class="fa fa-twitter"> </span></a></li>
<li><a href="#"><span class="fa fa-envelope"> </span></a></li>
<li><a href="#"><span class="fa fa-skype"> </span></a></li>
<li><a href="#"><span class="fa fa-flickr"> </span></a></li>
<li><a href="#"><span class="fa fa-pinterest"> </span></a></li>
<li><a href="#"><span class="fa fa-foursquare"> </span></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="profile-box animation fadeIn">
<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>
<ul class="profile-social-box">
<li><a href="#"><span class="fa fa-facebook"> </span></a></li>
<li><a href="#"><span class="fa fa-twitter"> </span></a></li>
<li><a href="#"><span class="fa fa-envelope"> </span></a></li>
<li><a href="#"><span class="fa fa-skype"> </span></a></li>
<li><a href="#"><span class="fa fa-flickr"> </span></a></li>
<li><a href="#"><span class="fa fa-pinterest"> </span></a></li>
<li><a href="#"><span class="fa fa-foursquare"> </span></a></li>
</ul>
</div>
</div>
</div>

 


 

Menu assignment: Only on the pages selected

 

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

        1. Module Login

Module type: Login
Position: sidebar-1

 

Frontend

                                                     

Backend

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


 

Menu assignment: Only on the pages selected

 

            

  1. Module Tags

Module Type: Popular Tags
Position: sidebar-1

 

Frontend

                                                   

Backend

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

Module:

        

 

Cloud Layout


                                               

 

Menu assignment: Only the pages selected

 

             

 

  1. Module Latest News

Module type: Articles Category
Position: sidebar-1

 

Frontend

                                                        

Backend

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


    

 

Menu assignment: Only on the pages selected

 

 

  1. Module Social Module

Module type: Custom HTML
Position:  sidebar-1

 

Frontend

                                                               

Backend

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


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

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

Menu assignment: Only on the pages selected

 

                        

  1. Module Sample Menu

Module type: Custom HTML
Position: sidebar-1

 

Frontend


                                                                          

Backend

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


 

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

<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

 


 

 

Guide to how to configure K2  Page

  1. Module Latest News

Module type: K2 Content
Position: sidebar-2

Frontend

                                                        

Backend

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

Module:

 

 

Advanced


                                   

Menu assignment: Only on the pages selected


                                          

  1. Module Tags

Module type: K2 Tools
Position: sidebar-2

 

Frontend

                                                                                       

Backend

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

 

 

Menu assignment: Only on the pages selected


                                                   

  1. Module Recent Comments

Module type: K2 Comment
Position: sidebar-2

 

Frontend

                                                                       

Backend

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

 

 

Menu assignment: Only on the pages selected


                                      

  1. Module Archived

Module type:  K2 Tools
Position: sidebar-2

 

Frontend

                                             

Backend:

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

Menu assignment: Only on the pages selected

 

                                   

 

  1. Module Calendar

Module type:  K2 Tools
Position:sidebar-2

 

Frontend

                                                                

Backend

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

 

 

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 NooDelphinus


III. Layout

Supported layouts in NooDelphinus:

 

Layout Customization

  1. Configure layout structure


                                    

2. Customize the layout  devices


                         
 

IV. Theme magic

To customize theme with ThemeMagic, firstly, you have to enable the feature:


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 Delphinus  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_Delphinus  template, in the Navigation setting, you can configure mega menu.

1. Enable mega menu

 

 

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


Configure options  for selected menu item, sub-megamenu


 

Frontend appearance


To change logo of template, please follow these steps:

                                    

                                




 

 

 

                           

 

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


                        

RECOMMENDATION

The above user guide help user build a Demo Delphinus Template on their site. 
 
If you are new or confused, we recommend you instal Quickstart on your local host and use it as reference for configurations. This is the best way to work with any template.
 
Please read carefully all the provided resources to gain biggest benefits from our products.


Support:

If you have any issue or question please raise your support queries in the forum, or our ticket system.