1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Layouts and Module Positions
  5. CSS Files and structure
  6. Modules
  7. Config Template
  8. Plugins
  9. Typography & Short code
  10. Com TZ Portfolio
  11. Create content Quote...
  12. Source and Credits

Responsive 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 contact us on our forum here. Thanks so much! This documentation was made only with the Documenter (except the images)

Quickstart Installation


Quickstart = Joomla + Responsive 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

Template Installation


Installation Responsive Template is easy and quick. Before installation you need extract zip file and install plugin Plazart

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

make default theme


make default theme

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:

CSS Files and structure


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

Modules


Modules in Home page

Home page

  1. Logo Website

    You can change logo in config of template

  2. Module Flex Slider

    Module
    • Module Type : TZ MULTI SLIDESHOW
    • Module Position : slideshow

    You can config in base options

  3. Module Why Choose Us?

    You can inset your text or images to display

    Module
    • Module Type : Custom HTML
    • Module Position : user1

    Module

  4. Module TZ Service

    Module
    • Module Type : mod_tz_services
    • Module Position : user1

    Module

  5. Module Our Projects

    Module
    • Module Type : TZ News Pro
    • Module Position : user1

    Basic Options

    Module

    Portfolio And Content Options

    Modul

    Portfolio Options

    Module

    Advanced Options

    Module

  6. Module Our Blog

    Module
    • Module Type : TZ News Pro
    • Module Position : user1

    Basic Options

    Module

    Portfolio And Content Options

    Modul

    Grid Options

    Module

    Advanced Options

    Module

  7. Module About

    You can inset your text or images to display

    Module
    • Module Type : Custom HTML
    • Module Position : user2

    Module

  8. Module About

    You can inset your text or images to display

    Module
    • Module Type : Custom HTML
    • Module Position : user3

    Module

  9. Module Author

    Module
    • Module Type : mod_tz_employee
    • Module Position : user4

    Module

  10. Module Testimonial

    Module
    • Module Type : mod_tz_employee
    • Module Position : user4

    Module
    Module

  11. Module Partner

    Module
    • Module Type : mod_tz_employee
    • Module Position : user4

    Module
    Module Module

  12. Module Mod TZ Twitter Widget

    Module
    • Module Type : Tz Twitter Widget
    • Module Position : user4

    You can config module

  13. Module Responsive bottom

    Module
    • Module Type : Custom HTML
    • Module Position : user7
  14. Module Join us on facebook

    Module
    • Module Type : Custom HTML
    • Module Position : user8
  15. Module Collection on Flickr

    Module
    • Module Type : Custom HTML
    • Module Position : user9
  16. Module Subcribe us on Youtube

    Module
    • Module Type : Custom HTML
    • Module Position : user10
  17. Copyright

    Module

    You can change your copyright in template options.

    Module

  18. Module Footer Menu

    • Module Type : Menu
    • Module Position : footernav
    Module

    You can create new menu and go to module manager create new module (type menu) and display in position "footernav"

  19. Module Social footer

    • Module Type : CustomHTML
    • Module Position : footernav
    Module

    You can change icon social footer in content of module



  20. Zoom Slider


    zoom slider

  21. Module Zoom Slider

    • Module Type : TZ MULTI SLIDESHOW
    • Module Position : slideshow
    Module



  22. Blog page


    Blog page


  23. Module Templaza

    • Module Type : Menu
    • Module Position : right
    Module
  24. Module Text Widget

    • Module Type : Custom HTML
    • Module Position : right
    Module
  25. Module Twitter Widget

    • Module Type : Mod TZ Twitter Widget
    • Module Position : right
    Module Module Module
  26. Module Random Image

    You can display random image when you reload page

    You create folder "random" in folder "images"and paste your image you want to display

    • Module Type: Random Image
    • Module Position : right
    Module Module
  27. Module Login

    You can go to module manager and create new module type(login) and choose display in position "right"

    • Module Type: Login
    • Module Position : right
  28. Module Who's Online?

    You can go to module manager and create new module type(Who's Online) and choose display in position "right"

    • Module Type: Who's Online
    • Module Position : right

    Contact page

  29. Module Categories

    You can go to module manager and create new module type(TZ Categories Menu) and choose display in position "right"

    • Module Type:Categories
    • Module Position : right



  30. Contact page


    Contact page


  31. Module Google Map
    • Module Type : BT Google Maps
    • Module Position : user1
    • Create:
    • 1. You install BT Google Maps module and config to show your location

      content:

Config Template


Go to template manage choose template default


Config Theme

You can change logo and height of items portfolio...


Config Layout

You can choose layout, set width for page with (% or Pixel)


Config Menu

You can choose megamenu

You can create class, submenu, width, insert module in menu...


Config Font

You can change and add your font, please view video
Video add font



Config Advanced Setting

You can compression css and js for load web is quickly

and you can add custom css for edit style of template.



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

...
...
...
And if you want to 4 columns you can <div> width class = span3

    

Accordion

Code Accordion

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

Button state

Code Button state

        <a class="btn btn-primary" href="#fakelink">Primary Button</a>
        <a class="btn btn-warning" href="#fakelink">Warning Button</a>
        <a class="btn " href="#fakelink">Default Button</a>
        <a class="btn btn-danger" href="#fakelink">Danger Button</a>
        <a class="btn btn-success" href="#fakelink">Success Button</a>
        <a class="btn btn-inverse" href="#fakelink">Inverse Button</a>
        <a class="btn btn-info" href="#fakelink">Info Button</a>
        <a class="btn disabled" href="#fakelink">Disabled Button</a>
    

Button Color

Code Button color

        <a class="btn  btn-primary" href="#fakelink">Default Button</a>
        <a class="btn  btn-primary btn-green" href="#fakelink">Green Button</a>
        <a class="btn  btn-primary btn-orange" href="#fakelink">Orange Button</a>
        <a class="btn  btn-primary btn-darklight" href="#fakelink">Dark Button</a>
        <a class="btn  btn-primary btn-yellow" href="#fakelink">Light Button</a>
        <a class="btn  btn-primary btn-cyan" href="#fakelink">Cool Button</a>
        <a class="btn  btn-primary btn-red" href="#fakelink">Hot Button</a>
    

Button size

Code Button state

        <a class="btn btn-huge btn-primary" href="#fakelink">Huge Button</a>
        <a class="btn btn-large btn-primary" href="#fakelink">Large Button</a>
        <a class="btn btn-primary" href="#fakelink">Default Button</a>
        <a class="btn btn-small btn-primary" href="#fakelink">Small Button</a>
    

Button Emboss

Code Button emboss

        <a class="btn btn-primary btn-embossed mlm" href="#fakelink">Embossed</a>
    

Price Table

Code Price Table

    <ul class="tz-price-table">
        <li class="head">standart</li>
        <li class="price"><span>$</span>19</li>
        <li>20 videos to upload</li>
        <li>15 contacts</li>
        <li>30 messages</li>
    </ul>
    
    <ul class="tz-price-table price-purple">
        <li class="head">professional</li>
        <li class="price"><span>$</span>29</li>
        <li>50 videos to upload</li>
        <li>25contacts</li>
        <li>80messages</li>
    </ul>
    

Progress

Code Progress

        <div class="progress">&nbsp;
            <div style="width: 40%;" class="bar">&nbsp;</div>
        </div>
        <p>Default</p>
        <div class="progress">&nbsp;
            <div style="width: 40%;" class="bar  bar-warning">&nbsp;</div>
        </div>
        <p>Warning</p>
        <div class="progress">&nbsp;
            <div style="width: 40%;" class="bar bar-danger">&nbsp;</div>
        </div>
        <p>Danger</p>
        <div class="progress">&nbsp;
            <div style="width: 40%;" class="bar bar-success">&nbsp;</div>
        </div>
        <p>Success</p>
        <div class="progress">&nbsp;
            <div style="width: 40%;" class="bar bar-info">&nbsp;</div>
        </div>
        <p>Info</p>
    

Social button

Code Social button

        <p><button class="btn btn-social-pinterest"> <em class="fui-pinterest">&nbsp;</em>Pin It 100 </button></p>
        <p><button class="btn btn-social-linkedin mrs"><em class="fui-linkedin">&nbsp;</em> Share 91 </button></p>
        <p><button class="btn btn-social-stumbleupon mrs"><em class="fui-stumbleupon">&nbsp;</em> Stumble 45 </button></p>
        <p><button class="btn btn-social-googleplus mrs"> <em class="fui-googleplus">&nbsp;</em>Connect with Google </button></p>
        <p><button class="btn btn-social-facebook mrs"> <em class="fui-facebook">&nbsp;</em>Connect with Facebook </button></p>
        <p><button class="btn btn-social-twitter"> <em class="fui-twitter">&nbsp;</em>Connect with Twitter </button></p>
    

Icon List

Code icon list

    <div class="iconbar">
        <ul>
            <li class="active"><a href="#fakelink" class="fui-user"><span class="color-darklight"> My Account</span></a></li>
            <li><a href="#fakelink" class="fui-calendar color-blue"><span class="color-darklight">Calendar</span></a></li>
            <li><a href="#fakelink" class="fui-photo color-green"><span class="color-darklight">Photo</span></a></li>
            <li><a href="#fakelink" class="fui-video color-redlight"><span class="color-darklight">Video</span></a></li>
            <li><a href="#fakelink" class="fui-chat color-purple"><span class="color-darklight">Chat</span></a></li>
            <li><a href="#fakelink" class="fui-mail color-red"><span class="color-darklight"> Message</span></a></li>
            <li><a href="#fakelink" class="fui-gear color-darklight"><span class="color-darklight"> Setting </span></a></li>
        </ul>
    </div>
    
        <ul>
            <li class="color-darklight">Default</li>
        </ul>
        <ul class="number">
            <li class="color-darklight">Number</li>
        </ul>
    

Com TZ Portfolio


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 Gallery
    • Step 5: TZ Tag - User
    • Step 6: Image
    • Step 7: Artile
    • Step 8: Blog / Featured Layouts

Create content Quote, Link, Audio


You can go to components/ TZ Portfolio/ article and create new article.

Source and Credits


Extentions

  1. Plazart Framework 1.3
  2. TZ Portfolio Component
  3. Module Twitter
  4. Module TZ Multi Slider
  5. 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/photos/markjsebastian/page5/
  2. http://www.flickr.com/photos/markjsebastian/page5/

Fonts

  1. Raleway
  2. Libre Baskerville
  3. Arial