1. About Joomla version used in JUX Delphinus

All our  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 JUX Delphinus

As bright as the Delphinus constellation on the night sky, Delphinus Joomla Template is a beautiful & professional responsive theme for your business or multi-purpose website. The template plays great on any device or screen resolution. Features with lively slideshow, animated CSS, clean portfolio, prolific About Us page any many more highlights, Delphinus is a versatile template that deserves your choice.

3.  About JUX DelphinusTemplate User Guide

The user guide provided is to help you to quickly learn about JUX Delphinus  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:

4. Features

5. Our Extensions Supported

6.3rd  Party Extension Supported

7.  Layout & Module Positions

Layout

Here are 3 different layouts used in JUX Delphinus template:

Module positions

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

 

8. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. JUX Delphinus 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. Plan your site Developer

1.1 Kick-start a New Joomla Site? - If you are planning to start fresh with a new Joomla site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the How to install Quickstart Package documentation for the in-depth how-to guide for Quickstart Installation.

1.2 Installing on your existing live site ? - If you are planning to use this template for your existing Joomla site, then you should follow the How to make your site look like demo site guide first to dig in the steps involved.

2. Download Template and Extensions

To download JUX Delphinus and extensions please go to  our website  and then log in, go to Download section by clicking on Download item on our Main Menu.

3. Install Template and Extensions

Once you successfully Download the files you need, You'll have to:

 

Here is frontend of Delphinus

 

1. Module Unite Revolution Slider 2

Module type: Unite Revolution Slider 2
Position: slideshow

Frontend

Backend Setting

General Setting

 

2. Module Welcome

Module type: Custom HTML
Position: navheader
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>

Frontend

Backend Setting

 

3. Module Graphic Design

Module type: Custom HTML
Position: postion-1
Module Class Suffix: animation bounceIn
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>

Frontend

Backend Setting

Module Class Suffix

Similarly, do the same steps with other modules:

Module type: Custom HTML
Position: position-2
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>
Module type: Custom HTML
Position: position-3
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>
Module type: Custom HTML
Position: position-4
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>

 

4. Module Lastest Work

Module type: JUX Portfolio
Position: position-5
Module Class Suffix: ||Check our all latest work in this section.

Frontend

Backend Setting

Display Options

Module Class Suffix

 

5. Module Featured

Module type: Custom HTML
Position: mast-col1
Module Class Suffix: features
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>

Frontend

Backend Setting

Module Class Suffix

 

6. Module and more...

Module type: Custom HTML
Position: sidebar-1
Module Class Suffix: nopadding no-bg animation pulse
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 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.</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>

Frontend

Backend Setting

Module Class Suffix

 

7. Module Purches Theme

Module type: Custom HTML

Position: navcontent
Module Class Suffix: bg-navcontent
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>

Frontend

Backend Setting

Module Class Suffix

 

8. Module Our Clients

Module type: Custom HTML
Position: navfooter
Module Class Suffix: our-clients top-arrow||Check our all our clients in this section
Custom HTML
<div id="myCarousel" class="carousel slide"><!-- Carousel nav -->
<div class="jux-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/joomlaux/demo/logo-footer1.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer2.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer3.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer4.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer5.png" alt="" /></a></div>
</div>
<div class="item">
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer1.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer3.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer2.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer4.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer5.png" alt="" /></a></div>
</div>
<div class="item">
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer1.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer5.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer3.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer4.png" alt="" /></a></div>
<div class="event animation bounceIn"><a href="#"><img src="images/joomlaux/demo/logo-footer2.png" alt="" /></a></div>
</div>
</div>
</div>

Frontend

Backend Setting

Module Class Suffix

 

9. Module Newsletter

Module Type: AcyMailing
Position: footer-top1
Module Class Suffix: dark-style

Frontend

Backend Setting

Module Class Suffix

 

10. Module Follow Us

Module type: Custom HTML
Position: footer-top2
Module Class Suffix: social-media
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>

Frontend

Backend Setting

Module Class Suffix

 

11. Module Footer About

Module type: Custom HTML
Position: footer-1
Custom HTML
<div class="mod-designer">
<div class="designer-image"><img src="templates/jux_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>

Frontend

Backend Setting

 

12. Module Quick Links

Module type: Menu
Position: footer-2

Frontend

Backend Setting

 

13. Module Terms

Module type: Custom HTML
Position: footer-3
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>

Frontend

Backend Setting

 

14. Module From The Blog

Type: K2 Content
Position: footer-4

Frontend

Backend Setting

 

15. Module Copyright

Module type: Footer
Position: Footer

Frontend

Backend Setting

 

VIDEO TUTORIAL: This is video tutorial how to create & configure Delphinus template:

 

 

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.

2. Install & Configure K2 Component

To install & configure K2 pages, please following 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:

Layout & View

Content

Images

Social

Comments

Frontend Editing

- Step 2: K2 Categoires

 

3. Guide how to create & configure module in Blog

3.1 Module Latest News

Module type: K2 Content
Position: sidebar-2

Frontend

Backend Setting

3.2 Module Tags

Module type: K2 Tools
Position: sidebar-2

Frontend

Backend Setting

3.3 Module Recent Comments

Module type: K2 Comments
Position: sidebar-2

Frontend

Backend Setting

3.4. Module Archived

Module type: K2 Tools
Position: sidebar-2

Frontend

Backend Setting

 

4. Guide how to create & configure Blog classic 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 Classic page and configure:

You can change frontend by change leading count and Primary count in category.

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

 

1. Creating new Template style

Template style feature (version 2.5 and above) is to assign different template styles to individual menu items. The default template style can be partially or completely overridden by assigning different template styles to the desired menu items in order to obtain a different look for their respective pages.

From backend: Go to Extensions→ Template Manager→ Select template jux_delphinus– Default then hit the “Duplicate” button to clone template style:

The duplicated template style inherits all settings from its parent template style except the menu assignment (the cloned template style is not assigned to any menu items). Open the cloned template style → Menu Assignment, then assign the template style to menu items. Those menu items will have template style overridden the default template style.

2. Layout Configuration

2.1 Layout Structure configuration

2.1.1 Clone layout:

To quickly create new layout, clone layout in the layout setting panel, all you have to do is hit the “Save as Copy” button. If you are new to T3, you should clone layout to customize so that you always has backup layout.

2.1.2 Switch layout for any template style

Open any template style, go to "Layout" tab, switch layout for current template style.

2.1.3 Assign module position

To assign module position, hover the position you want to change, hit the setting icon then select position. To change number of positions for spotlight block, just select number of position in the spotlight block

2.1.4 Change number of position in spotlight block

For spotlight block, you can select number of positions. It supports up to 6 positions.

2.2 Responsive layout configuration

2.2.1 Select responsive layout

In configuration panel, you will see supported responsive layouts: Large, Medium, Small and Extra Small, select responsive layout to configure.

2.2.2 Disable any position

For responsive purpose, some elements in your site does not fit in specific layout, you can disable the position in the layout. The configuration is only applied for current layout.

2.2.3 Resign positions in spotlight block

For modules in spotlight block, you can drag to resize its size.

3. Layout customization

JUX Delphinus  template is built with T3 Framework , you can refer to T3 documentation for more detail:

 

4. Theme  magic configuration

ThemeMagic is to customize your themes based on pre-define parameters without changing any style file.

Firstly, you have to enable the "ThemeMagic" feature. Open any template style manager, in the General tab, enable the ThemeMagic option. Next, hit the "ThemeMagic" button on the top bar list to open the ThemeMagic working panel

Customize your theme with pre-defined parameters

 

Adding new group and parameters to ThemeMagic

If you want to add new group, parameters to ThemeMagic to customize your themes, please refer to T3 documentation.

Detail Documentaion

Video tutorial



 

 

1. Megamenu configuration and customization

1.1 When disable Megamenu

When Megamenu is disabled, the template will use Joomla drop down menu.

To disable Megamenu, open Template style manager, in the “Navigation”tab, disable “Megamenu” option

 

1.2 When enable Megamenu

Megamenu allows you to display your main menu in different ways and flexibly. You can display menu items in columns, add icon and style for menu item, load module for a module menu item..

1.2.1 Enable megamenu

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

 

In the configuration panel of Megamenu, select menu item/submenu/column or row to configure.

For more detail of how to work with Megamenu, please check out the references below:

 

2. Off-Canvas Configuration

The new Off-canvas sidebar is now independent with Collapse Navigation for small screens. The Off-canvas sidebar displays content from defined position.

2.1 Enable Off-canvas sidebar

To enable Off-canvas sidebar, open Add-ons tab then enable Off-canvas sidebar

Assign module position to Off-canvas sidebar. By default, Off-canvas will be assigned to off-canvas position

Add content for Off-canvas sidebar by creating modules then assign them to off-canvas position

Frontend appearance

2.2 Use Off-Canvas as Navigator in small screens

In case you want to display Off-canvas sidebar as navigation in small screens like tablet, mobile, please disable Off-canvas sidebar in responsive layout.



 

 

Here is frontend of JUX Delphinus

 

1. Change the Logo image

There are 2 ways to change logo for JUX Delphinus template

#1: Change logo from Template Manager

Each style can go with different logo. To set style for the logo, please go to Extensions→Template Manager→ select Theme you’re using. Select image for logo on your site as shown in picture below:

 

 

#2:  Change the Logo from the variable.less file

Another way to change logo is changing logo image path in variables.less file, which is located in template/jux_apps/less

// TEMPLATE LOGO
// --------------------------------------------------
@t3-logo-image:               "@{t3-image-path}/logo.png";

 

2. Logo Styling

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

// Logo
// ----
.logo {

 text-align: left;
 padding-top: 35px;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 -ms-transition: all 0.4s ease;
 transition: all 0.4s ease;

 // Left align the logo on  Tablets / Desktop
 @media (max-width: @screen-xs-max) {
   padding-top: 15px;
 }

 a {
   display: inline-block;
   line-height: 1;
   margin: 0;
 }
}

// Logo Image
// ----------
.logo-image {
 // Hide sitename and slogan
 span, small {
   display: none;
 }
}

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