1. Start
  2. Quickstart Installation
  3. Template Installation
  4. Layouts and Module Positions
  5. CSS Files and structure
  6. Modules
  7. Config Template
  8. Create new style
  9. Plugins
  10. Typography & Short code
  11. Com TZ Portfolio
  12. Create content Quote...
  13. Source and Credits

Dreame version 1.1 Template

Documentation 1.1


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 + Dreame 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 Dreame 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 Dreame 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_dreame - Default and click "Make Default". Refresh your site.

make default theme


make default theme

Layouts and Module Positions


Modules Position

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

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

    module positions

    module positions

  6. afterwards, you go to your site and call your site like this http://yourlivesite.com/?tp=1 then you’ll have all information about module position that is used in this template. Then will see your website like this image below:

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 Website

    You can change logo in config of template

  2. Module Search

    You can create your module search and choose position "search"

    • Module Type : search
    • Module Position : search
  3. Module NewsLetter

    Module
    • Module Type : Custom HTML
    • Module Position : left

    You can click "toggle editor" to view HTMl code

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <form class="letter" 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="letter font-italic" onfocus="if(this.value=='Your email address') this.value='';"
                            onblur="if(this.value=='') this.value='Your email address';" type="text"
                            name="email" value="Your email address" />
                        <input type="hidden" name="uri"
                            value="templaza/blog" /> <input type="hidden" name="loc"
                            value="en_US" /> <input class="subcription_btn " type="submit" value="Submit" />
                    </form>
                
  4. Module Text Widget

    You can inset your text or images to display

    Module
    • Module Type : Custom HTML
    • Module Position : left
  5. Module Partner

    Module
    • Module Type : Custom HTML
    • Module Position : left
  6. Module Twitter

    Module
    • Module Type : Tz Twitter Widget
    • Module Position : left

    You can config module

  7. Module Facebook

    Module
    • Module Type : Custom HTML
    • Module Position : left

    You can to to Facebook developer to get code facebook

    Content:

                    <div class="fb-like-box" data-href="https://www.facebook.com/templaza"
                    data-width="900" data-height="350" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"> </div>
                
  8. Module Copyright

    Module

    You can change your copyright in content of module.

    • Module Type : Custom HTML
    • Module Position : left


  9. Contact page


    Contact page


  10. 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

      content:

                          <p><iframe src="https://maps.google.com/?ie=UTF8&amp;ll=35.290469,-89.395752&amp;spn=2.873825,6.696167&amp;t=m&amp;z=8&amp;output=embed"
                          frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="500"></iframe></p>
                      

Config Template


Go to template manage choose template default


Config Theme

You can change logo and height of items portfolio...


Config Layout

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


Config Menu

You can choose megamenu

You can create class, submenu, width, insert module in menu...


Config Font

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



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.



Config Color Theme

You can change style for template from default to dark or ...

You can change logo, background (image, color, pattern), change color title, text,...

Create new style (example dark style)


Step 1: You to go extensions/template manager and choose edit "tz_dreame" template and click save as copy:

Step 2: You can change profile name to "dark" and config "Theme"

Step 2: You can change color, background... "Color 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

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

    

Price Table

Code Price Table

<div class="row-fluid">
    <div class="span12">
        <div class="group-title">Pricing Table</div>
        <div id="pricing-table-1" class="full-boxed-pricing  row-fluid">
            <div class="column span4">
                <ul class="price-title unstyled">
                    <li class="title-row">Free Package</li>
                    <li class="pricing-row">
                        <div class="price price-with-decimal"><label>$</label><em class="exact_price">0</em><em class="time">/month</em></div>
                    </li>
                </ul>
                <ul class="unstyled">
                    <li class="normal-row">Vestibulum erat</li>
                    <li class="normal-row">Accumsan posuere</li>
                    <li class="normal-row">Unlimited Users</li>
                    <li class="normal-row">Sodales molestie</li>
                    <li class="normal-row">Mauris ut ante lacus</li>
                    <li class="normal-row">Vehicula dignissim</li>
                    <li class="footer-row"><a class="btn btn-large bg-orange" href="#" target="">Sign Up </a></li>
                </ul>
            </div>
            <div class="column span4">
                <ul class="price-title unstyled">
                    <li class="title-row">Pro Package</li>
                    <li class="pricing-row">
                        <div class="price price-with-decimal"><label>$</label><em class="exact_price">10</em><em class="time">/month</em></div>
                    </li>
                </ul>
                <ul class="unstyled">
                    <li class="normal-row">Vestibulum erat</li>
                    <li class="normal-row">Accumsan posuere</li>
                    <li class="normal-row">Unlimited Users</li>
                    <li class="normal-row">Sodales molestie</li>
                    <li class="normal-row">Mauris ut ante lacus</li>
                    <li class="normal-row">Vehicula dignissim</li>
                    <li class="footer-row"><a class="btn btn-large bg-orange" href="#" target="">Sign Up </a></li>
                </ul>
            </div>
            <div class="column span4">
                <ul class="price-title unstyled">
                    <li class="title-row">Ultimate Package</li>
                    <li class="pricing-row">
                        <div class="price price-with-decimal"><label>$</label><em class="exact_price">20</em><em class="time">/month</em></div>
                    </li>
                </ul>
                <ul class="unstyled">
                    <li class="normal-row">Vestibulum erat</li>
                    <li class="normal-row">Accumsan posuere</li>
                    <li class="normal-row">Unlimited Users</li>
                    <li class="normal-row">Sodales molestie</li>
                    <li class="normal-row">Mauris ut ante lacus</li>
                    <li class="normal-row">Vehicula dignissim</li>
                    <li class="footer-row"><a class="btn btn-large bg-orange" href="#" target="">Sign Up </a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
    

Price Table 2

Code Price Table 2
<div id="pricing-table-2" class="full-boxed-pricing  row-fluid">
    <div class="column span4 column-first">
        <ul class="price-title unstyled">
            <li class="title-row">Free Package</li>
            <li class="pricing-row">
                <div class="price price-with-decimal"><label>$</label><em class="exact_price">0</em><em class="time">/month</em></div>
            </li>
        </ul>
        <ul class="unstyled">
            <li class="normal-row bg-gray">Vestibulum erat</li>
            <li class="normal-row">Accumsan posuere</li>
            <li class="normal-row bg-gray">Unlimited Users</li>
            <li class="normal-row">Sodales molestie</li>
            <li class="normal-row bg-gray">Mauris ut ante lacus</li>
            <li class="footer-row"><a class="btn btn-medium bg-orange" href="#" target="">Sign Up </a></li>
        </ul>
    </div>
    <div class="column span4 over">
        <ul class="price-title unstyled">
            <li class="title-row">Pro Package</li>
            <li class="pricing-row">
                <div class="price price-with-decimal"><label>$</label><em class="exact_price">10</em><em class="time">/month</em></div>
            </li>
        </ul>
        <ul class="unstyled">
            <li class="normal-row bg-gray">Vestibulum erat</li>
            <li class="normal-row">Accumsan posuere</li>
            <li class="normal-row bg-gray">Unlimited Users</li>
            <li class="normal-row">Sodales molestie</li>
            <li class="normal-row bg-gray">Mauris ut ante lacus</li>
            <li class="footer-row"><a class="btn btn-medium bg-orange" href="#" target="">Sign Up </a></li>
        </ul>
    </div>
    <div class="column span4">
        <ul class="price-title unstyled">
            <li class="title-row">Ultimate Package</li>
            <li class="pricing-row">
                <div class="price price-with-decimal"><label>$</label><em class="exact_price">20</em><em class="time">/month</em></div>
            </li>
        </ul>
        <ul class="unstyled">
            <li class="normal-row bg-gray">Vestibulum erat</li>
            <li class="normal-row">Accumsan posuere</li>
            <li class="normal-row bg-gray">Unlimited Users</li>
            <li class="normal-row">Sodales molestie</li>
            <li class="normal-row bg-gray">Mauris ut ante lacus</li>
            <li class="footer-row"><a class="btn btn-medium bg-orange" href="#" target="">Sign Up </a></li>
        </ul>
    </div>
</div>
    

Social

Social code

<div class="social-icon">
    <a class="size30 tz-font-icon tz-font-icon-a  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-facebook  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-twitter2  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-plus  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-skype  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-linkedin  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-deviantart  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-bloger  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-twitter  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-myspace  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-flickr  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-tumblr  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-rss  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-stumble  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-vimeo  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-wordpress  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-youtube  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-yahoo  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-aim  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-dribble  color-black hover-none"></a>

    <a class="size30 tz-font-icon tz-font-icon-behance  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-apple  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-window  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-add  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-share  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-like  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-picasa  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-lastfm  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-pin  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-ember  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-qik  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-soundcloud  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-me  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-pinterest  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-down  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-repeat  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-flow  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-star  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-music  color-black hover-none"></a>
    <a class="size30 tz-font-icon tz-font-icon-completed  color-black hover-none"></a>


    <a class="size30 tz-font-icon tz-font-icon-facebook bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-twitter2 bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-plus bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-skype bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-linkedin bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-deviantart bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-bloger bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-twitter bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-myspace bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-flickr bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-tumblr bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-rss bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-stumble bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-vimeo bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-wordpress bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-youtube bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-yahoo bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-aim bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-dribble bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-behance bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-a bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-apple bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-window bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-add bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-share bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-like bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-picasa bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-lastfm bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-pin bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-ember bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-qik bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-soundcloud bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-me bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-pinterest bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-down bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-repeat bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-flow bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-star bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-music bg-black font-border-circle color-white"></a>
    <a class="size30 tz-font-icon tz-font-icon-completed bg-black font-border-circle color-white"></a>


</div>
    

You can see custom code typography in typography-code.html

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

Create content Quote, Link, Audio


You can go to components/ TZ Portfolio/ article and create new article.

Source and Credits


Extentions

  1. Plazart Framework 1.3
  2. TZ Portfolio Component
  3. Module Twitter
  4. Module TZ Social

Icon & Image

Icon
  1. http://twitter.github.com/bootstrap/
    Image
  1. http://www.flickr.com/photos/markjsebastian/page5/

Fonts

  1. Open Sans
  2. Raleway
  3. Libre Baskerville
  4. Arial

Music

  1. https://soundcloud.com/wearecc/tropic-of-cancer-2