“Hypno - Modern, Responsive Joomla Template” Documentation by “joomlastars”


“Hypno - Modern, Responsive Joomla Template”

Created: 31 Oct, 2014
Updated: Nov, 2017
By: Joomlastars
Support: joomlastars
Email: author@joomlastars.co.in
Skype: joomlastars
Twitter: twitter.com/joomlastars
Facebook: facebook.com/joomlastars


Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!

If you like my theme and support please rate my product 5 star. I will appreciate it.


Table of Contents

  1. Introduction
  2. Folder Structure
  3. Templates Files and Structure
    1. CSS Files:
    2. Javascript Files:
    3. PSD Files:
  4. Installation Guide
  5. Extensions Guide
  6. HTML Structure
  7. How to Edit jQuery Files?
  8. Shordcodes
    1. Buttons
    2. Columns
    3. Lists
    4. Progress bars
    5. Quotes
    6. Service Boxes
    7. Step Boxes
    8. Tabs
    9. Typography
  9. Animations usage
  10. Sources and Credits
  11. Version History

A) Introduction - top

The Hypno Modern, Responsive Joomla template is a custom design fully-functional website template. The Hypno joomla template features a fully responsive framework that looks fantastic on any mobile device and retina display ready for high-quality resolution graphics. If you are looking for professional joomla website template for your organization, the Hypno ideal for you!

It uses the best practices of latest technologies and is compatible with all mobile devices, which comes with Following features. You can change it from Template Options. Continue reading the documentation guide to uncover all the features provided.


1) Multiple Theme colors
2) Easy portfolio customization
3) Audio and video in blog
4) Fully Responsive
5) Full Layout and Boxed Layout
6) Different Pattern for Boxed Layout
7) Free Gifts Html and PSD with package
8) Powerful Admin Options
9) Clean, bug-free code
10) Easy Documentation & Quick Support

 

This user guide covers all options that the template provides. Please read the documentation carefully as it probably contains answers to most of questions that may arise. In case if you feel some aspect is not covered or have some questions, contact us via e-mail author@joomlastars.co.in or via skype joomlastars. We will do our best to answer you in shortest of time.


Updates

The updates will be published every time a reasonable amount of any bug fixes and improvements is available. Please feel free to contact us if you would like to see any new feature implemented with the upcoming updates. The more specific and demanded requests we get the higher are the chances the new feature will be included on next update.


Requirement

Joomla templates have the least requirements to hardware resources. Any server with any configuration is sufficient. Just unzip the files and transfer to your server using any FTP software.


Installation Guide

For Updated template Documentation Guide check Documentation guide


PSD Files

Should you want to change some specific part of the design of the template to match your taste or your company branding, refer to PSD folder. Photoshop files are carefully layered, groupped and logically labeled to ensure maximum comfort when editing the files.



B) Folder Structure - top

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 8 folders.


  1. Database - It includes sample_data.sql
  2. Documentation - Documentation for install template
  3. Extensions - All Extensions zip files
  4. Html - Hypno Html files
  5. Licensing - License detail
  6. PSD - PSD files
  7. Quick_start - Easy Installation Quick start files
  8. Theme - It include hypno.zip

C) Templates Files and Structure - top

When you open template/hypno folder you'll get folder template structure.


structure

Description

C.1) CSS Files - top


In folder "css" you will find following CSS files

In order to switch color version, simply add css in templates/hypno/index.php

<link href="css/alt-color-colorofyourchoice.css" rel="stylesheet" title="color-grey"> If you wish to use a custom color, open a color css file and replace all color variables with a color of your choosing.



C.2) Javascript Files - top


C.3) PSD Files - top

  1. Homepage v1
  2. Homepage v2
  3. Homepage v3
  4. Homepage v4
  5. Blog
  6. Single Post
  7. Blog v2
  8. Portfolio
  9. Page with sidebar
  10. Fullwidth page
  11. 404 page

D) Installation Guide - top

You can setup Hypno theme by using following 2 ways:

  1. Hypno - Quick_start Installation
  2. Hypno template installation for Existing joomla setup.
  1. Steps for Hypno - Quick_start Installation:
    1. Find and Unzip the Hypno_Package.zip file and find the Quick_start folder
    2. Upload Quick_start folder on server via FTP or CPanel
    3. Start installation by typing your URL to the directory you have placed Quick_start files. The installation page should be appeared as normal Joomla! installation
      (Ex: localhost/ [directory name] /installation/index.php or domain name/ [directory name] /installation/index.php)

      img


      img Add site name (Ex: Hypno)

      img Add administrator email address

      img Add username (Ex: admin)

      img Add Password (Ex: admin)

      img Repeat Password (Ex: admin)

      img Click next


      img


      img Add server hostname (Ex: localhost)

      img Add username of host

      img Enter password of host

      img Add database name (Ex: hypno)

      imgClick next


      img


      imgSelect Default English (GB) Sample Data and click on Install Sample Data

      img Click Install


      img


      imgRemove installation folder

      img Click Administrator


    4. Login into your administrator panel using username and password you have given (Ex: admin / admin)
    5. Change password with User Manager (Site - User Manager)
    6. We advice you to set all directory permission to 755 and files permission to 644 via Cpanel or FTP

      img

    7. Select jce editor as default editor.

       

      img

    8. You can Set Theme Different Options From Template Manager.

      img

    9. You can view site and see site preview as our demo. There is no images in package so you can change your own images.

      preview


      This link will help you to edit site from front end : http://www.gavick.com/documentation/joomla-templates/customizing-joomla-template/how-to-enabledisable-front-end-module-editing/

      NOTE : For check extensions position and details Click Here.

  2. Steps for Hypno template installation for Existing joomla setup
    1. Download Joomla latest Version From http://www.joomla.org/download.html and Install it.
    2. Unzip the Hypno_Package.zip file and find the hypno.zip in Theme Folder
    3. Login into your joomla administrator panel
    4. install hypno.zip file from Extensions->Extension Manager
    5. installtheme
    6. Make hypno theme as a default template from Extensions-> Template Manager
    7. makedefault
    8. Open Hypno - Default Theme. Change Template Options as per your requirement
    9. themeoptions
    10. View site You will find blank page because there is no extensions and sample data installed in your site.
    11. blankpage
    12. Install all Extensions from Extensions Folder.
    13.      After Install Extension set position according to Step : 9 and Click here for more detail of Extension with screenshots Click Here

    14. Set Extensions According to following positions.
      1. Extra Extensions
        • com_jce.zip : JCE Editor to create joomla articles used in Custom Html
        • plg_system_sl_scrolltotop.zip : This plugin is used to set bottom to top button
        • Breadcrumb : Breadcrumb joomla module in position js-breadcrumb in inner pages.
        • Search : Search joomla module in position js-right in Page with sidebar.
        • Articles Categories (Categories) : Articles Categories joomla module in position js-right in Page with sidebar.
        • About us : About us Custom HTML in position js-right in Page with sidebar.
        • mod_aidanews2.zip (Latest News) : mod_aidanews2.zip module in position js-right in Page with sidebar.
        • mod_topcloud250.zip (Tags) : mod_topcloud250.zip module in position js-right in Page with sidebar.
      2. Home Page Settings (Home Menu)
        • mod_jsmenu.zip : Menu module in position js-menu in All page.
        • mod_js-slideshow.zip : Slideshow module in position js-slideshow in Home page
        • Intro Section : Intro Section Custom HTML in position js-intro in Home page.
        • About Section : About Section Custom HTML in position js-about in Home page.
        • Progress Section : Progress Section Custom HTML in position js-progress in Home page.
        • Process Section : Process Section Custom HTML in position js-process in Home page.
        • Team Section : Team Section Custom HTML in position js-team in Home page.
        • mod_sp_portfolio.zip : mod_sp_portfolio module in position js-homeportfolio in Home page.
        • mod_sp_portfolio.zip : mod_sp_portfolio module in position js-latestnews in Home page.
        • mod_jsfooter.zip : mod_jsfooter module in position js-footer in All page.
      3. Pages Menu Settings
        • Fullwidth Page : Fullwidth Page article from Pages category in Fullwidth Page.
        • Page with sidebar : Page with sidebar article from Pages category in Page with sidebar.
        • 404 Page : 404 Page article from Pages category in 404 Page.
      4. Portfolio Pages Settings
        • Portfolio page : Portfolio page blank article from Portfolio category for refresh Portfolio page.
        • mod_sp_portfolio.zip : mod_sp_portfolio module in position js-portfoliopage in Portfolio page..
        • Single item with slider : Single item with slider article from Portfolio category in Single item with slider.
        • Single item with image : Single item with image article from Portfolio category in Single item with image.
        • Single item with video : Single item with video article from Portfolio category in Single item with video.
      5. Blog Pages Settings
        • Standard view : Standard view category Blog display all articles from Standard view category in Standard view.
        • Masonry view : Masonry view blank article from Blog category for refresh Masonry view.
        • mod_sp_portfolio.zip : mod_sp_portfolio module in position js-masonryview in Masonry view..
        • Post with image : Post with image article from Blog category in Post with image.
        • Post with slider : Post with slider article from Blog category in Post with slider.
        • Post with vimeo : Post with vimeo article from Blog category in Post with vimeo.
        • Post with youtube : Post with youtube article from Blog category in Post with youtube.
        • Post with audio : Post with audio article from Blog category in Post with audio.
        • Post with quote : Post with quote article from Blog category in Post with quote.
      6. Elements Pages Settings
        • Typography : Typography article from Elements category in Typography.
        • Tabs & Toggles : Tabs & Toggles article from Elements category in Tabs & Toggles.
        • Step Boxes : Step Boxes article from Elements category in Step Boxes.
        • Service Boxes : Service Boxes article from Elements category in Service Boxes.
        • Quotes : Quotes article from Elements category in Quotes.
        • Progress bars : Progress bars article from Elements category in Progress bars.
        • Buttons : Buttons article from Elements category in Buttons.
        • Columns : Typography article from Elements category in Columns.
        • Lists : Lists article from Elements category in Lists.
      7. Contact Page Settings
        • How to set Google Map

          Open templates\hypno\js\map.js

          Click Here To Get latitide and longitude : http://www.findlatitudeandlongitude.com

           

          map

           

          contact

           

          Note : If you want to change placeholder texts go to ROOT\components\com_contact\models\forms\contact.xml and change placeholder

          For change button text go to ROOT\language\en-GB\en-GB.com_contact.ini and change content

           


      NOTE: After installation don't forget to Enable them

      NOTE : How to set Extensions Click Here.

E) Extensions Guide - top

    Extra Extensions
  1. com_jce.zip
  2. plg_system_sl_scrolltotop.zip
  3. Breadcrumb
  4. Search
  5. Articles Categories
  6. About us
  7. mod_aidanews2.zip
  8. mod_topcloud250.zip
  9.  

    Home Page Extensions
  10. mod_jsmenu.zip
  11. mod_js-slideshow.zip
  12. mod_sp_portfolio.zip (Home page, position : js-homeportfolio)
  13. mod_sp_portfolio.zip (Home page, position : js-latestnews)
  14. mod_jsfooter.zip
  15.  

    Portfolio Pages Extensions
  16. mod_sp_portfolio.zip (Portfolio page, position : js-portfoliopage)
  17.  

    Blog page Extensions
  18. mod_sp_portfolio.zip (Masonry view page, position : js-masonryview)
  19.  

1) com_jce.zip

An award-winning, configurable WYSIWYG editor for Joomla! based on Moxiecode's TinyMCE.

Includes advanced Image/Media, File and Link handling, plugin support, and an Administration interface for editor configuration.

You must have to select Default Editor : JCE Editor from Global Configuration

You can find com_jce.zip in Extensions Folder


 

Go to Components -> JCE Editor

 

jceeditor

 

check this link : http://joomlahosting.com/extensions/jce-bootstrap-stopping-i-to-em-replacements/


You can see JCE editor while creating article


jceeditor

Click Here To Download : Download

 

 

2) plg_system_sl_scrolltotop.zip

Skyline Scroll to Top is a system plugin of Joomla 2.5+. It adds a 'Scroll to Top' link which appears when the user scrolls down, and disappears when users reach the top of the page into your website..

You can find plg_system_sl_scrolltotop.zip in Extensions Folder

 

Go to Plugin Manager and find System - Skyline Scroll To Top

 

scrolltotop

 

You can see in demo


scrolltotop_out

 

Click Here To Download : Download

 

 

Breadcrumbs Module is used to display current page root at bottom of menu

create new module and select Breadcrumbs

 

breadcrumbs

Select position : js-breadcrumb

 

You can see on inner pages bellow menu in demo


breadcrumbs

 

 

Joomla Search module is used to search contents from site. You can see right side in Page with sidebar page.

create new module and select Search

 

search

Select position : js-right

Module Class Suffix : search-widget widget wow fadeInRight

 

You can see on right side demo in Page with sidebar page


search

 

 

5) Articles Categories

Joomla Articles Categories module is used to display articles from category. You can see right side in Page with sidebar page.

create new module and select Articles Categories

 

ArticlesCategories

Select position : js-right

Module Class Suffix : categories-widget widget wow fadeInRight

 

You can see on right side demo in Page with sidebar page


ArticlesCategories_out

 

 

6) About us (Custom Html)

Joomla Custom HTML module is used to add custom html. You can see right side in Page with sidebar page.

create new module and select Custom HTML

 

Aboutus

Select position : js-right

Module Class Suffix : text-widget widget wow fadeInRight

 

You can see on right side demo in Page with sidebar page


Aboutus_out

 

 

7) mod_aidanews2.zip

Aidanews Module that lets everyone, from experts to novice webmasters, show their articles in an appealing and higly-customisable way.

Aidanews Module is used to display Latest articles


You can find mod_aidanews2.zip in Extensions.zip

 

Go to Module Manager and find Latest news in position js-right

 

aidanews

Select position : js-right

Module Class Suffix : latest-news widget wow fadeInRight

You can see on right side demo in Page with sidebar page


latestnews

Click Here To Download : Download

 

 

8) mod_topcloud250.zip

TopCloud is an alternate front end for the Joomla search component. There are several categories which match the output for Joomla search.


You can find mod_topcloud250.zip in Extensions Folder

 

Go to Module Manager and find Tags in position js-right

 

topcloud

Select position : js-right

Module Class Suffix : tars-widget widget wow fadeInRight

 

You can see on right side demo in Page with sidebar page



topcloud_out

 

Click Here To Download : Download

 

 

9) mod_jsmenu.zip

JS menu is responsive joomla module which fits well in web, tablets and mobiles without any additional options and Nth level dropdown.

You can find mod_jsmenu.zip in Extensions Folder

 

Go to Module Manager and find English-Menu in position js-menu

 

jsmenu

 

Select position : js-menu

 

You can see Home Page in demo


jsmenu_out

 

 

10) mod_js-slideshow.zip

You can find mod_js-slideshow.zip in Extensions Folder

 

Go to Module Manager and find Js-Slideshow in position js-slideshow

 

slideshow

 

Select position : js-slideshow

 

You can see Slideshow in demo


slideshow_out

 

 

11) mod_sp_portfolio.zip (Home page, position : js-homeportfolio)

SP Portfolio is an extension for Joomla! that helps users create a portfolio easily.

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.


You can find mod_sp_portfolio.zip in Extensions Folder


First you have to create category to set portfolio


category

Then you have to create articles in category


article

Go to Module Manager and find Home Portfolio in position js-homeportfolio

 

portfolio

Select position : js-homeportfolio

You can see Home Page in demo


portfolio_out

 

Note : Dynamic file generation code and output comes from templates\hypno\html\mod_sp_portfolio\homeportfolio.php

 

Click Here To Download : Download

 

 

12) mod_sp_portfolio.zip (Home page, position : js-latestnews)

SP Portfolio is an extension for Joomla! that helps users create a portfolio easily.

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.


You can find mod_sp_portfolio.zip in Extensions Folder


First you have to create category to set portfolio


category

Then you have to create articles in category


article

Go to Module Manager and find Latest News in position js-latestnews

 

news

Select position : js-latestnews

You can see Home Page in demo


newsportfolio_out

 

Note : output comes from templates\hypno\html\mod_sp_portfolio\latestnews.php

 

Click Here To Download : Download

 

 

13) mod_jsfooter.zip

It is used to display Social links, Your site logo image and copyright text.

You can set it from Template Options

You can find mod_jsfooter.zip in Extensions Folder

 

Go to Module Manager and find Footer Information in position js-footer

 

mod_jsfooter

 

You can change module details from template options

 

mod_jsfooter

 

Select position : js-footer

 

You can see Home page in demo


mod_jsfooter_out

 

 

14) mod_sp_portfolio.zip (Portfolio page, position : js-portfoliopage)

SP Portfolio is an extension for Joomla! that helps users create a portfolio easily.

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.


You can find mod_sp_portfolio.zip in Extensions Folder


Go to Module Manager and find Portfolio page in position js-portfoliopage

 

portfolio

Select position : js-portfoliopage

You can see Portfolio page in demo


portportfolio_out

 

Note : Dynamic file generation code and output comes from templates\hypno\html\mod_sp_portfolio\portfoliopage.php

 

Click Here To Download : Download

 

 

15) mod_sp_portfolio.zip (Masonry view page, position : js-masonryview)

SP Portfolio is an extension for Joomla! that helps users create a portfolio easily.

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.


You can find mod_sp_portfolio.zip in Extensions Folder


Go to Module Manager and find Masonry View in position js-masonryview

 

portfolio

Select position : js-portfoliopage

You can see Masonry view page in demo


blogportfolio_out

 

Note : output comes from templates\hypno\html\mod_sp_portfolio\masonryview.php

 

Click Here To Download : Download

 

 

F) HTML Structure - top

Hypno template is based on popular Bootstrap 3 framework.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.

Content should be placed within columns, and only columns may be immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

For example, in order to create 3 * 1/3 columns row, you would use the following html maukup:

<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> </div>

You can view full Bootstrap grid documentation here.



G) How to Edit jQuery Files? - top

We used some great jQuery plugins for this template. All our plugins has been added from script.js and single page templates file from template folder. If you want to edit some single pages or just you want to edit script.js please open it a text editor like Dreamweaver, Notepad or Notepad++ and edit any lines what you want.

Please check custom plugins from templates/hypno/js/script.js file.



H) Shortcodes - top

H.1) Buttons - top

<a href="#" class="button transparent">Read More</a> <a href="#" class="button transparent small">Read More</a> <a href="#" class="button darkgrey">Read More</a> <a href="#" class="button darkgrey small">Read More</a> <a href="#" class="button color">Read More</a> <a href="#" class="button color small">Read More</a> <a href="#" class="button transparent shopping">Read More</a> <a href="#" class="button transparent shopping small">Read More</a> <a href="#" class="button darkgrey shopping">Read More</a> <a href="#" class="button darkgrey shopping small">Read More</a> <a href="#" class="button color shopping">Read More</a> <a href="#" class="button color shopping small">Read More</a> <a href="#" class="button transparent arrow">Read More</a> <a href="#" class="button transparent arrow small">Read More</a> <a href="#" class="button darkgrey arrow">Read More</a> <a href="#" class="button darkgrey arrow small">Read More</a> <a href="#" class="button color arrow">Read More</a> <a href="#" class="button color arrow small">Read More</a> <a href="#" class="button transparent resize">Read More</a> <a href="#" class="button transparent resize small">Read More</a> <a href="#" class="button darkgrey resize">Read More</a> <a href="#" class="button darkgrey resize small">Read More</a> <a href="#" class="button color resize">Read More</a> <a href="#" class="button color resize small">Read More</a> <a href="#" class="button transparent forward">Read More</a> <a href="#" class="button transparent forward small">Read More</a> <a href="#" class="button darkgrey forward">Read More</a> <a href="#" class="button darkgrey forward small">Read More</a> <a href="#" class="button color forward">Read More</a> <a href="#" class="button color forward small">Read More</a> <a href="#" class="button transparent check">Read More</a> <a href="#" class="button transparent check small">Read More</a> <a href="#" class="button darkgrey check">Read More</a> <a href="#" class="button darkgrey check small">Read More</a> <a href="#" class="button color check">Read More</a> <a href="#" class="button color check small">Read More</a>

H.2) Columns - top

<div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>

H.3) Lists - top

<ul class="bullet-list"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list circlearrow"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list arrow"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list chevron"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list check"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list check-circle"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list check-square"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list xclose"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list forward"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list toggles"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list times"> <li> list item </li> <li> list item </li> </ul> <ul class="item-list play"> <li> list item </li> <li> list item </li> </ul>

H.4) Progress bars - top

<div class="col-md-4 sm-centered"> <div class="row progress-bar"> <div class="col-md-5"> <div class="skill-chart"> <div class="chart" data-percent="93"> <h1>93%</h1> </div> </div> </div> <div class="col-md-7 progress-description"> <h3>photoshop</h3> <span>Designing Skill</span> <p> Proin pellentesque in mi quis pellentesque. <strong>Phasellus posuere elit risus</strong> </p> </div> </div> </div> <div class="col-md-4 sm-centered"> <div class="row progress-bar"> <div class="col-md-5"> <div class="skill-chart"> <div class="chart-dark" data-percent="93"> <h1>93%</h1> </div> </div> </div> <div class="col-md-7 progress-description"> <h3>photoshop</h3> <span>Designing Skill</span> <p> Proin pellentesque in mi quis pellentesque. <strong>Phasellus posuere elit risus</strong> </p> </div> </div> </div>

H.5) Quotes - top

<blockquote> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="blockquote-dark"> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="quote-bg-color"> <p>quote</p> <footer> Someone famous </footer>> </blockquote> <blockquote class="blockquote-dark quote-bg-color"> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="blockquote-reverse"> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="blockquote-reverse dark"> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="blockquote-reverse quote-bg-color"> <p>quote</p> <footer> Someone famous </footer> </blockquote> <blockquote class="blockquote-reverse dark quote-bg-color"> <p>quote</p> <footer> Someone famous </footer> </blockquote>

H.6) Service Boxes - top

<div class="col-md-4 service"> <div class="row padding-bottom-30"> <div class="col-md-3 col-sm-3 col-xs-3"> <div class="service-icon"> <i class="fa fa-align-center"></i> </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <h3 class="padding-bottom-30">Responsive Design</h3> <p>content</p> </div> </div> </div> <div class="col-md-4 service4"> <div class="row padding-bottom-30"> <div class="col-md-3 col-sm-3 col-xs-3"> <div class="service-icon"> <i class="fa fa-align-center"></i> </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <h3 class="padding-bottom-30">Responsive Design</h3> <p>content</p> </div> </div> </div> <div class="col-md-4 service2"> <div class="row padding-bottom-30"> <div class="col-md-12 col-sm-12 col-xs-12 padding-bottom-30"> <div class="service-icon"> <i class="fa fa-align-center"></i> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <h3 class="padding-bottom-30">Responsive Design</h3> <p>content</p> </div> </div> </div> <div class="col-md-4 service3"> <div class="row padding-bottom-30"> <div class="col-md-12 col-sm-12 col-xs-12 padding-bottom-30"> <div class="service-icon"> <i class="fa fa-check-circle"></i> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12"> <h3 class="padding-bottom-30">Clean Code</h3> <p>content</p> </div> </div> </div>

H.7) Step Boxes - top

<div class="steps"> <div class="step padding-bottom-30"> <div class="step-icon"> <i class="fa fa-heart"></i> </div> <div class="step-description"> <b>It all starts here</b> </div> </div> <div class="step padding-bottom-30"> <div class="step-icon"> <i class="fa fa-lightbulb-o"></i> </div> <div class="step-description"> <b>Idea is born</b> </div> </div> <div class="step padding-bottom-30"> <div class="step-icon"> <i class="fa fa-comments"></i> </div> <div class="step-description"> <b>Plans are made</b> </div> </div> </div> <div class="steps"> <div class="step-dark padding-bottom-30"> <div class="step-icon"> <i class="fa fa-heart"></i> </div> <div class="step-description"> <b>It all starts here</b> </div> </div> <div class="step-dark padding-bottom-30"> <div class="step-icon"> <i class="fa fa-lightbulb-o"></i> </div> <div class="step-description"> <b>Idea is born</b> </div> </div> <div class="step-dark padding-bottom-30"> <div class="step-icon"> <i class="fa fa-comments"></i> </div> <div class="step-description"> <b>Plans are made</b> </div> </div> </div>

You can use variety any of Fontawesome icons for this shortcode, by simply replacing fa-comments with your icon code. Full list of icons alond with their codes avaliable in FontAwesome Cheatsheet


H.8) Tabs & Toggles - top

<!-- Nav tabs --> <ul class="nav nav-tabs dark" role="tablist"> <li class="active"> <a href="#home" role="tab" data-toggle="tab">Home</a> </li> <li> <a href="#messages" role="tab" data-toggle="tab">Messages</a> </li> <li> <a href="#settings" role="tab" data-toggle="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>content</p> </div> <div class="tab-pane fade" id="messages"> <p>content</p> </div> <div class="tab-pane fade" id="settings"> <p>content</p> </div> </div>
<div class="panel-group" id="accordion"> <div class="panel panel-default dark"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group <span class="thin">Item #1</span> </a></h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <p>content</p> </div> </div> </div> <div class="panel panel-default dark"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group <span class="thin">Item #2</span> </a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>content</p> </div> </div> </div> <div class="panel panel-default dark"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group <span class="thin">Item #3</span> </a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>content</p> </div> </div> </div> </div>

H.9) Typography - top

<h1>Heading 1 <span class="thin">Heading 1</span></h1> <h2>Heading 2 <span class="thin">Heading 2</span></h2> <h3>Heading 3 <span class="thin">Heading 3</span></h3> <h4>Heading 4 <span class="thin">Heading 4</span></h4> <h5>Heading 5 <span class="thin">Heading 5</span></h5> <h6>Heading 6 <span class="thin">Heading 6</span></h6> <strong>This is a bolded text</strong> <span class="colored">text with colored background</span> <strong><span data-toggle="tooltip" data-placement="top" title="Tooltip Text">text with tooltip</span></strong> <span class="highlight">This is highlighted text</span> <span class="colored-dark">another colored background</span> <small>This is a small line.</small> <i class="italic">this is italic text</i> <u>this is underlined text</u> <s>This line of text is meant to be treated as no longer accurate.</s>

I) Animations usage - top

Hypno Template utilized Wow animations script along with animate.css tool. In order to animate any element, simply add an animation class to it - the animation will begin once the page is scrolled to animated element.

Animation class contains of 2 parts:
1. "wow"
2. animation effect name, fox example "fadeIn"

<p class="wow fadeIn">This test block will fade in once page is scrolled to this point.</p> Click here to see all avaliable animation classes along with examples.


J) Credits - top

Please note that images are used for demo porposes only and are not included with the design.


K) Version History - top

You can find the version history (changelog.txt) file on Hypno_Pachage.zip



Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented.

If you are satisfied with "Hypno - Modern, Responsive Joomla Template" please go to your downloads section on ThemeForest.net and rate Hypno with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy Hypno as much as I've enjoyed designing this template.

 

Kind Regards,
Joomlastars team

 

Go To Table of Contents


top