1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Layouts and Module Positions
  5. CSS Files and structure
  6. Modules
  7. Plugins
  8. Set up Home page
  9. Background
  10. Com TZ Portfolio
  11. T3 Framework 2.0 Documentation
  12. Source and Credits

TZ Diary Template

Documentation 1.0

Thank you for purchasing 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 + Diary Template + Demo Content. After installation you'll see complete site like a Demo Site. So, if you're running for new website, I do urge to install using the quickstart file. But, If you've already had a joomla website with your own content, you could install only the Template to keep your own data

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

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

  3. Complete Install

    Complete Install

    Complete Install

    Complete Install

    Complete Install

    Complete Install

    Complete Install

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

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

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

Template Installation

Installation TZ Diary Template is easy and quick. Before installation you need to download latest version of Ja T3 System Plugin for Joomla 2.5.

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

make default theme

make default theme

Layouts and Module Positions


This template is written under T3 framework and mostly module positions are controlled through xml files. Those xml files are stored on etc > layouts folder. You could directly access those xml files through your template manager > layouts (tab). There are four xml files are available on this template (see our demo):

Modules Position

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

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

    module positions

  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:

    module positions
  7. Or you can go to folder templates > tz_diary > core > etc > layouts. There should be several xml files. You could open it to understand the used position on this templates.

CSS Files and structure

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

  • template.css --> Stores CSS for main div layout
  • template-ie7.css --> Stores CSS for IE handling
  • error.css --> Stores CSS for Error page
  • setting.css --> Stores CSS for default theme
  • layout-tablet.css --> Stores CSS for Screen width 736px < 985px
  • layout-mobile.css --> Stores CSS for Screen < 736px
  • layout-mobile-port.css --> Stores CSS for Screen width < 479px


  1. Leaf Left Header : On the top of left header
    • Module Type : Custom html module
    • Module Position : left-header
    • Module Class Suffix: _left_header
    • Module Text: empty
    left header
  2. Leaf Center Header : On the top of center header
    • Module Type : Custom html module
    • Module Position : center-header
    • Module Class Suffix: _center_header
    • Module Text: empty
    center header
  3. Leaf Right Header : On the top of Right header
    • Module Type : Custom html module
    • Module Position : right-header
    • Module Class Suffix: _right_header
    • Module Text: empty
    right header
  4. Logo website : Logo
    • Step 1: Upload image (logo.png) into path (templates/tz_diary/images)
    • Step 2: You can change with height in (templates/tz_diary/css/template.css) line 276 and line 273
  5. Back to top
    • Module Type : Custom html Module
    • Module Position : footnav
    • Module Text:
  6. Left Footer
    • Module Type :Custom html Module
    • Module Position : footer
    • Module Class Suffix : _left_footer
    • Module Text:
  7. Right Footer
    • Module Type : Custom Html Module
    • Module Position : footnav
    • Module Class Suffix : _right_footer
    • Module Text:
  8. Module in Category page
  9. Categories
    • Module Type : Module Menu Categories
    • Module Position : right1
  10. Tabs
    • Module Type : Module mod_xperttabs
    • Module Position : right1
    • Content Source Settings : module


  11. Basic Text Widget
    • Module Type : Module Custom HTML
    • Module Position : right1
  12. Flick Stream
    • Module Type : Module Flick Gallery
    • Module Position : right1


  13. latest from the twittersphere
    • Module Type : Module TZ Twitter Widget
    • Module Position : right2
    • Module Class Suffix : _twitter


  14. Accordion
    • Module Type : Module TZ News
    • Module Position : right2


  15. Slider
    • Module Type : Module TZ News
    • Module Position : right2


  16. Google map
    • Module Type : Module Custom html
    • Module Position : content-mass-top


    Step 1

    Step 2

  17. Content Show Home page
    • Menu: Home
    • Type: Com TZ Portfolio (view portfolio)


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

  • System - JB Library, because it's very important to make sure the Captify Content Module and the Scroll to top button can work as we want. Please go to plugin manager and find System - JB Library, You should make sure everything has been setup properly
  • JA 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

Set up Homepage

How to show tags filter

  • Created tags in com tz portfolio
  • When you created article you have choose tag for this article

Change background

How to change background

  • You have to upload image bg-blog-page.png to folder images in template tz_diary
  • If you don't want to show background you can change code css line 1665 in template.css

Com TZ Portfolio

Creating Portfolio

  1. Document Com TZ Portfolio: Portfolio document
  2. Set up component TZ Portfolio: Extract component.zip and install 20120622_com_tz_portfolio_joomla2.5_v2.5.8.zip
  3. Setting Component TZ Portfolio:
    • Step 1:
    • Step 2: TZ portfolio
    • Step 3: TZ Images

T3 Framework 2.0 Documentation

Look documentation of T3 framework 2.0.

Videos of T3 framework 2.0:

  1. T3 Framework 2.0 Overview
  2. Themes and Layouts

Source and Credits


  1. T3 Framework 2.0
  2. TZ Portfolio Component
  3. Module Twitter
  4. Module SocialNetwork
  5. Module TZ News
  6. Module Flick Stream
  7. Module Xperttabs

Icon & Image

  1. http://www.templaza.com/188-cute-icon-set.html
  2. http://www.flickr.com/photos/ag2r/page3/


  1. Desyrel
  2. Qikki-Regular
  3. Arial