1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Layouts and Module Positions
  5. CSS Files and structure
  6. Modules
  7. Config Template
  8. Plugins
  9. Set up Page
  10. Files Supplied
  11. Com TZ Portfolio
  12. Source and Credits

Meloul version1.0 Template

Documentation 1.0


Thank you for use my theme. If you have any questions that are beyond the scope of this help file, please feel free to post it on out forum here. Thanks so much! This documentation was made only with the Documenter (except the images)

Quickstart Installation


Quickstart = Joomla + Meloul Template + Demo Content. After installation you'll see complete site like a Demo Site. So, if you're running for new website, I do urge to install using the quickstart file. But, If you've already had a joomla website with your own content, you could install only the Template to keep your own data

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

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

  3. Complete Install


    Complete Install


    Complete Install


    Complete Install


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


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

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

Template Installation


Installation Meloul 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 Meloul 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_meloul - Default and click "Make Default". Refresh your site.

make default theme


make default theme

Layouts and Module Positions


Layouts



Meloul has 2 layout

View layouts

Go to template manager and choose edit template default

In tab "Layout" you can choose layout and view block, position in this layout

layout default

Use Layout

Example: create menu item "Home" and choose layout home

If has not layout Home, we will created layout home

Step 1:

Go to menu/main menu/ create menu item "Home".

Step 2:

Go to Extensions/Template manager/choose template "tz_meloul"

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

    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:

  7. Or you can go to folder templates > tz_Plazart Blank > 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 :

Modules


Modules in Home page

Home page

  1. Logo Loading

    • Module Type : Custom HTML
    • Module Position : loading

    Content:

  2. Logo Website

    You can change logo in config of template

  3. Module Menu

    Module
    • Module Type : Menu
    • Module Position : menu

    Created:

    • Step 1: Create new menu
    • go to extension/ modules manager/ create new module and choose type "menu"
  4. Module Search

    Module
    • Module Type : Search
    • Module Position : search

    Create:

    Go to module manage and create new module and choose menu type is "search" and choose position is "search"

  5. Module Slide Music

    Module
    • Module Type : TZ Play Music
    • Module Position : slide

    Created:

    • Install module mod_tz_play_music and set up as:
    • Module
  6. Module News Release & Music Video

    Module
    • Module Type : TZ News Pro
    • Module Position : headline
    • Module Class Suffix : _latest_new(News Release)
    • Module Class Suffix : _bg_gradien(Music Video)

    You can see Module config

    Module

  7. Module Action

    Module
    • Module Type : Custom HTML
    • Module Position : spotlight

    Content:

    Module
  8. Module Latest News

    Module
    • Module Type : TZ News
    • Module Position : user5

    Config:

    Module
  9. Module Our Clients

    Module
    • Module Type : TZ Guest Book
    • Module Position : user6
    • Module Class Suffix : _clients

    Config:

    Module
  10. Module Newsletter

    Module
    • Module Type : Custom HTML
    • Module Position : user6

    Content:

    Module
  11. Module TZ Twitter Widget

    Module
    • Module Type : TZ Twitter Widget
    • Module Position : bottom

    Config:

    Module
  12. Module in position: bottom1, bottom2, bottom3

    Module

    Module About us

    • Module Type : Custom HTML
    • Module Position : bottom1
    • Content:
      Module

    Module Album

    • Module Type : Module Menu Categories
    • Module Position : bottom2
    • Content:
      Module

    Module Contact us

    • Module Type : Custom HTML
    • Module Position : bottom3
    • Content:
      Module
  13. Change copyright and logo framework please read Config Template



  14. Modules in Blog page


    Blog page


  15. Set up Blog page:
    1. Create menu item Blog and choose menu type is (TZ Portfolio/Portfolio)
      Blog
    2. And you can see params config
      Blog
  16. Module Text Widget
    • Module Type : Custom HTML
    • Module Position : right
  17. Module Random Music
    • Module Type : TZ Play Music
    • Module Position : right
    • Config:
  18. Module News Release
    • Module Type : TZ News Pro
    • Module Position : right
    • Config:
  19. Module Latest Post
    • Module Type : TZ News Pro
    • Module Position : right
    • Config:


  20. Blog Timeline page


    Blog page


    Set up page same as Blog page

    However when you create menu item you choose (TZ Portfolio/ Time line)




    Album page


    Album page


    Set up Album page

    You create menu item you choose (TZ Portfolio/ Blog)

    Album page


    Guest Book page


    GuestBook page


    Set up GuestBook page

    You create menu item you choose (TZ GuestBook/ Guestbook)

    GuestBook page


    Contact page


    Contact page


    Set up GuestBook page

    You create menu item you choose (Contacts/ Single Contact)


  21. Module Social Contact
    • Module Type : Module social network
    • Module Position : contact
    • Config: You can upload icon social or icon hover in options of module

  22. Module Google Map
    • Module Type : Custom HTML
    • Module Position : contact
    • Create:
    • 1. You go to system/global configuration and find "Default Editor *" choose value is "None"

      2. You go to module manager and create new module with type "Custom html" in position "contact" and paste your google code

Files Supplied

Video:

ogv, m4v


Audio:

mp3, ogg


Convert ogv, mp3, ogg at link http://video.online-convert.com/

Convert m4v at link http://www.wondershare.com/convert-video-audio/mp4-to-m4v.html

Upload article:

Config Template


Go to template manage choose template default


Config Theme

You can change logo and change copyright

Change logo framework:
You upload image with name (framework-logo.png) to folder images path(templates/plazart_blank/images)


Config Layout

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

and you can set width for sidebar of template


Config Font

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


Config Menu


Config Social API

You can choose social in detail page article as: Facebook like, Google+ like and share, Twitter and pinterest


Config Advanced Setting

You can compression css and js for load web is quickly

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

Plugins


On this section, I wouldn't explain all used plugin on this template. I would only remind about the plugins listed below should be enabled

Or you might be interested in more functionality of Editor - TinyMCE plugin, you could set its functionality into extended

Com TZ Portfolio


Creating Portfolio

  1. Document Com TZ Portfolio: Portfolio document
  2. Set up component TZ Portfolio: Extract component.zip and install 20121229_com_tz_portfolio_joomla3.0_v3.0.3.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

Source and Credits


Extentions

  1. Plazart Framework 1.0
  2. TZ Portfolio Component
  3. Module Twitter
  4. Module TZ News Pro
  5. Module TZ Music
  6. Module TZ Tags

Icon & Image & Video Music

Icon
  1. http://twitter.github.com/bootstrap/
    Image
  1. http://www.flickr.com/groups/fashionphotography/pool/
  2. http://www.flickr.com/search/?z=e&w=all&q=music&m=text
    Video & Music
  1. https://www.youtube.com/watch?v=4-Ddumty4mk
  2. https://www.youtube.com/watch?v=cP0f5rvVkAU
  3. https://www.youtube.com/watch?v=5kf_U87UahA
  4. https://soundcloud.com/epickayay-musicflavor/to-the-racetrack-1
  5. https://soundcloud.com/kamransyed/coldplay-clocks-kamran-remix
  6. https://soundcloud.com/nedleyfallsmusic-1/to-wonderland-royalty-free

Fonts

  1. Source Sans Pro
  2. Verdana