Lania version 1.0 Template

Documentation 1.0

• Created: 10/11/2013
• By: Templaza
• Email: info@templaza.com

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 + Lania 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.























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



3. 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 Lania 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 Lania 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_Lania - Default and click "Make Default". Refresh your site.

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
   
   
   
   
   
   
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 :

• style.less --> Stores CSS for main div layout
• typo.less --> CSS Typography template
• joomla.less --> CSS Joomla page style template
• style-responsive.less --> Responsive CSS template
• megamenu.less --> Menu CSS template
• navigation.less --> Menu CSS template
• variables.less --> Define value for less file

Modules in Home page

1. Logo Website

   You can change logo in config of template

   

2. Main Menu

   

   YOu can go to Template Options and config Mega menu.

   

   And you can view Joomlart toturial create mega menu. Megamenu toturial

3. Module: Home Slider

   
   • Module Type : Unite Revolution Slider
   • Module Position : position-1

   Create Home Slider

   1. Step1:

      Install Component revolution_slider2.2.8.zip in "modules" folder packet file

   2. Step2:

      When you completed install. You go to (components/Unite Revolution Slider) and click "New" create slider

      
   3. Step3:

      Click save&close and click edit slider

      
   4. Step4:

      Click Add Slider

      
   5. Step5:

      Create module Home Slider

      Go to Extensions/Module manager, click New and choose "Unite Revolution Slider "

4. Module: Signup

   
   • Module Type : Custom HTML
   • Module Position : position-2
   • Module ClassSuffix :signup padding bg-light tz-border-bottom tz-border-top

   This is Module content

               <div class="row-fluid">
                   <div class="span9">
                       <h2>I Am Lania - A modern &amp; clean website</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus purus vitae diam posuere nec eleifend.</p>
                   </div>
                   <div class="span3"><a class="btn pull-right" href="http://localhost/lania/">Sign up Now</a></div>
               </div>
           

5. Module: TZ Service

   
   • Module Type : TZ Services
   • Module Position : position-2
   • Module ClassSuffix :service padding

   Create module:

   1. Step1: Install mod_tz_server.zip module
   2. Step2: Create items

      Enter your value as this image and input module class suffix in "Advanced Options" "service padding"

      

6. Module: Just Released...

   
   • Module Type : TZ New Pro
   • Module Position : position-2
   • Module ClassSuffix ((has space before padding)): padding align-center bg-light release tz-border-top-2

   Create module:

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

      

      

      

7. Module: Quote

   
   • Module Type : TZ New Pro
   • Module Position : position-2

   Create module:

   1. Step1: Create Quote article: You go to TZ Portfolio component and create article "Quote"

      

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

      

8. Module: About

   
   • Module Type : Custom HTML
   • Module Position : position-2
   • Module ClassSuffix(has space before "padding" class) : padding

   This is Module content

               <p><img src="images/iPhone-lania.png" style="float: right;" /></p>
               <h2>Amazing Tool To Build Awesome Website</h2>
               <ul class="check">
                   <li>Fully responsive design</li>
                   <li>TZ Portfolio give you the opportunity to showcase your content</li>
                   <li>T3 Framework to easily customize your website</li>
                   ...
               </ul>
           

9. Module: Meet Our Team

   
   • Module Type : TZ Employee
   • Module Position : position-2
   • Module ClassSuffix ((has space before padding)): padding align-center bg-light tz-border-top-2 tz-border-bottom

   Create module:

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

      

      

      

10. Module: Skill

    
    • Module Type : Custom HTML
    • Module Position : position-13
    • Module ClassSuffix : padding

    This is Module content

                <div class="skill skill-block">
                    <div class="progress progress-info">
                        <div class="bar" style="width: 90%;"><em class="icon-mobile-phone size28"> </em>IOS development - 90%</div>
                    </div>
                    <div class="progress progress-info">
                        <div class="bar" style="width: 70%;"><em class="icon-film size22"> </em>Video Player- 70%</div>
                    </div>
                    <div class="progress progress-info">
                        <div class="bar" style="width: 70%;"><em class="icon-search size22"> </em>Search Processing - 70%</div>
                    </div>
                </div>
            

11. Module: Newsletter

    
    • Module Type : Custom HTML
    • Module Position : position-14
    • Module ClassSuffix : padding

    This is Module content

                <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=templaza/blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
                    <input class="inputbox pull-left" onfocus="if(this.value=='Your Email') this.value='';" onblur="if(this.value=='') this.value='Your Email';" type="text" name="email" value="Your Email" />
                    <input type="hidden" name="uri" value="templaza/blog" /> <input type="hidden" name="loc" value="en_US" /> <input class="subcription_btn btn" type="submit" value="Send" />
                </form>
                <p>Make sure you dont miss interesting happenings by joining our newsletter program.</p>
            

12. Module: Our Awesome Clients

    
    • Module Type : TZ New Pro
    • Module Position : position-15

    Create module:

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

       

       

13. Module: Breadcrumb & Social

    

    1. Breadcrumbs

       You can go to Extensions/module manager and create new module "Breadcrumbs"

       Module Type: Breadcrumbs

       Module Position: navhelper

    2. Social

       You install mod_tz_social.zip module

       Module Type: Module social network

       Module Position: right-navhelper

       Config this module

       

       

14. Module: Company

    

    • Module Type : Menu
    • Module Position : footer-1

    Create Company module:

    1. Step1: You have to create menu Company
    2. Step2: You go to module manager and create new module ("menu") and choose menu "Company". Module position: footer-1

15. Module: Rss feed

    

    • Module Type : Menu
    • Module Position : footer-2
    • Module Class Suffix :rss

    Create Rss feed module:

    1. Step1: You have to create menu Rss
    2. Step2: You go to module manager and create new module ("menu") and choose menu "Rss". Module position: footer-2 and enter class suffix "rss"

16. Module: Latest News

    
    • Module Type : TZ New Pro
    • Module Position : footer-3

    Create module:

    1. Step1: You go to module manager and create new module type "TZ New Pro"
    2. Step2: Config this module

       

       

       

17. Module: Tweets

    
    • Module Type : Mod Tz Twitter Widget
    • Module Position : footer-4

    Create module:

    1. Step1: You install module TZ Twitter widget
    2. Step2: Config module

       

       

18. Module: Footer

    

    1. 1: Module Copyright

       Module Type : Custom HTML

       Module Position : footer

       Create: You go to module manager and create new module type "Custom HTML" and input your content, choose position "footer"

    2. Button: Top

       You can config show or hide button Top in template options / Theme

Module in Home Style 1

Home Style 1 we use some module like Home style you can see config in home style.

1. Module: About 2

   

   • Module type: Custom HTML
   • Module Position: position-2
   • Module Class suffix: padding none-padding-bottom

   This is content code

                   <div class="row-fluid">
                       <div class="span5 pull-right">
                           <p><img src="images/growup.png" style="float: right;" /></p>
                       </div>
                       <div class="span7 none-margin-left">
                           <h2>Knowing What's Happening is Good.</h2>
                           <h2>Making it Happen is Better.</h2>
                           <p>Praesent in sollicitudin neque. Mauris sit amet risus vitae purus bibendum venenatis? Aliquam eget tortor justo, eget tristique tortor. Etiam turpis augue, laoreet et consequat eu, rhoncus vel dui.</p>
                       </div>
                   </div>
               

Module in Home Style 2

Home Style 1 we use some module like Home style you can see config in home style.

1. Module: Count Down

   

   • Module type: Mod Tz Custom HTML
   • Module Position: position-2
   • Module Class suffix: padding bg-light

   Module config:

   

2. Module: About 3

   

   • Module type: Custom HTML
   • Module Position: position-2
   • Module Class suffix: padding

   This is content code:

                   <div class="row-fluid">
                       <div class="span8">
                           <h2>8th Annual Seattle Conference</h2>
                           <p>Every year, we address several aspects of the Bioeconomy, including biofuel, biotechnology, and green chemistry. The impact of biofuels on greenhouse gases is subject to debate. This year, sessions will include:</p>
                           <ul class="check">
                               <li>The Economics and Science of 2nd, 3rd, and 4th Generation Biofuel:  New Perspectives</li>
                               <li>Economics of Land Use for Biofuel. The Value of Drought Tolerance</li>
                               <li>Alternative Biofuels and Biotechnologies. The State of Biofuel</li>
                           </ul>
                           <p>The Multi-state Research Project NC-1034, “Impact Analyses and Decision Strategies for Agricultural Research,” will hold its Annual Business Meeting on Biotechnology, Bioenergy, and Global Food Security.</p>
                       </div>
                       <div class="span4">
                           <h2>Program Schedule</h2>
                           <p><span class="caption">April 16, 2014</span></p>
                           <ul class="check">
                               <li><strong>9:00 am - 10:00 am:</strong> Typi non habent claritatem</li>
                               <li><strong>10:00 am - 11:00 am:</strong> Duis autem vel eum</li>
                           </ul>
                           <p><span class="caption">April 17, 2014<br /></span></p>
                           <ul class="check">
                               <li><strong>9:00 am - 10:00 am:</strong> Typi non habent claritatem</li>
                               <li><strong>10:00 am - 11:00 am:</strong> Duis autem vel eum</li>
                           </ul>
                       </div>
                   </div>
               

3. Module: Sponsors

   

   • Module type: TZ Employee
   • Module Position: position-2
   • Module Class suffix: padding align-center tz-border-top

   Module config:

   

   

4. Module: About Style 3

   

   • Module type: Custom HTML
   • Module Position: position-2
   • Module Class suffix:signup padding align-center bg-light

   This is content code

                   <h2>I Am Lania - A modern &amp; clean website</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ,... lectus, non posuere quam pretium sed.</p>
               

Module in Home Style 3

Home Style 1 we use some module like Home style you can see config in home style.

1. Module: About Style 3

   

   • Module type: Custom HTML
   • Module Position: position-2
   • Module Class suffix:signup padding align-center bg-light

   This is content code

                   <h2>I Am Lania - A modern &amp; clean website</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ,... lectus, non posuere quam pretium sed.</p>
               

2. Module: Our Blog

   

   • Module type: TZ New Pro
   • Module Position: position-2
   • Module Class suffix:tabs padding bg-light

   This is module config

   

   

   Create module Our Blog:

   1. Step1:
      You create 2 modules "Latest New" and "Most popular"
      Module type: TZ New Pro

      Create "Latest New" module

      You go to module manager and create new module type "TZ New Pro" and config

      

      

      

      
      Similar you create "Most Popular" module and config:

      

      

      

Config Template

You can use Flex slider and Zoom slider

Flexslider config:

Zoom config:

Create Portfolio page

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

Create Blog 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: Categories

   

   You create menu Categories and go to module manager create new module type menu and choose menu categories

2. Module: Featured

   

   • Module type: TZ New Pro
   • Module position: sidebar-2
   You create new module type "TZ New Pro" and config as:

   

   

   

3. Module: Archives

   

   • Module type: TZ Archived Articles
   • Module position: sidebar-2
   You create new module type "TZ Archived Articles" and config as:

   

4. Module: Join us

   

   • Module type: Custom HTML
   • Module position: sidebar-2
   You create new module type "Custom HTML" and content code
   You can change "data-href" or go to https://developers.facebook.com/docs/plugins/like-box-for-pages/ and create your style, copy code and pates to content module.

                   <div class="fb-like-box" data-href="http://www.facebook.com/templaza" data-height="350" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"> </div>
               

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

Config Theme

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

• TZ T3 Framework, since this template is written under T3 Framework, we need to enable this plugin, unless there would be a warning messages to install and enabled T3 Plugin

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

    

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>
    

Code Button

        <a href="#" class="btn">Default</a>
        <a href="#" class="btn btn-icon"><em class="icon-check">&nbsp;</em>Icon Button</a>

    

Code List Style

        <ul class="check">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="star">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="comment">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="tag1">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="tag2">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="user">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="next">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>
        <ul class="system">
            <li>Nam a est id magna aliquam</li>
            <li>Nam a est id magna aliquam</li>
        </ul>

    

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>
    

Price color

    <ul class="tz-price-table tz-price-table-color">
        <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>
    

Code Progress

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

    <div class="alert alert-info"><button data-dismiss="alert" type="button" class="close fui-cross"></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"><button data-dismiss="alert" type="button" class="close fui-cross"></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 href="#fakelink" class="btn btn-info btn-wide btn-darklight">Turn it off now</a> <a href="#fakelink" class="btn btn-wide btn-gray">It’s ok</a></div>
    <div class="alert alert-error"><button data-dismiss="alert" type="button" class="close fui-cross"></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"><button data-dismiss="alert" type="button" class="close fui-cross"></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 href="#fakelink" class="btn btn-danger btn-wide  btn-red">Turn it off now</a> <a href="#fakelink" class="btn btn-wide btn-gray">It’s ok</a></div>
    <div class="alert alert-success"><button data-dismiss="alert" type="button" class="close fui-cross"></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"><button data-dismiss="alert" type="button" class="close fui-cross"></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 href="#fakelink" class="btn btn-primary btn-wide btn-embossed"> Hurray!</a> <a href="#fakelink" class="btn btn-info btn-wide btn-cyanlight btn-embossed">Share on twitter</a></div>
    <div class="alert"><button data-dismiss="alert" type="button" class="close fui-cross"></button> Your computer restarted <a href="#fakelink">because of a problem</a>. Sorry for any inconvenience and appreciate your patient.</div>
    <div class="alert"><button data-dismiss="alert" type="button" class="close fui-cross"></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 href="#fakelink" class="btn btn-warning btn-wide btn-orange">Fix it</a> <a href="#fakelink" class="btn btn-wide btn-gray">Okey, no probs!</a>
    </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 Gallery
     
   • Step 5: TZ Tag - User
     
   • Step 6: Image
     
   • Step 7: Artile
     
   • Step 8: Blog / Featured Layouts
     

Source and Credits

Extentions

1. T3 Framework
2. TZ Portfolio Component
3. Module Twitter
4. Module TZ Multi Slider
5. Module BT Googlemap

Icon & Image

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