1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Layouts and Module Positions
  5. CSS Files and structure
  6. Create Pages
  7. Home Page
  8. Event Page
  9. Portfolio Page
  10. Blog page
  11. Contact page
  12. Config Template
  13. Plugins
  14. Typography & Short code
  15. Com TZ Portfolio
  16. Source and Credits

Eventory 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 + Eventory 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 Eventory 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 Eventory 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_eventory_joomla - 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:

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. Logo Website

    Layout: Homepage

    You can change logo in config of template

    To change logo for “tz_eventory_joomla – Default” layout, you need to configure in Module.

    To change logo for “tz_eventory_joomla – Home” layout, you only go to “Theme” in “Template Options”

    Layout: Default

    • Module Type : Custom HTML
    • Module Position : top

    content logo

  2. Main Menu

    YOu can go to Template Options and config Mega menu.

  3. Home Scroll

    You can config in template options

  4. Module: Countdown

    • Module Type : Mod Tz Custom HTML
    • Module Position : block
    • Module layout : default

    This is Module content

    Change background: You go to “Paralax Options”

  5. Module: Latest News

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

    Create module:

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

  6. Module: Playlist

    • Module Type : TZ Play Music
    • Module Position : block
    • Alternative Layout: playlist

    Create module:

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

  7. Module: Breadcrumbs

    • Module Type : Breadcrumbs
    • Module Position : breadcrumb
  8. Module: Social

    • Module Type : TZ Social Custom
    • Module Position : social

    Create module:

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

  9. Module: Company

    • Module Type : menu
    • Module Position : bottom1
  10. Module: RSS Feed

    • Module Type : Custom HTML
    • Module Position : bottom2
    • Module ClassSuffix:icon-list

    config module

  11. Module: Head Office

    • Module Type : Custom HTML
    • Module Position : bottom3
    • Module ClassSuffix :address

    This is Module content

                <ul>                <li><i class="fa fa-map-marker"> </i>6 Place Saint-Germain des Prés  75006 Paris, France</li>                <li><i class="fa fa-phone-square"> </i>01 45 48 55 25<br />01 45 48 55 27</li>                <li><i class="fa fa-envelope"> </i>info@templaza.com</li>            </ul>        
  12. Module: Tweets

    • Module Type : Mod TZ Twitter Widget
    • Module Position : bottom4

    This is Module config

  13. Module: Copyright

    • Module Type : Custom HTML
    • Module Position : footer1
  14. Module: To Top

    • Module Type : Custom HTML
    • Module Position : footer2

    config

Create Event Page


Create Event page

You create menu item event with type: jevent/view by month

You can install compontent Jevent and plugin in packet file

Create Blog GridStyle


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

Create Blog Sidebar page


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

Module in Blog page

  1. Module: Playlist Blog

    • Module Type : TZ Play Music
    • Module Position : topsl
    • Alternative Layout: playlist

    config module:

    You can config same Playlist module

  2. Module: Random Image

    • Module Type : Random Image
    • Module Position : right
    • Module class suffix: full-box
  3. Module: Subscribe

    • Module Type : Custom HTML
    • Module Position : right

    Module Content

                    <p>Make sure you dont miss interesting happenings by joining our newsletter program.</p>                <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" />                    <i class="fa fa-plane"> </i>                </form>            
  4. Module: Top 10 DJ

    • Module type: mod_tz_services
    • Module position: right
    • Module Class suffix: full-box
    • Alternative Layout: scroll

    Config module:

  5. Module: Google map

    • Module type: BT Google Maps
    • Module position: right
    • Module Class suffix: full-box
  6. Module: Search

    • Module type: BT Google Maps
    • Module position: right
    • Module Class suffix: full-box
  7. Module: Shop

    • Module type: Custom HTML
    • Module position: right
    • Module Class suffix: full-box tz-shop
    You create new module type "Custom HTML" and content code
                    <div><img class="full-box" src="images/wallpaper-1624762.jpg" alt="" /></div>                <h3>nice t-shirt <strong class="pull-right">$39</strong></h3>                <p>Her reign from 1883 to 1897 was marked.</p>                <div><a class="tz-readmore full-button" href="#">Go to Shop</a></div>            
  8. Module: Latest News

    • Module Type : TZ News Pro
    • Module Position : right
    • Module Class Suffix : full-box

Create Blog page


You install module BT Google Maps and config to display in position "contact"

You can download in this link

You go to Components/Contact and create your contact

This is contact options

Config Template


Go to template manage choose template default


We have 2 layout Home and Default

Config Theme

Background header: Set Background for header. Background header Scroll: Set Background for header when scroll. Color menu: Set color for menu. Color menu hover: Set color for menu when hover. Background menu: Set background for menu. Background Main Body: Set background for main body. Background article blog: Set background for article. Background Module: Set background for module.

Config Layout Home


Config Layout Default

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

Code List&Button

    <div class="row-fluid">    <div class="span6">        <ul class="check">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div>    <div class="span6">        <ul class="star">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div></div><div class="row-fluid">    <div class="span6">        <ul class="comment">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div>    <div class="span6">        <ul class="tag1">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div></div><div class="row-fluid">    <div class="span6">        <ul class="tag2">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div>    <div class="span6">        <ul class="user">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div></div><div class="row-fluid">    <div class="span6">        <ul class="next">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div>    <div class="span6">        <ul class="system">            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>            <li>Nam a est id magna aliquam</li>        </ul>    </div></div><h2>Button</h2><div class="button-demo">    <p><a class="btn btn-demo" href="#">Default</a> <a class="btn btn-icon btn-demo" href="#"><i class="fa fa-check-circle-o"> </i>Icon Button</a> <a class="btn btn-red" href="#">Red Button</a> <a class="btn btn-gray" href="#">Gray Button</a> <a class="btn btn-hidden" href="#">Hidden Button</a> <a class="btn btn-blue" href="#">Blue Button</a> <a class="btn btn-yellow" href="#">Yellow Button</a></p></div>    


Price Table

Code Price Table

    <div class="page-heading">Buy Ticket today</div>    <div class="page-slogan">Get best places</div>    <div class="row-fluid">        <div class="span3">            <ul class="tz-price-table">                <li class="head">standard</li>                <li class="price"><label>$</label>19</li>                <li>1 days</li>                <li>Free BBQ</li>                <li>Free Gift</li>            </ul>            <a class="btn-price">Buy now</a></div>        <div class="span3">            <ul class="tz-price-table ">                <li class="head">Silver</li>                <li class="price"><label>$</label>58</li>                <li>3 days</li>                <li>Festival Day</li>                <li>Free Gift</li>            </ul>            <a class="btn-price ">Buy now</a></div>        <div class="span3">            <ul class="tz-price-table tz-price-table-color">                <li class="head">Gold</li>                <li class="price"><label>$</label>75</li>                <li>5 days</li>                <li>Festival Day</li>                <li>Free Gift</li>            </ul>            <a class="btn-price price-color">Buy now</a></div>        <div class="span3">            <ul class="tz-price-table">                <li class="head">Plantinum</li>                <li class="price"><label>$</label>99</li>                <li>5 days</li>                <li>Festival + VIP Place</li>                <li>Free Gift</li>            </ul>            <a class="btn-price">Buy now</a></div>    </div>    

Progress

Code Progress

        <div class="strong-title default">Default</div>        <div class="skill skill-block">            <div class="progress progress-info">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90% </div>            </div>            <div class="progress progress-info">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i> Video Player- 70%</div>            </div>            <div class="progress progress-info">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70% </div>            </div>        </div>        <div class="strong-title red">Red</div>        <div class="skill skill-block">            <div class="progress progress-red">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>            </div>            <div class="progress progress-red">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>            </div>            <div class="progress progress-red">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>            </div>        </div>        <div class="strong-title gray">Gray</div>        <div class="skill skill-block">            <div class="progress progress-gray">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>            </div>            <div class="progress progress-gray">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>            </div>            <div class="progress progress-gray">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>            </div>        </div>        <div class="strong-title green">Green</div>        <div class="skill skill-block">            <div class="progress progress-green">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>            </div>            <div class="progress progress-green">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>            </div>            <div class="progress progress-green">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>            </div>        </div>        <div class="strong-title blue">Blue</div>        <div class="skill skill-block">            <div class="progress progress-blue">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>            </div>            <div class="progress progress-blue">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>            </div>            <div class="progress progress-blue">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>            </div>        </div>        <div class="strong-title yellow">Yellow</div>        <div class="skill skill-block">            <div class="progress progress-yellow">                <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>            </div>            <div class="progress progress-yellow">                <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>            </div>            <div class="progress progress-yellow">                <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>            </div>        </div>    

Alert This is alert code
<div class="alert alert-info"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>.</div><div class="alert alert-info"><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 btn-info btn-radius" href="#fakelink">Turn it off now</a> <a class="btn btn-ok btn-radius" href="#fakelink">It’s ok</a></div><div class="alert alert-error"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>.</div><div class="alert alert-error"><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 btn-danger btn-radius" href="#fakelink">Turn it off now</a> <a class="btn btn-ok btn-radius" href="#fakelink">It’s ok</a></div><div class="alert alert-success"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>.</div><div class="alert alert-success"><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 btn-info btn-radius" href="#fakelink"> <i class="fa fa-check-circle"> </i>Hurray!</a> <a class="btn btn-ok btn-radius" href="#fakelink"><i class="fa fa-twitter"> </i>Share on twitter</a></div><div class="alert"><button class="close fui-cross" type="button" data-dismiss="alert"></button> Your computer restarted <a href="#fakelink">because of a problem</a>.</div><div class="alert"><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 btn-info btn-radius" href="#fakelink">Fix it</a> <a class="btn btn-ok btn-radius" href="#fakelink">Okey, no probs!</a></div>

About us This is alert code
    <div class="author-item"><img src="images/author01.jpg" alt="" />        <div class="author-info">            <h2>Mary Doren Doe</h2>            <h4>Creative Director</h4>            <p>Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellege bat, liber regione eu sit.</p>            <div class="skill skill-block">                <div class="progress progress-info">                    <div class="bar" style="width: 90%;"><i class="fa fa-pencil-square"> </i>IOS development - 90%</div>                </div>                <div class="progress progress-info">                    <div class="bar" style="width: 70%;"><i class="fa fa-film"> </i>Video Player- 70%</div>                </div>                <div class="progress progress-info">                    <div class="bar" style="width: 70%;"><i class="fa fa-search"> </i>Search Processing - 70%</div>                </div>            </div>        </div>    </div>

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

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