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. Home 2
  9. Home 3
  10. Home 4
  11. Home 5
  12. Home RTL
  13. Portfolio Full Width
  14. Portfolio 2 columns
  15. Portfolio 3 + 4 columns
  16. Portfolio With Sidebar
  17. Portfolio one column
  18. Blog page
  19. Blog 2 +3 +4 columns
  20. Blog Left Sidebar
  21. Blog Right Sidebar
  22. Blog Single Page
  23. Blog K2
  24. Blog K2 2 + 3 + 4 Columns
  25. Blog K2 Left Sidebar
  26. Blog K2 Right Sidebar
  27. Blog K2 Single Page
  28. Contact page
  29. Coming Soon page
  30. Login Form page
  31. About Us page
  32. Service page
  33. Shop page
  34. Shop Sidebar page
  35. Grid Event page
  36. Event One Column page
  37. Configure Template
  38. Copy Template
  39. Other Extensions
  40. Typography
  41. Com TZ Portfolio
  42. Source and Credits

Everline Joomla Template

Documentation 1.1

  • Created: 16/03/2015
  • 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)

Preview

Quickstart Installation

Quickstart = Joomla + Everline 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. 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 supports 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

SEE MORE: HOW TO INSTALL JOOMLA TEMPLATE WITH QUICKSTART USING CPANEL

Template Installation

Installation Everline 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 Everline 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_Everline_joomla - 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:

You can configure layout and module position in template options

SEE MORE: PLAZART FRAMEWORK DOCUMENTATION

CSS Files and structure

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

Create Home page

Preview

Some steps to create

Step 1: Create the menu item "Home"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Menu Root Item

Step 2:Create all the modules which you can use in the "Home"

They are:

1. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

2. Countdown

  • Module type: Mod TZ Countdown
  • Position: count-down

3. Our Story

  • Module type: Custom HTML
  • Position: our-story

4. Service

  • Module type: TZ Services
  • Position: service

5. Music

  • Module type: TZ Play Music
  • Position: music

6. Event Home 1

  • Module type: JSN Uniform
  • Position: event

7. Video

  • Module type: Mod_tz_video
  • Position: video

8. FROM OUR BLOG

  • Module type: TZ News Pro
  • Position: blog

9. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

10. Footer event

  • Module type: Custom HTML
  • Position: footer-2

11. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home" and configure this layout.

"Home" uses the layout: "Everline - Home1"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home 1"
3 Go to the tab "Preset"of the layout "Everline - Home 1" and select a template style available. In detail, you need to select "Everline - Home 1". Double-click on that template ("Everline - Home 1") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home"

Step 5: Refresh your site and check whether "Home" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Home 2 Page

Preview

Some steps to create

Step 1: Create the menu item "Home 2"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Menu Root Item

Step 2:Create all the modules which you can use in the "Home 2"

They are:

1. Menu left

  • Module type: menu
  • Position: menu-left

2. Menu right

It is similarly to the module “Menu left”.

However, it has the position “menu-right”.

3. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

4. COUNTDOWN TO JENNY & MARK WEDDING CEREMONY

  • Module type: Mod TZ Countdown
  • Position: count-down

5. Service

  • Module type: TZ Services
  • Position: service

6. Our story

  • Module type: Custom HTML
  • Position: our-story

7. Parallax

  • Module type: Mod TZ Parallax
  • Position: parallax

8. Event 2

  • Module type: JSN Uniform
  • Position: event

9. Music for love

  • Module type: TZ Play Music
  • Position: music
  • This is similar to the following module. However, you need to show the module title.

8. FROM OUR BLOG

  • Module type: TZ News Pro
  • Position: blog

9. Video

  • Module type: Mod_tz_video
  • Position: video

10. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

11. Footer event

  • Module type: Custom HTML
  • Position: footer-2

12. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home2" and configure this layout.

"Home2" uses the layout: "Everline - Home2"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home 2"
3 Go to the tab "Preset"of the layout "Everline - Home 2" and select a template style available. In detail, you need to select "Everline - Home 2". Double-click on that template ("Everline - Home 2") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home2"

Step 5: Refresh your site and check whether "Home2" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Home 3 Page

Preview

Some steps to create

Step 1: Create the menu item "Home 3"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Home

Step 2:Create all the modules which you can use in the "Home 3"

They are:

1. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

2. Our Story

  • Module type: Custom HTML
  • Position: our-story

3. Count down home 3

  • Module type: Mod TZ Countdown
  • Position: count-down

4. Service

  • Module type: TZ Services
  • Position: service

5. Parallax

  • Module type: Mod TZ Parallax
  • Position: parallax

6. Event 3

  • Module type: JSN Uniform
  • Position: event

7. Background music

  • Module type: Custom HTML
  • Position: position-0

8. Music for love

  • Module type: TZ Play Music
  • Position: music
  • It is the same as the following module. However, you need to show the module title

9. From Our Blog

  • Module type: TZ News Pro
  • Position: blog

10. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

11. Footer event

  • Module type: Custom HTML
  • Position: footer-2

12. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home 3" and configure this layout.

"Home 3" uses the layout: "Everline - Home3"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home 3"
3 Go to the tab "Preset"of the layout "Everline - Home 3" and select a template style available. In detail, you need to select "Everline - Home 3". Double-click on that template ("Everline - Home 3") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home 3"

Step 5: Refresh your site and check whether "Home 3" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Home 4 Page

Preview

Some steps to create

Step 1: Create the menu item "Home 4"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Home

Step 2:Create all the modules which you can use in the "Home 4"

They are:

1. Alert

  • Module type: Custom HTML
  • Position: alert

2. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

3. COUNTDOWN TO JENNY & MARK WEDDING CEREMONY

  • Module type: Mod TZ Countdown
  • Position: count-down

4. Our Story

  • Module type: Custom HTML
  • Position: our-story

5. Service

  • Module type: TZ Services
  • Position: service

6. Music

  • Module type: TZ Play Music
  • Position: music

7. Parallax

  • Module type: Mod TZ Parallax
  • Position: parallax

8. Video

  • Module type: Mod_tz_video
  • Position: video

9. Music

  • Module type: TZ Play Music
  • Position: music

10. Music Image

  • Module type: Custom HTML
  • Position: position-0

11. Event 2

  • Module type: JSN Uniform
  • Position: event

12. FROM OUR BLOG

  • Module type: TZ News Pro
  • Position: blog

13. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

14. Footer event

  • Module type: Custom HTML
  • Position: footer-2

15. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home 4" and configure this layout.

"Home 4" uses the layout: "Everline - Home4"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home 4"
3 Go to the tab "Preset"of the layout "Everline - Home 4" and select a template style available. In detail, you need to select "Everline - Home 4". Double-click on that template ("Everline - Home 4") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home 4"

Step 5: Refresh your site and check whether "Home 4" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Home 5 Page

Preview

Some steps to create

Step 1: Create the menu item "Home 5"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Home

Step 2:Create all the modules which you can use in the "Home 5"

They are:

1. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

2. Our Story

  • Module type: Custom HTML
  • Position: our-story

3. Service

  • Module type: TZ Services
  • Position: service

4. COUNTDOWN TO JENNY & MARK WEDDING CEREMONY

  • Module type: Mod TZ Countdown
  • Position: count-down

5. Music for love

  • Module type: TZ Play Music
  • Position: music
  • This is similar to the following module. However, you need to show the module title.

6. FROM OUR BLOG

  • Module type: TZ News Pro
  • Position: blog

7. Parallax

  • Module type: Mod TZ Parallax
  • Position: parallax

8. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

9. Footer event

  • Module type: Custom HTML
  • Position: footer-2

10. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home 5" and configure this layout.

"Home 5" uses the layout: "Everline - Home 5"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home 5"
3 Go to the tab "Preset"of the layout "Everline - Home 5" and select a template style available. In detail, you need to select "Everline - Home 5". Double-click on that template ("Everline - Home 5") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home 5"

Step 5: Refresh your site and check whether "Home5" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Home RTL page

Preview

Some steps to create

Step 1: Create the menu item "Home RTL"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Home

Step 2:Create all the modules which you can use in the "Home RTL"

They are:

1. Home 1

  • Module type: Unite Revolution Slider 2
  • Position: Slider

2. Countdown

  • Module type: Mod TZ Countdown
  • Position: count-down

3. Our Story

  • Module type: Custom HTML
  • Position: our-story

4. Service

  • Module type: TZ Services
  • Position: service

5. Music

  • Module type: TZ Play Music
  • Position: music

6. Event Home 1

  • Module type: JSN Uniform
  • Position: event

7. Video

  • Module type: Mod_tz_video
  • Position: video

8. FROM OUR BLOG

  • Module type: TZ News Pro
  • Position: blog

9. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

10. Footer event

  • Module type: Custom HTML
  • Position: footer-2

11. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Home RTL" and configure this layout.

"Home RTL" uses the layout: "Everline - Home RTL"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Home RTL"
3 Go to the tab "Preset"of the layout "Everline - Home RTL" and select a template style available. In detail, you need to select "Everline - Home RTL". Double-click on that template ("Everline - Home RTL") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Home RTL"

Step 5: Refresh your site and check whether "Home RTL" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Portfolio Full Width

Preview

Some steps to create

Step 1: Create the menu item "Portfolio Full Width"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Home

Step 2:Create all the modules which you can use in the "Portfolio Full Width"

They are:

1. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

2. Footer event

  • Module type: Custom HTML
  • Position: footer-2

3. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Portfolio Full Width" and configure this layout.

"Portfolio Full Width" uses the layout: "Everline - Portfolio Full Width"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Portfolio Full Width"
3 Go to the tab "Preset"of the layout "Everline - Portfolio Full Width" and select a template style available. In detail, you need to select "Everline - Portfolio Full Width". Double-click on that template ("Everline - Portfolio Full Width") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Portfolio Full Width"

Step 5: Refresh your site and check whether "Portfolio Full Width" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Portfolio 2 columns

Preview

Some steps to create

Step 1: Create the menu item "Portfolio 2 columns"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Portfolio

Step 2:Create all the modules which you can use in the "Portfolio 2 columns"

They are:

1. Portfolio 2 columns

  • Module type: Custom HTML
  • Position: position-3

2. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

3. Footer event

  • Module type: Custom HTML
  • Position: footer-2

3. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Portfolio 2 columns" and configure this layout.

"Portfolio 2 columns" uses the layout: "Everline - Portfolio 2 columns"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Portfolio 2 columns"
3 Go to the tab "Preset"of the layout "Everline - Portfolio 2 columns" and select a template style available. In detail, you need to select "Everline - Portfolio 2 columns". Double-click on that template ("Everline - Portfolio 2 columns") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Portfolio 2 columns"

Step 5: Refresh your site and check whether "Portfolio 2 columns" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Portfolio 3 + 4 columns

Two pages "Portfolio 3 columns and Portfolio 4 columns" are created similarly to "Portfolio 2 columns"

Notes:

Here is the layout "Portfolio 3 columns"

Create ""With Sidebar"" (Portfolio)

Preview

Some steps to create

Step 1: Create the menu item "With Sidebar"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Portfolio

Step 2:Create all the modules which you can use in the "With Sidebar"

They are:

1. Portfolio with sidebar

  • Module type: Custom HTML
  • Position: position-3

2. Search Right

  • Module type: Search
  • Position: right

3. Menu with sidebar

  • Module type: Menu
  • Position: right

4. Latest Event

  • Module type: JEvents Latest Event
  • Position: right

5. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

6. Footer event

  • Module type: Custom HTML
  • Position: footer-2

7. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "With Sidebar" and configure this layout.

"With Sidebar" uses the layout: "Everline - With Sidebar left"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - With Sidebar left"
3 Go to the tab "Preset"of the layout "Everline - With Sidebar left" and select a template style available. In detail, you need to select "Everline - With Sidebar left". Double-click on that template ("Everline - With Sidebar left") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "With Sidebar"

Step 5: Refresh your site and check whether "With Sidebar" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create ""Portfolio One Column""

Preview

Some steps to create

Step 1: Create the menu item "Portfolio One Column"

You go to "Menus/Main Menu/Add new"

Menu type: Portfolio (Tz Portfolio-->Portfolio)

Parent item: Portfolio

Step 2:Create all the modules which you can use in the "Portfolio One Column"

They are:

1. Portfolio one column

  • Module type: Custom HTML
  • Position: position-3

2. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

3. Footer event

  • Module type: Custom HTML
  • Position: footer-2

4. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Portfolio One Column" and configure this layout.

"Portfolio One Column" uses the layout: "Everline - Portfolio One Column"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Portfolio One Column"
3 Go to the tab "Preset"of the layout "Everline - Portfolio One Column" and select a template style available. In detail, you need to select "Everline - Portfolio One Column". Double-click on that template ("Everline - Portfolio One Column") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Portfolio One Column"

Step 5: Refresh your site and check whether "Portfolio One Column" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Blog page

Preview

Some steps to create

Step 1: Create the menu item "Blog"

You go to "Menus/Main Menu/Add new"

Menu type: Category Blog (Tz Portfolio-->Category Blog)

Parent item: Menu Root Item

Step 2:Create all the modules which you can use in the "Blog"

They are:

1. BLOG-GRID-1 COLUMN

  • Module type: Custom HTML
  • Position: position-3

2. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

3. Footer event

  • Module type: Custom HTML
  • Position: footer-2

4. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog" and configure this layout.

"Blog" uses the layout: "Everline -Blog"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Blog"
3 Go to the tab "Preset"of the layout "Everline - Blog" and select a template style available. In detail, you need to select "Everline - Blog". Double-click on that template ("Everline - Blog") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Blog"

Step 5: Refresh your site and check whether "Blog" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Blog page

Preview

Some steps to create

These pages are created similarly to "Blog" Page

However, each page only has a bit difference in configuration in the tab "Blog Layout"

Create "Blog Left Sidebar"

Preview

Some steps to create

Step 1: Create the menu item "Blog Left Sidebar"

You go to "Menus/Main Menu/Add new"

Menu type: Category Blog (Tz Portfolio-->Category Blog)

Parent item: Blog

Step 2:Create all the modules which you can use in the "Blog Left Sidebar"

They are:

1. BLOG-GRID-LEFT SIDEBAR

  • Module type: Custom HTML
  • Position: position-3

2. Search Right

  • Module type: Search
  • Position: right

3. Menu with sidebar

  • Module type: Menu
  • Position: right

4. Latest Event

  • Module type: JEvents Latest Event
  • Position: right

5. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

6. Footer event

  • Module type: Custom HTML
  • Position: footer-2

7. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog Left Sidebar" and configure this layout.

"Blog Left Sidebar" uses the layout: "Everline - With Sidebar Left"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - With Sidebar Left"
3 Go to the tab "Preset"of the layout "Everline - With Sidebar Left" and select a template style available. In detail, you need to select "Everline - With Sidebar Left". Double-click on that template ("Everline - With Sidebar Left") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Blog Left Sidebar"

Step 5: Refresh your site and check whether "Blog Left Sidebar" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create "Blog Right Sidebar"

Preview

Some steps to create

"Blog Right Sidebar" is created similarly to "Blog left sidebar"

However, it uses the layout style "With sidebar right"

Create "Blog Single Page"

Preview

Some steps to create

Step 1: Create the menu item "Blog Single Page"

You go to "Menus/Main Menu/Add new"

Menu type: Single Article (Tz Portfolio-->Single Article )

Parent item: Blog

Step 2:Create all the modules which you can use in the "Blog Left Sidebar"

They are:

1. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

2. Footer event

  • Module type: Custom HTML
  • Position: footer-2

3. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog Single Page" and configure this layout.

"Blog Single Page" uses the layout: "Everline -Default"

Step 4: Refresh your site and check whether "Blog Single Page" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Notes:To change the structure of detail article in Blog single page, please go to "Component/Tz Portfolio/ /Templates/Select "Default"

Create Blog K2 page

Preview

Some steps to create

Step 1: Create the menu item "Blog K2"

You go to "Menus/Main Menu/Add new"

Menu type: K2 » Item listings » Categories

Parent item: Menu Root Item

Step 2:Create all the modules which you can use in the "Blog K2"

They are:

1. BLOG-GRID-1 COLUMN

  • Module type: Custom HTML
  • Position: position-3

2. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

3. Footer event

  • Module type: Custom HTML
  • Position: footer-2

4. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog" and configure this layout.

"Blog" uses the layout: "Everline -Blog"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Blog"
3 Go to the tab "Preset"of the layout "Everline - Blog" and select a template style available. In detail, you need to select "Everline - Blog". Double-click on that template ("Everline - Blog") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Blog K2"

Step 5: Refresh your site and check whether "Blog" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create Blog K2 page with 2/3/4 Columns

Preview

Some steps to create

These pages are created similarly to "Blog" Page

However, each page only has a bit difference in configuration in the tab "Options"

Create "Blog K2 Left Sidebar"

Preview

Some steps to create

Step 1: Create the menu item "Blog K2 Left Sidebar"

You go to "Menus/Main Menu/Add new"

Menu type: K2 » Item listings » Categories

Step 2:Create all the modules which you can use in the "Blog K2 Left Sidebar"

They are:

1. BLOG-GRID-LEFT SIDEBAR

  • Module type: Custom HTML
  • Position: position-3

2. Search Right

  • Module type: Search
  • Position: right

3. Menu with sidebar

  • Module type: Menu
  • Position: right

4. Latest Event

  • Module type: JEvents Latest Event
  • Position: right

5. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

6. Footer event

  • Module type: Custom HTML
  • Position: footer-2

7. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog K2 Left Sidebar" and configure this layout.

"Blog K2 Left Sidebar" uses the layout: "Everline - With Sidebar Left"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - With Sidebar Left"
3 Go to the tab "Preset"of the layout "Everline - With Sidebar Left" and select a template style available. In detail, you need to select "Everline - With Sidebar Left". Double-click on that template ("Everline - With Sidebar Left") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Please assign this layout for the menu "Blog Left Sidebar"

Step 5: Refresh your site and check whether "Blog Left Sidebar" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create "Blog K2 Right Sidebar"

Preview

Some steps to create

"Blog K2 Right Sidebar" is created similarly to "Blog K2 left sidebar"

However, it uses the layout style "With sidebar right"

Create "Blog K2 Single Page"

Preview

Some steps to create

Step 1: Create the menu item "Blog Single Page"

You go to "Menus/Main Menu/Add new"

Menu type: K2 » Item » Item

Step 2:Create all the modules which you can use in the "Blog K2 Left Sidebar"

They are:

1. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

2. Footer event

  • Module type: Custom HTML
  • Position: footer-2

3. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Blog Single Page" and configure this layout.

"Blog Single Page" uses the layout: "Everline -Default"

Step 4: Refresh your site and check whether "Blog Single Page" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Notes:To change the structure of detail article in Blog single page, please go to "Component/Tz Portfolio/ /Templates/Select "Default"

Create Contact page

Preview

Some steps to create

Step 1: go to Components/Contact and create your contact

This is contact options

Step 2: Create the menu item "Contact"

You go to "Menus/Main Menu/Add new"

Menu type: Single Contact (Tz Portfolio-->Single Contact )

Step 3:Create all the modules which you can use in the "Blog Left Sidebar"

They are:

1. CONTACT

  • Module type: Custom HTML
  • Position: footer-1

2. Google Map

  • Module type: Mod TZ Google Map
  • Position: google-map

3. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

4. Footer event

  • Module type: Custom HTML
  • Position: footer-2

5. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 4: Select the layout for "Contact" page and configure this layout.

"Contact Page" uses the layout: "Everline -Contact"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Contact"
3 Go to the tab "Preset"of the layout "Everline - Contact" and select a template style available. In detail, you need to select "Everline - Contact ". Double-click on that template ("Everline - Contact") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 5: Refresh your site and check whether "Contact" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create ""Coming soon"" page

Preview

Some steps to create

Step 1: Create the menu item "Coming soon"

You go to "Menus/Main Menu/Add new"

Menu type: Feature Articles (Tz Portfolio-->Featture Articles)

Step 2:Create all the modules which you can use in the "Coming soon"

They are:

1. Coming soon

  • Module type: Custom HTML
  • Position: count-down

2. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

3. Footer event

  • Module type: Custom HTML
  • Position: footer-2

4. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Coming soon" page and configure this layout.

"Coming soon" uses the layout: "Everline -Coming soon"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Coming soon"
3 Go to the tab "Preset"of the layout "Everline - Coming soon" and select a template style available. In detail, you need to select "Everline - Coming soon ". Double-click on that template ("Everline - Coming soon") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Refresh your site and check whether "Coming Soon" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create ""Login Form"" page

Preview

Some steps to create

Step 1: Create the menu item "Login Form"

You go to "Menus/Main Menu/Add new"

Menu type: Login Form

Step 2:Create all the modules which you can use in the "Login Form"

They are:

1. Search right

  • Module type: Search
  • Position: right

2. Menu with sidebar

  • Module type: Menu
  • Position: right

3. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

4. Footer event

  • Module type: Custom HTML
  • Position: footer-2

5. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Login Form" page and configure this layout.

"Login Form" uses the layout: "Everline -With Sidebar Left"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - With Sidebar Left"
3 Go to the tab "Preset"of the layout "Everline - With Sidebar Left" and select a template style available. In detail, you need to select "Everline - With Sidebar Left ". Double-click on that template ("Everline - With Sidebar Left") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Refresh your site and check whether "Login Form" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create ""About us"" page

Preview

Some steps to create

Step 1: Create the menu item "About us"

You go to "Menus/Main Menu/Add new"

Menu type: Feature Articles

Step 2:Create all the modules which you can use in the "About us"

They are:

1. Title about us

  • Module type: Custom HTML
  • Position: position-3

2. About us

  • Module type: Custom HTML
  • Position: user-1

3. Parallax

  • Module type: Mod TZ Parallax
  • Position: parallax

4. Our Team Members

  • Module type: Mod TZ Services
  • Position: our-team

5. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

6. Footer event

  • Module type: Custom HTML
  • Position: footer-2

7. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "About us" page and configure this layout.

"About us" uses the layout: "Everline -About us"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - About us"
3 Go to the tab "Preset"of the layout "Everline - About us" and select a template style available. In detail, you need to select "Everline - About us ". Double-click on that template ("Everline - About us") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Refresh your site and check whether "About us" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create "Service" page

Preview

Some steps to create

Step 1: Create the menu item "Service"

You go to "Menus/Main Menu/Add new"

Menu type: Feature Articles

Step 2:Create all the modules which you can use in the "Service"

They are:

1. Service

  • Module type: Custom HTML
  • Position: position-3

2. What we can do

  • Module type: Custom HTML
  • Position: user-2

3. Service

  • Module type: TZ Services
  • Position: service

4. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

5. Footer event

  • Module type: Custom HTML
  • Position: footer-2

6. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Service" page and configure this layout.

"Service" uses the layout: "Everline -About us"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - About us"
3 Go to the tab "Preset"of the layout "Everline - About us" and select a template style available. In detail, you need to select "Everline - About us ". Double-click on that template ("Everline - About us") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Refresh your site and check whether "Service" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Create "Shop" page

Preview

Some steps to create

Step 1: Create the menu item "Shop"

You go to "Menus/Main Menu/Add new"

Menu type: Feature Articles

Step 2:Create all the modules which you can use in the "Shop"

They are:

1. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

2. Footer event

  • Module type: Custom HTML
  • Position: footer-2

3. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Shop" page and configure this layout.

"Shop" uses the layout: "Use Default"

Step 4: Refresh your site and check whether "Shop" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Some other steps to create a shop:

1. Before adding a new product, you need to do some basic configurations in Vituremart. You can go to "Component/Virtuemart/Configuration"

Below are some options of Virtuemart

2. You need to the extra field "Information". Please go to "Component/Virtuemart/Products/Extra Fields"

+ Create the extra field:

+ When you create a new product, you can get other information in this extra field.

+ When you go to your site and see a product, you can see this extra field.

3. If you want to increase/decrease the number of sort-by filters in the page "shop", please go to Component/Virtuemart/Configuration/Product Order Settings. You can select sort-by fields you want

4. This is an important thing. You need to do it if you install our template manually

You need to install the plugin "tz_vm_quickview" via Extensions Manager so that you can use the feature "Quick View" for each product

You can find this plugin in our template package

Create "Shop Sidebar" page

Preview

Some steps to create

The page "Shop sidebar" is created similarly to the page "Shop"

However, it uses the template style "Everline-Shop With Sidebar"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Shop With Sidebar"
3 Go to the tab "Preset"of the layout "Everline - Shop With Sidebar" and select a template style available. In detail, you need to select "Everline - Shop With Sidebar". Double-click on that template ("Everline - Shop With Sidebar") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Besides, It has some modules with the position "sidebar-shop"

Here are those modules:

1. Product Search Price

  • Module type: D4J Virtuemart Product Search
  • Position: sidebar-shop

2. PRODUCT CATEGORIES

  • Module type: VirtueMart Category
  • Position: sidebar-shop

3. BESTSELLERS

  • Module type: VirtueMart Products
  • Position: sidebar-shop

Create "Grid Event" page

Preview

Some steps to create

Step 1: Create the menu item "Grid Event"

You go to "Menus/Main Menu/Add new"

Menu type: List by Categories (JEvent-->List by CATEGORIES)

Step 2:Create all the modules which you can use in the "Grid Event"

They are:

1. Search Right

  • Module type: Search
  • Position: right

2. Menu with sidebar

  • Module type: Menu
  • Position: right

3. Latest Event

  • Module type: JEvents Latest Event
  • Position: right

4. LOCATION

  • Module type: Custom HTML
  • Position: footer-1

5. Footer event

  • Module type: Custom HTML
  • Position: footer-2

6. Get In Touch

  • Module type: TZ Social Custom
  • Position: footer-3

Step 3: Select the layout for "Grid Event" page and configure this layout.

"Grid Event" uses the layout: Everline- With Sidebar right"

You need to pay attention to the tab "Jevent" in this layout

In this tab, you can configure the features such "column width, pagination and event limit" for each event page.

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Default"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - With Sidebar right"
3 Go to the tab "Preset"of the layout "Everline - With Sidebar right" and select a template style available. In detail, you need to select "Everline - With Sidebar Right". Double-click on that template ("Everline - With Sidebar Right") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

Step 4: Refresh your site and check whether "Grid Event" appears or not.

If it appears, you are successful. If not, you need to check the steps above and to ensure that you don’t make any mistakes.

Some other steps before creating the "Grid Event" page

1. You need to create some custom layouts for your events"

To do this thing, please go to Component/JEvents/Custom Layouts

In this template, we have styled two custom layouts. They are:

  • List Row Detail (used for listing events generally in the pages "Grid Event" and ''Event One Column'')
  • Event Detail Page (used for a event page when you see an event in detail in the page "Grid Event" and ''Event One Column'')

Create "Event One Column" page

Preview

Some steps to create

The page "Event One Column" is created similarly to the page "Grid Event"

However, it uses the template style "Everline-Event One Column"

To get the configuration of this layout without configuring manually, please follow the instruction

Folder Contents
1 Go to Extensions/Template Manager/Select the layout "Everline - Event One Column"
2 Copy another layout template style from "Everline - Default" and change its name into "Everline - Event One Column"
3 Go to the tab "Preset"of the layout "Everline - Event One Column" and select a template style available. In detail, you need to select "Everline - Event One Column". Double-click on that template ("Everline - Event One Column") and you will see the box " Load Preset". At that time, you select "Accept".
4 Finally, you will have the template layout which you want.

You need to pay attention to the tab "Jevent" in this layout

In this tab, you can configure the features such "column width, pagination and event limit" for each event page.

Configure Template

Go to "template manage" and choose a template style


You will see some tabs below:

Theme

Layout: You can change template styles such as: background color or each block,margin, custom class,etc


Navigation: You can configure the mega menu here.

Font: You can change the font for your site.

Color: You can change the color of your site with unlimited color source here

Shop: You cang change the image column width in a detail shop.

JEvent

Note: You can refer to this Link to get other information when using the tabs above

Copy Template

Go to "template manage" and choose a template style

Step 1: Go to: Extensions --> Template manager

Step 2: When the new page loads, click on the "Everline - Default"

Step3: When the new page loads, do the following instructions:

JSN Uniform

You can go to this Link to download this extension.

This is the third party extension. Please contact to Joomla Shine to ask them to help if you have any problem when using this problem.

Below, we will provide you with 3 forms we have used in this template. They are Event1, Event 2 and Event 3.

Event 1

Event 2

Event 3

K2

You can go to this Link to download this extension.

SEE K2 Documentation to download this extension.

For commercial products, you need to purchase them from the developer.

This is the third party extension. Please contact to K2 author to ask them to help if you have any problem when using this problem.

Typography

Here are some example about Typography:


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>


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