1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Config Template
  5. Layouts and Module Positions
  6. CSS Files and structure
  7. Create Pages
  8. Home Page
  9. Home Spa
  10. Classer
  11. Trainer
  12. News
  13. Gallery
  14. Contact
  15. About
  16. Plugins
  17. Typography & Short code
  18. Com TZ Portfolio
  19. Update version 1.1
  20. Source and Credits

Fitness version 1.0 Template

Documentation 1.0


Thank you for use my theme. If you have any questions that are beyond the scope of this help file, please feel free to post it on out forum here. Thanks so much!This documentation was made only with the Documenter (except the images)

Quickstart Installation


Quickstart = Joomla + Fitness Template + Demo Content. After installation you'll see complete site like a Demo Site. So, if you're running for new website, I do urge to install using the quickstart file. But, If you've already had a joomla website with your own content, you could install only the Template to keep your own data

Installing Quickstart package is quite easy as you install normal joomla!. Please follow these steps:

  1. You will have 2 options:
    • Upload the quickstart.zip file to your host and extract it using cPanel or other File Manager Tools if possible.
    • If the option above unavailable, you can extract the quickstart.zip file on your computer, and upload all files to your host using FTP client program such as filezilla.
  2. Start installation by typing your URL to the directory you have placed quickstart files. The installation page should be appeared as normal Joomla! installation.

  3. Complete Install


    Complete Install


    Complete Install


    Complete Install


    You're now in the end of installation process, and then you must now directly remove the installation folder.
    But, Sometimes this process could not write to the configuration.php file. So you should have this below image, and follow the instruction to copy the content of the box to your configuration.php file


  4. Login into your administrator panel using "admin" as username and using a your password.

Please make sure your server suppoorts MySQLi Database. And if you're unsuccessful following the steps above, you could please PM me, I will send you the website files and SQL separatedly

Setup manual Fitness.

Step1: Install Fitness template and config it.

Step2: Install TZ Portfolio Component and read to Config it

Step3: Install all modules in modules folder and create, config it in each page

Template Installation


Installation Fitness Template is easy and quick.

Install this like a standard Joomla extensions (Extensions - Install/Unistall). Afterwards you can install Fitness Template. Please go to: Extensions Manager Find package_template.zip file on your computer browser and click "Upload and Install". Next go to: Extensions Manager - Template Manager choose tz_Fitness_joomla - Default and click "Make Default". Refresh your site.

make default theme


make default theme

You install all extensions in package file and create your content and setup each page

Config Template


Go to template manage choose template default


Config Template default

You can change color of template in template options/ Theme color

Create new profile for menu item

Example: create profile for home page

Step 1: Click save/save as copy

Step 2: Rename profile to Home

Step 3: Add custom css for home page

        #main-body, .item-page, #tz-component{            padding:0 !important;        }    

Step 4: Assign for menu item


Layouts and Module Positions


Modules Position

Please follow these below steps to know all module positions are used in this templates:

  1. Login to the administration area
  2. Please go to template manager and click option
  3. You would have pop up box with two tabs, 1st one is template and 2nd one is permission, You should choose templates tab
  4. then click enabled Preview Module Positions, and then click save and close
  5. Please make sure, you have enabled "Enable Template Information" in global tab of template parameter

    module positions

    module positions

  6. Afterwards, you go to your site and call your site like this http://yourlivesite.com/?tp=1 then you’ll have all information about module position that is used in this template. Then will see your website like this image below:

If layout builder is enable in template options.

You can go to template manager and click Layout tab in template options to view or edit block, position...

You can config layout and module position in template options

module positions

CSS Files and structure


We separated css file to make this template user friendly. We have several main css file :

Modules in Home page

Home page

  1. Module: Phone

    • Module type: Custom HTML
    • Module Position: top1
    • Module Class Suffix: pull-left
    • Module content:
                          <p><i class="fa fa-phone hidden-phone"> </i>Hotline : 0123456789</p>                
  2. Module: Search

    • Module type: Search
    • Module Position: top1
    • Module config:

  3. Module: Social

    • Module type: TZ Social Custom
    • Module Position: top2
    • Module class suffix: hidden-phone hiden-tablet
    • Module config:

  4. Module: Logo

    • Module type: Custom HTML
    • Module Position: logo
    • Module content:
                          <p><a href="index.php"><img src="images/logo.png" alt="" /></a></p>                
  5. Main Menu

    YOu can go to Template Options and config Mega menu.

  6. Module: Dropdown

    • Module Type : Mod Tz Custom HTML
    • Module Position : feature
    • Module Alternative Layout : dropdown
    • Module Class Suffix : hidden-phone hidden-tablet

    This is Module config

    You can change text "Opening hours" and button icon in en-GB.mod_tz_customs.ini file path(language\en-GB\en-GB.mod_tz_customs.ini)

    We use font icon from http://fortawesome.github.io/Font-Awesome/icons/ you can find and change it.

  7. Module: FlexSlider

    Module FlexSlider get images from articles of "Slideshow" category.
    You can go to Components/TZ Portfolio/articles and select articles from "Slideshow" category to change image, title, tags.

    • Module Type :TZ Multi Slideshow
    • Module Position : feature
    • Module Alternative Layout : Flexslider

    Create module:

    1. Config this module

  8. Module: Event

    Module Event get data from articles of "Event" category in TZ Portfolio component
    You can go to Components/TZ Portfolio/articles and select articles from "Event" category to change image, title, introtext.

    • Module Type : TZ News Pro
    • Module Position : spotlight
    • Module Class Suffix:event
    • Module Alternative Layout: slider

    Create module:

    1. Config this module

  9. Module: Blog Module

    Module Blog Module get data from articles of "Blog" category in TZ Portfolio component
    You can go to Components/TZ Portfolio/articles and select articles from "Blog" category to change content.

    • Module Type : TZ News Pro
    • Module Position : spotlight
    • Module Alternative Layout: carousel

    Create module:

    1. Config this module

  10. Module: Latest News

    Module Latest News get latest articles of "BLog" category in TZ Portfolio component
    You can go to Components/TZ Portfolio/articles and select articles from "Blog" category to change content.

    • Module Type : TZ News Pro
    • Module Position : user1
    • Module Alternative Layout: default

    Create module:

    1. Config this module

  11. Module: Our Trainer

    Module Our Trainer get articles from "Trainers" category in TZ Portfolio component
    You can go to Components/TZ Portfolio/articles and select articles from "Trainers" category to change content.

    • Module Type : TZ News Pro
    • Module Position : user2
    • Module Alternative Layout: vertical

    Create module:

    1. Config this module

  12. Module: Guest

    • Module Type : TZ Service
    • Module Position : botsl
    • Module Class Suffix:guest

    Create module:

    1. Config this module

  13. Module: Our Partners

    • Module Type : Mod Tz Custom HTML
    • Module Position : bottom
    • Module Alternative Layout:paralax

    Create module:

    1. Config this module

  14. Module: Google Maps

    • Module Type : BT Google Maps
    • Module Position : bottom1

    Create module:

    1. Step1: Install mod_bt_googlemaps.zip module
    2. Step2: Config this module

  15. Module: Contact

    • Module Type : Custom HTML
    • Module Position : bottom2
    • Module Class Suffix :contact

    Content module

  16. Module: newsletter signup

    • Module Type : Custom HTML
    • Module Position : bottom3

    Content module

                    <div class="newsletter">                    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">                        <input class="inputbox " name="email" type="text" value="Your Email" />                        <input name="uri" type="hidden" value="templaza/blog" />                        <input name="loc" type="hidden" value="en_US" />                        <input class="subcription_btn " type="submit" value="Send" />                    </form>                </div>            
  17. Module: Copyright

    • Module Type : Custom HTML
    • Module Position : footer1

    Content module

  18. Module: To Top

    • Module Type : Custom HTML
    • Module Position : footer2
    • Content module:

      Source code

                          <div class="totop">                        <a id="tz-totop" href="#">Top </a>                        <img src="images/totop.png" alt="" />                    </div>                

Modules in Home page

  1. Module: Slide Spa

    Module Slide Spa get images from articles of "Spa" category.
    You can go to Components/TZ Portfolio/articles and select articles from "Spa" category to change image, title, tags.

    • Module Type :TZ Multi Slideshow
    • Module Position : feature
    • Module Alternative Layout : Flexslider2

    Create module:

    1. Config this module

  2. Module: Feature

    • Module Type : Custom HTML
    • Module Position : feature
    • Module Class Suffix :feature
    • Content module

      Content code module:
                          <div class="container">                        <p class="color_glb">Youth is happy because it has the capacity to see beauty. Anyone who keeps the ability to see beauty never grows old</p>                    </div>                
  3. Module: Our Services

    • Module Type : Custom HTML
    • Module Position : feature
    • Module Alternative Layout: slide/li>
    • Module Class Suffix :oursevices
    • Config module:

  4. Module: Recent News

    • Module Type : TZ News Pro
    • Module Position : user1
    • Module Alternative Layout: defaultSpa

    Create module:

    1. Config this module

  5. Module: latest tweets

    • Module Type : Mod TZ Twitter Widget
    • Module Position : user2
    • Config module:

  6. Module: Working Hours

    • Module Type : GCalendar Overviewt
    • Module Position : user2
    • Config module:

Create Course page


You go to menu manager and create "Course" menu item type (Portfolio/portfolio) and in options you can choose show article from one or more category

Module in Course page

  1. Module: Header Course

    • Module Type :Custom HTML
    • Module Position : feature
    • Module Class Suffix :header
  2. Module: Course title

    • Module Type :Custom HTML
    • Module Position : feature
    • Module Class Suffix :heading
    • Config:

      Content:
                              <h1 class="page-heading">Classer</h1>                    

Create Trainer page


You go to menu manager and create "Trainer" menu item type (Portfolio/portfolio) and in options you can choose show article from one or more category

and in param menu item "Page Display" you input Page Class: trainer

Module in Trainer page

  1. Module: Header Trainer

    You can create and config same as Header Classer module
    • Module Type :Custom HTML
    • Module Position : feature
    • Module Class Suffix :header
  2. Module: Title Trainers

    You can create and config same as Title Classer module
    • Module Type :Custom HTML
    • Module Position : feature
    • Module Class Suffix :heading
    • Content:
                              <h1 class="page-heading">Classer</h1>                    

Create News page


You go to menu manager and create "News" menu item type (Portfolio/Category Blog) and in options you can choose show article from category

Module in News page

  1. Module: Most Popular

    Module Most Popular get data from articles of "Blog" category.
    You can go to Components/TZ Portfolio/articles and select articles from "Blog" category to change image, title.

    • Module Type : TZ News Pro
    • Module Position : right
    • Module Class Suffix : module-first
    • Module Alternative Layout: defaultbox
    1. Config this module

  2. Module: Tag cloud

    • Module Type : Tz Tags
    • Module Position : right
    • Config this module

Create Contact page


You go to Components/Contact and create your contact

And You go to menu/mainmenu/ create menu type contact/single contact

This is contact infomation (components/contact/templaza)

Module in Contact page

  1. Module: Map

    • Module Type : Mod Tz Custom HTML
    • Module Position : bottspotlight
    • Module Alternative Layout: lightbox
    • Config this module

Create About page


And You go to menu/mainmenu/ create menu type article/feature article

Module in About page

  1. Module: Quote

    • Module Type : Mod Tz Custom HTML
    • Module Position : topsl1
    • Module Alternative Layout: quote
    • Config this module

  2. Module: About

    • Module Type : TZ Services
    • Module Position : topsl2
    • Module Alternative Layout: scroll
    • Config this module

Plugins


On this section, I wouldn't explain all used plugin on this template. I would only remind about the plugins listed below should be enabled

Or you might be interested in more functionality of Editor - TinyMCE plugin, you could set its functionality into extended

Typography & Short code



Code columns

<div class="row-fluid">    <div class="span12">        <h2>1/1</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the "promontory of the Treaty" and the river. Here, as at Hong Kong and Calcutta, were mixed crowds of all races, Americans and English, Chinamen and Dutchmen, mostly merchants ready to buy or sell anything. The Frenchman felt himself as much alone among them as if he had dropped down in the midst of Hottentots. He had, at least, one resource to call on the French and English consuls at Yokohama for assistance. But he shrank from telling the story of his adventures, intimately connected as it was with that of his master; and, before doing so, he determined to exhaust all other means of aid. As chance did not favour him in the European quarter, he penetrated that inhabited by the native Japanese, determined, if necessary, to push on to Yeddo. The Japanese quarter of Yokohama is called Benten, after the goddess of the sea, who is worshipped on the islands round about. There Passepartout beheld beautiful fir and cedar groves, sacred gates of a singular architecture, bridges half hid in the midst of bamboos and reeds, temples shaded by immense cedar-trees.</p>    </div></div><div class="row-fluid">    <div class="span6">        <h2>1/2</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the</p>    </div>    <div class="span6">        <h2>1/2</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the</p>    </div></div><div class="row-fluid">    <div class="span4">        <h2>1/3</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas.</p>    </div>    <div class="span4">        <h2>1/3</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas.</p>    </div>    <div class="span4">        <h2>1/3</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas.</p>    </div></div><div class="row-fluid">    <div class="span3">        <h2>1/4</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter.</p>    </div>    <div class="span3">        <h2>1/4</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter.</p>    </div>    <div class="span3">        <h2>1/4</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter.</p>    </div>    <div class="span3">        <h2>1/4</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter.</p>    </div></div><div class="row-fluid">    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div>    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div>    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div>    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div>    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div>    <div class="span2">        <h2>1/6</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama.</p>    </div></div><div class="row-fluid">    <div class="span8">        <h2>2/3</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the "promontory of the Treaty" and the river. Here, as at Hong Kong and Calcutta, were mixed crowds of all races, Americans and English,</p>    </div>    <div class="span4">        <h2>1/3</h2>        <p>He had nothing better to do than, taking chance for his guide, to wander aimlessly through the streets of Yokohama. He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas,</p>    </div></div><div class="row-fluid">    <div class="span9">        <h2>3/4</h2>        <p>He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the "promontory of the Treaty" and the river. Here, as at Hong Kong and Calcutta, were mixed crowds of all races, Americans and English, Chinamen and Dutchmen, mostly merchants ready to buy or sell anything. The Frenchman felt himself as much alone among them as if he had dropped down in the midst of Hottentots.</p>    </div>    <div class="span3">        <h2>1/4</h2>        <p>He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat</p>    </div></div><div class="row-fluid">    <div class="span9">        <h2>5/6</h2>        <p>He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat peristyles. This quarter occupied, with its streets, squares, docks, and warehouses, all the space between the "promontory of the Treaty" and the river. Here, as at Hong Kong and Calcutta, were mixed crowds of all races, Americans and English, Chinamen and Dutchmen, mostly merchants ready to buy or sell anything. The Frenchman felt himself as much alone among them as if he had dropped down in the midst of Hottentots.</p>    </div>    <div class="span3">        <h2>1/6</h2>        <p>He found himself at first in a thoroughly European quarter, the houses having low fronts, and being adorned with verandas, beneath which he caught glimpses of neat</p>    </div></div>    

Accordion

Code Accordion

<div id="accordion2" class="accordion">    <div class="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Collapsible Group Item #1 </a></div>        <div id="collapseOne" class="accordion-body collapse" style="height: 0px;"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"> Collapsible Group Item #2 </a></div>        <div id="collapseTwo" class="accordion-body collapse"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"> Collapsible Group Item #3 </a></div>        <div id="collapseThree" class="accordion-body collapse"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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><p> </p><div id="accordion-color" class="accordion accordion-color">    <div class="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapse1" data-toggle="collapse" data-parent="#accordion-color"> Collapsible Group Item #1 </a></div>        <div id="collapse1" class="accordion-body collapse" style="height: 0px;"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapse2" data-toggle="collapse" data-parent="#accordion-color"> Collapsible Group Item #2 </a></div>        <div id="collapse2" class="accordion-body collapse"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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="accordion-group">        <div class="accordion-heading"><a class="accordion-toggle collapsed" href="#collapse3" data-toggle="collapse" data-parent="#accordion-color"> Collapsible Group Item #3 </a></div>        <div id="collapse3" class="accordion-body collapse"><em class="icon-plus one"><label>one</label></em> <em class="icon-minus two"><label>two</label></em>            <div class="accordion-inner">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>    

Button

Code Button

<div class="btn-demo">    <div class="row-fluid">        <div class="span6">            <h2>small</h2>            <a class="btn btn-small bg-none" href="#">normal</a> <a class="btn btn-small " href="#">normal</a> <a class="btn btn-small bg-pink" href="#">normal</a> <a class="btn btn-small bg-orange" href="#">normal</a> <a class="btn btn-small bg-green" href="#">normal</a> <a class="btn btn-small bg-blue" href="#">normal</a> <a class="btn btn-small bg-cyan" href="#">normal</a> <a class="btn btn-small bg-red" href="#">normal</a> <br />            <h2>Medium</h2>            <a class="btn bg-none" href="#">normal</a> <a class="btn " href="#">normal</a> <a class="btn bg-pink" href="#">normal</a> <a class="btn bg-orange" href="#">normal</a> <a class="btn bg-green" href="#">normal</a> <a class="btn bg-blue" href="#">normal</a> <a class="btn bg-cyan" href="#">normal</a> <a class="btn bg-red" href="#">normal</a></div>        <div class="span6">            <h2>Large</h2>            <a class="btn btn-large bg-none" href="#">normal</a> <a class="btn btn-large " href="#">normal</a> <a class="btn btn-large bg-pink" href="#">normal</a> <a class="btn btn-large bg-orange" href="#">normal</a> <a class="btn btn-large bg-green" href="#">normal</a> <a class="btn btn-large bg-blue" href="#">normal</a> <a class="btn btn-large bg-cyan" href="#">normal</a> <a class="btn btn-large bg-red" href="#">normal</a></div>    </div></div>    


Price Table

Code Price Table

<div class="row-fluid">    <div class="span3">        <ul class="tz-price-table">            <li class="head bg_global">standart</li>            <li class="price"><label>$</label>19                <p>Perfect for freelancers</p>            </li>            <li><i class="fa fa-sun-o"> </i>1 WordPress Install</li>            <li><i class="fa fa-star">  </i>25,000 visits / month</li>            <li><i class="fa fa-dashboard">  </i>Unlimited Data Transfer</li>            <li><i class="fa fa-upload">  </i>10GB Local Storage</li>            <li class="price-btn"><a class="btn" href="#">Get Plan </a></li>        </ul>    </div>    <div class="span3">        <ul class="tz-price-table price-special">            <li class="head bg_global">professional</li>            <li class="price bg_global"><label>$</label>129                <p>For established business</p>            </li>            <li><i class="fa fa-sun-o"> </i>1 WordPress Install</li>            <li><i class="fa fa-star">  </i>25,000 visits / month</li>            <li><i class="fa fa-dashboard">  </i>Unlimited Data Transfer</li>            <li><i class="fa fa-upload">  </i>10GB Local Storage</li>            <li class="price-btn"><a class="btn" href="#">Get Plan </a></li>        </ul>    </div>    <div class="span3">        <ul class="tz-price-table">            <li class="head bg_global">professional</li>            <li class="price"><label>$</label>29                <p>Perfect for freelancers</p>            </li>            <li><i class="fa fa-sun-o"> </i>1 WordPress Install</li>            <li><i class="fa fa-star">  </i>25,000 visits / month</li>            <li><i class="fa fa-dashboard">  </i>Unlimited Data Transfer</li>            <li><i class="fa fa-upload">  </i>10GB Local Storage</li>            <li class="price-btn"><a class="btn" href="#">Get Plan </a></li>        </ul>    </div>    <div class="span3">        <ul class="tz-price-table">            <li class="head bg_global">professional</li>            <li class="price"><label>$</label>29                <p>Perfect for freelancers</p>            </li>            <li><i class="fa fa-sun-o"> </i>1 WordPress Install</li>            <li><i class="fa fa-star">  </i>25,000 visits / month</li>            <li><i class="fa fa-dashboard">  </i>Unlimited Data Transfer</li>            <li><i class="fa fa-upload">  </i>10GB Local Storage</li>            <li class="price-btn"><a class="btn" href="#">Get Plan </a></li>        </ul>    </div></div><p> </p><div class="price-table-style2">    <ul class="tz-price-table table-title col25">        <li class="head bg_global">Chose your product</li>        <li>Space amount</li>        <li>Bandwidth</li>        <li>E-mail accounts</li>        <li>MySQL databases</li>        <li>Custom domains</li>        <li>Support</li>        <li class="price-btn"></li>    </ul>    <ul class="tz-price-table col15">        <li class="head bg_global">Standard</li>        <li class="price bg_global">29<label class="unit">$</label>            <p>per month</p>        </li>        <li>10GB</li>        <li>100GB</li>        <li>3</li>        <li>1</li>        <li><i class="fa fa-plus">  </i></li>        <li>Basic</li>        <li class="price-btn"><a class="btn btn-small">sign in</a></li>    </ul>    <ul class="tz-price-table col15">        <li class="head bg_global">Standard</li>        <li class="price bg_global">29<label class="unit">$</label>            <p>per month</p>        </li>        <li>10GB</li>        <li>100GB</li>        <li>3</li>        <li>1</li>        <li><i class="fa fa-plus">  </i></li>        <li>Basic</li>        <li class="price-btn"><a class="btn btn-small">sign in</a></li>    </ul>    <ul class="tz-price-table col15 price-special bg_global">        <li class="head bg_global">Standard</li>        <li class="price bg_global">29<label class="unit">$</label>            <p>per month</p>        </li>        <li>10GB</li>        <li>100GB</li>        <li>3</li>        <li>1</li>        <li><i class="fa fa-check"> </i></li>        <li>Basic</li>        <li class="price-btn"><a class="btn btn-small">sign in</a></li>    </ul>    <ul class="tz-price-table col15">        <li class="head bg_global">Standard</li>        <li class="price bg_global">29<label class="unit">$</label>            <p>per month</p>        </li>        <li>10GB</li>        <li>100GB</li>        <li>3</li>        <li>1</li>        <li><i class="fa fa-plus">  </i></li>        <li>Basic</li>        <li class="price-btn"><a class="btn btn-small">sign in</a></li>    </ul>    <ul class="tz-price-table col15">        <li class="head bg_global">Standard</li>        <li class="price bg_global">29<label class="unit">$</label>            <p>per month</p>        </li>        <li>10GB</li>        <li>100GB</li>        <li>3</li>        <li>1</li>        <li><i class="fa fa-plus">  </i></li>        <li>Basic</li>        <li class="price-btn"><a class="btn btn-small">sign in</a></li>    </ul>    <div class="clr"> </div></div>    

Progress

Code Progress

<div class="btn-progress">    <div class="row-fluid">        <div class="span6">            <h2>default</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar" style="width: 70%;"> </div>            </div>            <h2>red</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-red" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-red" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-red" style="width: 70%;"> </div>            </div>            <h2>orange</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-orange" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-orange" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-orange" style="width: 70%;"> </div>            </div>            <h2>green</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-green" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-green" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-green" style="width: 70%;"> </div>            </div>        </div>        <div class="span6">            <h2>Blue</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-blue" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-blue" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-blue" style="width: 70%;"> </div>            </div>            <h2>Cyan</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-cyan" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-cyan" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-cyan" style="width: 70%;"> </div>            </div>            <h2>Gray</h2>            <h5>Photoshop — 90%</h5>            <div class="progress">                <div class="bar bg-gray" style="width: 90%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-gray" style="width: 70%;"> </div>            </div>            <h5>Photoshop — 70%</h5>            <div class="progress">                <div class="bar bg-gray" style="width: 70%;"> </div>            </div>        </div>    </div></div>    

Alert This is alert code
<div id="system-message">    <div class="alert alert-message"><a class="close" data-dismiss="alert">×</a>        <h4 class="alert-heading">Message</h4>        <div>            <p><strong>Yellow Message Box.</strong>Praesent tempor vestibulum eros at bibendum aenean eu augue pellentesque risus!</p>        </div>    </div></div><div id="system-message">    <div class="alert alert-error"><a class="close" data-dismiss="alert">×</a>        <h4 class="alert-heading">Message</h4>        <div>            <p><strong>Yellow Message Box.</strong>Praesent tempor vestibulum eros at bibendum aenean eu augue pellentesque risus!</p>        </div>    </div></div><div id="system-message">    <div class="alert alert-success"><a class="close" data-dismiss="alert">×</a>        <h4 class="alert-heading">Message</h4>        <div>            <p><strong>Yellow Message Box.</strong>Praesent tempor vestibulum eros at bibendum aenean eu augue pellentesque risus!</p>        </div>    </div></div><div class="row-fluid">    <div class="span6">        <div class="alert alert-info bg-gray-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.</div>        <div class="alert alert-info bg-gray-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button>            <h3>Information Lable</h3>            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>            <a class="btn bg-blue" href="#fakelink">Turn it off now</a> <a class="btn bg-gray" href="#fakelink">It’s ok</a></div>        <div class="alert alert-error bg-blue-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.</div>        <div class="alert alert-error bg-blue-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button>            <h3>Error: The change you wanted was rejected.</h3>            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>            <a class="btn bg-red" href="#fakelink">Turn it off now</a> <a class="btn bg-gray" href="#fakelink">It’s ok</a></div>    </div>    <div class="span6">        <div class="alert alert-success bg-gray-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.</div>        <div class="alert alert-success bg-gray-light"><button class="close fui-cross" type="button" data-dismiss="alert"></button>            <h3>Disc Space was extended twice. It’s ok?</h3>            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>            <a class="btn bg-orange" href="#fakelink"> Hurray!</a> <a class="btn bg-cyan" href="#fakelink">Share on twitter</a></div>        <div class="alert bg-blue2"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.</div>        <div class="alert bg-blue2"><button class="close fui-cross" type="button" data-dismiss="alert"></button>            <h3>Hey, Some problems on our servers.</h3>            <p>An error message is information displayed when an <a href="#fakelink">unexpected condition occurs</a>, usually on a computer or other device. On modern operating systems with graphical user interfaces, error messages are often displayed using dialog boxes.</p>            <a class="btn bg-green" href="#fakelink">Fix it</a> <a class="btn bg-gray" href="#fakelink">Okey, no probs!</a></div>    </div></div>

Tags This is Tabs code
<div class="row-fluid">    <div class="span12">        <h2>Vertical tab group</h2>        <div class="tabbable tabs-left">            <ul class="nav nav-tabs nav-append-content">                <li class="active"><a href="#tab4" data-toggle="tab">Popular</a></li>                <li><a href="#tab5" data-toggle="tab">Newest</a></li>                <li><a href="#tab6" data-toggle="tab">Bestselling</a></li>                <li><a href="#tab7" data-toggle="tab">Picker</a></li>                <li><a href="#tab8" data-toggle="tab">Quisque place</a></li>            </ul>            <div class="tab-content">                <div id="tab4" class="tab-pane active">                    <p>Sed eleifend ut orci eget interdum. Praesent pulvinar vulputate bibendum. Cras aliquam sodales vestibulum. Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat.</p>                </div>                <div id="tab5" class="tab-pane">                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>                <div id="tab6" class="tab-pane">                    <p>Ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>                <div id="tab7" class="tab-pane">                    <p>Cras aliquam sodales vestibulum. Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>                <div id="tab8" class="tab-pane">                    <p>Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>            </div>        </div>    </div></div><p> </p><div class="row-fluid">    <div class="span12">        <h2>Horizontal tabs</h2>        <ul class="nav nav-tabs">            <li><a href="#navtab1" data-toggle="tab">Popular</a></li>            <li><a href="#navtab2" data-toggle="tab">Newest</a></li>            <li class="active"><a href="#navtab3" data-toggle="tab">Bestselling</a></li>            <li><a href="#navtab4" data-toggle="tab"> Dropdown </a></li>            <li><a href="#navtab5" data-toggle="tab">Praesent </a></li>        </ul>        <div class="tab-content">            <div id="navtab1" class="tab-pane active">                <p>Sed eleifend ut orci eget interdum. Praesent pulvinar vulputate bibendum. Cras aliquam sodales vestibulum. Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat.</p>            </div>            <div id="navtab2" class="tab-pane">                <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>            </div>            <div id="navtab3" class="tab-pane">                <p>Ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>            </div>            <div id="navtab4" class="tab-pane">                <p>Cras aliquam sodales vestibulum. Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>            </div>            <div id="navtab5" class="tab-pane">                <p>Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>            </div>        </div>    </div></div><p> </p><div class="row-fluid">    <div class="span12">        <h2>circle tabs</h2>        <div class="tabbable tabs-left circle-tabs">            <ul class="nav nav-tabs nav-append-content">                <li class="active"><a href="#tab12" data-toggle="tab">2012</a></li>                <li><a href="#tab13" data-toggle="tab">2013</a></li>                <li><a href="#tab14" data-toggle="tab">2014</a></li>            </ul>            <div class="tab-content">                <div id="tab12" class="tab-pane active">                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>                <div id="tab13" class="tab-pane">                    <p>Ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>                <div id="tab14" class="tab-pane">                    <p>Cras aliquam sodales vestibulum. Nulla dapibus vel justo id dictum. Nunc ante nulla, dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                    <p>Dapibus et nunc sed, ornare venenatis tellus. Mauris adipiscing metus eros, nec commodo quam sollicitudin vitae. In convallis in tellus eget dignissim. Ut condimentum nisl eros, id tincidunt lacus mattis rhoncus. Maecenas nec felis iaculis, facilisis nisl ut, condimentum sapien. Quisque hendrerit mauris ut fringilla consequat. Phasellus semper libero ut augue rhoncus luctus. Pellentesque auctor ullamcorper magna, sit amet interdum nulla sodales vel. Phasellus blandit massa id hendrerit hendrerit.</p>                </div>            </div>        </div>    </div></div>

Com TZ Portfolio


You have create category Slideshow, blog, classer... and insert article in this category

Creating Portfolio

  1. Document Com TZ Portfolio: Portfolio document
  2. Set up component TZ Portfolio: Extract component.zip and install TZ_Portfolio_master.zip
  3. Setting Component TZ Portfolio:
    • Step 1:
    • Step 2: General
    • Step 3: TZ Portfolio - Time Line
    • Step 4: TZ Tag - User
    • Step 5: Image
    • Step 6: Artile
    • Step 7: Blog / Featured Layouts

Update Fitness Version 1.1

You download fitness package version 1.1 and extract

In Folder Fitness 1.1 you will see package_template.zip and you install this package_template.zip on your site

After finished install, you go to Template manager and choose edit your template

You config template layout for layout Default, layout Home, Layout righttoleft.

Layout Default

Layout Home

Layout Right to Left

Source and Credits


Extentions

  1. Plazart Framework
  2. TZ Portfolio Component
  3. Module Twitter
  4. Module TZ Service
  5. Module TZ new pro
  6. Module BT Googlemap

Icon & Image

Icon
  1. http://twitter.github.com/bootstrap/
  2. http://fortawesome.github.io/Font-Awesome/
    Image
  1. http://www.flickr.com/groups/fashionphotography/
  2. http://www.flickr.com/groups/modeling/

Fonts

  1. Raleway
  2. Open San
  3. Arial