Capulus 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 NooCapulus

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 NooCapulus

Thank you for choosing and using NooCapulus Template! We really appreciate your choice and hope that our template will bring the best values and benefits to your business.

You can always reach us for support at our Ticket System. And don’t forget to leave us your comment on our product to help us bring you even better and more excellent Joomla templates & extensions.

3. About NooCapulus Template User Guide

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

Main aspects covered in the user guide:

  1. Template Instruction

  2. Download&Install

  3. Homepage Configuration

  4. K2 Page Configuration 

  5. Contact Us page configuration 

  6. Megamenu Configuration

  7. Logo Customization

  8. Recommendation

4. Features

·         100% Responsive &Retina ready

·         Compatible with Joomla 3.x

·         Awesome Joomla extensions built-in

·         Animate CSS integrated

·          Built with Bootstrap, HTML5 & CSS

·         Gentle & peaceful theme colours

·         Revolution slider integrated (worth $25)

·         Fully integrated with social network (FB, Twitter, G+...) and location finder plugin

·         Slick & Professional Layout

·         Creatively designed Menu page

·         Fully equipped feature for a cafeteria website

·         Joomla style supported: Smart online reservation form, contact form, error 404 page, blog

·         3 layouts with 6 colors supported

·         Font Awesome Icon Integration

·         Provided with hundreds of Shortcode available

·         T3V3 Framework base with beautiful design, powerful customization feature

·         Comprehensive documentation included

·         Optimized and LESS CSS for SEO on site

·         Cross browser compatibility: IE9, IE10, Firefox, Chrome, Opera and Safari

·         Easy to customize and user friendly

·         Delivered with Quickstart Installation

·         Demo content (pages, posts, layouts etc.) is included so that you can be up and running quickly

·         Full source plus individual PSDs for all sections and patterns included

5. NooTheme Extensions Supported

Here are the extensions used in NooCapulus template:

Module

6. 3rd  Party Extension Supported

7. Layout & Module Positions

Layout

Here are 3 different layouts used in NooCapulus  template:

Module positions

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

The below picture indicates modules’ display in Homepage:

8. T3 Framework

T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. NooCapulus 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 NooCapulus and extensions please go to  our website  and then log in, go to Download section by clicking on Download item on our Main Menu.

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


3. Install Template and Extensions

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

View how to install extension guide

Now we will guide you to configure Homepage module. In Home page we have 14 modules.

The below picture indicates modules’ display in Homepage:

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

1. Module Contact Information

Module type: Custom HTML
Module position: find-capulus

HTML code

<div class="contact-infor clearfix">
<div class="find-capulus col-md-6 col-sm-6 col-xs-6">
<i class="fa fa-map-marker"></i><a href="https://plus.google.com/102794176670029630371/about?hl=en" target="_blank">Find <span>Capulus!</span></a></div>
<div class="number-call col-md-6 col-sm-6 col-xs-6"><i class="fa fa-mobile"></i>123.4567.8969</div>
</div>
Frontend
 
 
 
Backend Settings
 
Menu assignment
 
Video tutorial
 
2. Module Top Revolution Slider
Module type: Unite Revolution Slider2
Module position: slideshow

Frontend

Backend Settings

General Settings

Menu assignment

Video tutorial

Note: To learn more about module type Unite Revolution Slider2, you can click HERE

3. Module Welcome To Our Capulus

Module type: Custom HTML
Module position: navheader

HTML code

<div class="welcome-to clearfix">
   <div class="header">
       <h2 class="title-header"><span>Welcome To Our Capulus</span>
       </h2>
       <p class="caption-header">Our is a love story inspired by a good cup of coffee
       </p>
   </div>
   <div class="content clearfix">
       <div class="image-welcome col-md-5 col-sm-5 tilt">
            <a href="index.php?option=com_content&view=article&id=1&Itemid=195"><img src="images/nootheme/demo/welcome-image.png" alt="" /></a></div>
       <div class="caption-welcome  col-md-7 col-sm-7">
               <h3><a href="index.php?option=com_content&view=article&id=1&Itemid=195">Go on, Rewards Yourself</a></h3>
                   <p>If you want to use a passage of, you need to be sure that there is anything embarrassing hidden in the text. Internet tend to reproduce the same extract endless which makes the only true lipsum.</p>
                   <ul class="list-caption">
                      <li>Buy 9 & 10th beverage in on us</li>
                       <li>Free refils in the store</li>
                       <li>The chance to win amazing prizes</li>
                       <li>Discounts and special offers</li>
                       <li>A little extra birthday love from us</li>
                   </ul>
       </div>
   </div>
</div>
Frontend
 

Backend Settings

Detail HTML

Menu assignment

Video tutorial

4. Module  Feature

Module type: Custom HTML
Position: spotlight 1-1

HTML code

<div class="title-feature clearfix">
<h2 class="title"><span>Feature</span></h2>
<p class="caption">If you want to use a passage of, you need to be sure that there
</p>
</div>

Frontend

Backend Settings

Menu assignment

Video tutorial

5. Module Feature

Module type: Noo CSS3 Accordion Slider
Module position: spotlight 1-1

Frontend

Backend Settings

Display Options

Menu assignment

Video tutorial

6. Module Last Update

Module type: Custom HTML
Position: spotlight 2-1

HTML code

 <div class="last-update left-infor col-md-5 col-sm-12 col-xs-12 animation fadeInLeft">
       <h3>Last Update</h3>
       <p class="caption">If you want to use a passage of, you need to be sure that <br>there is anything embarrassing hidden in the text. <br> Internet tend to reproduce</p>
   </div>
   <div class="last-update right-infor col-md-7 col-sm-12 col-xs-12 animation fadeInRight">
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item1">
           <div class="item-image"><img src="images/nootheme/demo/most-tasty.png" alt="" /></div>
               <h3>Most tasty</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item1">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item2">
           <div class="item-image"><img src="images/nootheme/demo/maple_glazed.png" alt="" /></div>
               <h3>Maple Glazed</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item2">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>
       <div class="last-update-item col-md-4 col-sm-4 col-xs-12" id="item3">
           <div class="item-image"><img src="images/nootheme/demo/caramel.png" alt="" /></div>
               <h3>Caramel</h3>
               <div class="item-caption-more animated  fadeIn1"  id="item3">
                   <p id="number">04.16.75.24</p>
                   <p id="text">There are many variations of passages of Lorem Ipsum available</p>
                   <p>&nbsp;</p>
               </div>
       </div>  
   </div>
Frontend
 

Backend Settings

Menu assignment

Image CustomHTML1

Image CustomHTML2

Video tutorial

7. Module Parallax scroll

Module type: Custom HTML
Position: navcontent

HTML code

<div class="dot-image"><p><img src="images/nootheme/demo/icon/icon_top.png" alt="" /></p></div>
<div id="parallax" class="parallax">
   <div class="bg parallax-bg"></div><!-- END PARALLAX BACKGROUND -->
   <div class="overlay"></div><!-- END PATTERN OVERLAY -->
   <div class="container clearfix">
     <div class="parallax-content">
      <div class="contact-details">
        <h2>support@nootheme.com</h2>
        <h1>1234-567-890</h1>
        <h2>71 Irving Place Coffee & Tea, Irving Place, New York, NY, United States</h2>
      </div>
    </div>
  </div>
</div>

Frontend

Backend Settings

Menu assignment

Detail Image HTML

Video tutorial

8. Module Promotions

Module type: Custom HTML
Module position: spotlight 3-1

HTML code

<div class="promotions clearfix animation fadeInLeft ">
    <div class="header"><h2><a href="#">Promotions</h2></a></div>
    <div class="content">
        <h3>Happy Hour, between 4pm & 5pm</h3>
        <div class="image morph"><img src="images/nootheme/demo/promotions-image.png"/></div>  
        <p class="caption">Donec cone lacinia dui, potitor lec tus condimentum lao. Auctor neque a toncus ut eleifend nibh porttitor. Phasellus molestie magna is est bibendum non venenatis nisl temporisalor...<span class="read-more"><a href="#">(read more)</a></span></p>
    </div>
</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

9. Module Special

Module type: Custom HTML
Module position: spotlight 3-2

HTML code

<div class="special animation fadeInRight">
   <div class="header"><h2><a href="#">Special</h2></a></div>
   <div class="content">
       <h3>Gourmet coffee grinded</h3>           
       <p class="caption">Gourmet coffee grinded from only the most tasty beans on earth, selected for a great mixture of fresh and exotic taste!<br><br>Indulge your taste buds with some of the best sweets!</p>
       <div class="image morph"><img src="images/nootheme/demo/special-image.png"/></div>
       <p class="read-more"><a href="#">Read more...</a></p>
   </div>
</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

10. Module Contact Us

Module type: Custom HTML
Module position: footer-1

HTML code

<div class="animation fadeInLeftBig">
<div class="contact-us-infor"><span>Cleatskins are a revolutionary footwear accessory designed to allow athletes to move swiftly.</span>
<ul id="contact-us">
<li class="icon-home"><p>Dinh Cong Street, Hoang Mai District, Ha Noi City</p></li>
<li class="icon-phone"><p>+(04)123456.789<br>+123456.789</p></li>
<li class="icon-mail"><p><a href="mailto:hello@nootheme.com">hello@nootheme.com</a></p></li>
</ul>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Detail Image HTML

Video tutorial

11. Module For Business

Module type: Custom HTML
Module position: footer-2

HTML code

<ul class="for-business animation fadeInLeft">
<li><a href="#">Office coffee</a></li>
<li><a href="#">Food Service</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Video tutorial

12. Module Newsletter

Module type: AcyMailing Module
Module position: footer-3

Frontend

Backend Settings

Module Class Suffix

Menu assingnment

Video tutorial

13. Module Follow Us

Module type: Custom HTML
Module position: footer-4

HTML code

<div class="animation fadeInRightBig">
<div class="follow-introtext">Follow Origin on the following social network sites.</div>
<div class="social_media clearfix">
<ul class="menu clearfix">
<li class="facebook"><i class="fa fa-facebook"></i></li>
<li class="twitter"><i class="fa fa-twitter"></i></li>
<li class="googleplus"><i class="fa fa-google-plus"></i></li>
<li class="youtube"><i class="fa fa-youtube-play"></i></li> 
</ul>
</div>
</div>

Frontend

Backend Settings

Menu assignment

Video tutorial

14. Module Footer

Module type: Footer
Module position: footer

Frontend

Backend Settings

Menu assignment

Video tutorial

In K2 page, with each cateogory we created 1module banner  full pages. Following we will guide you to configure modules:

1. Module All Category Banner

Module type: Custom HTML
Module position:slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/allcategory-banner.png"/>
   <h2 class="title">All Category</h2>
   <div class="caption">Indulge your taste buds with some of the best sweets. Gourmet coffee grinded from only the most tasty beans on earth, selected for a great mixture of fresh <br>
and exotic taste. If you want to use a passage of Ipsum, you need to be sure that there is anything embarrassing hidden in the text. All the Ipsum generators on<br>
the Internet tend to reproduce the same extract endless, which makes the only true lipsum.com</div>

</div>

Frontend

Backend Settings

Detail Image HTML

Menu assignment

Similarly, you can do the step with each module at banner position for each category

2. Module Coffe Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/coffee-banner.jpg"/>
   <h2 class="title">Coffee</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

3. Module Tea Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/tea-banner.png"/>
   <h2 class="title">Tea</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

4. Module Cake Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/cake-banner.jpg"/>
   <h2 class="title">Cake</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

5. Module Book Banner

Module type : Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/book-banner.jpg"/>
   <h2 class="title">Book</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

6. Module Gallery Banner

Module type: Custom HTML
Module position: slideshow

HTML code

<div class="custom-image-banner">
   <img src="images/nootheme/demo/gallery-banner.png"/>
   <h2 class="title">Gallery</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

7. Module About us banner

Module type: Custom HTML
Module position: slideshow

HTML code

 <div class="custom-image-banner">
   <img src="images/nootheme/demo/about-us-banner.jpg"/>
   <h2 class="title">About Us</h2>
   <div class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non libero imperdiet, pretium massa gravida, fermentum elit.. </div>
</div>

Frontend

Beside, in K2 page we also provide other modules as listed below:

1. Module Categories

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

2. Module Tags

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

3. Module Recent Post

Module type:K2 Content
Module position: sidebar

Frontend

Backend Settings

Menu assignment

4. Module Archived

Module type: K2 Tools
Module position: sidebar

Frontend

Backend Settings

Menu assignment

5. Module Recent Comments

Module type: K2 Comments
Module position: sidebar

Frontend

Backend Settings

Menu assignment

 






 

 

 

Here is frontend of Contact Us page

Now we will guide you to configure Contact Us pages

1. Module Noo Google Map

Module type: Noo Google Map
Module position: slideshow

Frontend

Backend Settings

Display Options

Menu assignment

2. Component Contact

Frontend

To configure you can go to backend: Components-->Contacts-->Select Categories and create category for Component

And here is category we created

Then we choose Contacts to create contacts, and we created  Contact Us, you can see Image:

Miscellaneous Information

You can add Miscellaneous information for Contact Us

<div class="day">Monday-Thursday</div>
<div class="hours">8am - 5pm</div>
<div class="day">Friday</div>
<div class="hours">8am - 6pm</div>
<div class="day">Saturday</div>
<div class="hours">9am - 5pm</div>
<div class="day">Sunday & Holiday</div>
<div class="hours">Close</div>

Display Options

 

 

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

2.Layout Configuration

2.1 Select layout for style

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

2.2 Layout Configuration

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

2.2.1 Layout structure configuration

Set number of columns in each spotlight block

2.2.2 Responsive Layout Configuration

Select responsive layout

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

3. Theme Configuration

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

3.1 Theme Setting

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


 

4. Change Theme color for template

4.1 Build up your our page

To assign a layout a certain pase, please follow our instruction bellow:

Step 1: Clone the default style

When you install NooCapulustemplate, there is only one style: the default style. However, you can create an unlimited number of different styles for your template.

To create a new style in NooCapulus template, please open : Extensions-->Template Manager--> Select NooCapulus template default then hit the Duplicate button

On the demo site, we have already duplicated a number of style for different layout

Step 2:Assign layout to the newly created style

Open the new style then select the respective layout that you want to assign to

Step 3: Assign menu type

Now open menu item that you have assigned to the newly created style to configure it

Step 4: Assign style to each menu item

This is called "style override". The menu item that is assigned to a specific style will have the style override the default style.

2. Change Theme color for Template

You can go change theme color for template by the following:

Go to Extensions-->Template Manager--> Select Theme style you want and set “default” for template



 

The image below shows the sample megamenu menu in NooCapulus 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 NooCapulus template

#1: Change logo from the Template Manager

Each style can go with different logo. To set style for the logo, please go to Extensions-->Template Manager--> Select Theme you’re using:

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

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

2. Logo Styling

To customize style for logo, open file style.css that is located in the template/noo_capulus/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
// ----
.logo { 
 text-align: center;
  // Left align the logo on  Tablets / Desktop
  @media screen and (min-width: @screen-sm) {
    text-align: center;
  }
  @media (max-width: @screen-xs-max) {
    background: url(../images/title-line-image.png) repeat-x;
    background-position-y: 69%;
  }
 a {
    display: inline-block;
    line-height: 1;
    margin: 0;
  }
}

// Logo Image
// ----------
.logo-image {
  // Hide sitename and slogan
  a{
    background: @body-bg;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 100;
    position: relative;
  }
  span, small {
    display: none;
  }
}
// Logo Text
// ----------
.logo-text {
  a {
    z-index: 100;
    position: relative;
    text-decoration: none;
    font-size: ceil(@font-size-base * 2);

    font-weight: bold;
    background: @body-bg;
    padding-left: 10px;
    padding-right: 10px;
  }
  &: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.