Simple

Joomla Template Documentation


Simple Responsive Joomla Template is a clean, modern and very stylish template built for Joomla 2.5 & Joomla 3 with Twitter’s Bootstrap & Helix framework. Using the latest techniques in HTML5 and CSS3, Simple comes packed with free modules and an intuitive template administration panel.

It comes with a layout builder and you can styling, colors, fonts directly from within the backend. Build your own clean color preset or use one of 6 presets right out from Joomla Template Manager. Font, background and color options as well as the dynamic template builder will help you create the Website you need in no time. In addition to the global options you can set unqiue styling options for each entry as seen in the theme demo.

Full list of Features:

Template Installation

Package Contents

Package
              |- Documentation   : Template Documentation
              |- Licensing         : Folder contains License
              |- Extensions      : Folder contains extensions
              |- Quickstart Package : Folder contains Quickstart Install Package
              |- PSDs            : Folder contains design in psd format.
              |- Template Only   : Folder contains template only install pack.

Before starting to use this template, let's assuming that you had some basic Joomla! Experience. Installing extensions, basic actions like enable/disable entensions, create modules and asign position... and some basic configuration. However, if you're not, you should take time to learn about Joomla, how to use it and how it works at Joomla! Documentation.

Technical Requirements

Ok, now when you're ready, let's start by unpack all files and folders of the Template Package file to a folder.

Quickstart Pack Installation

The Quickstart Package consists on a complete pack of Joomla!, Joomla Template, Extensions and Sample Content, excellent for beginner users to explore back-end settings and sample content. Installing the Quickstart is just like installing Joomla! and is recommended for newbies but also good for anyone who don't want to go through the individual setup of each component, module or plug-in. After the installation complete, you will have a replica of the live demo that we have.  Once your environment is ready, follow this quick guide:

  1. Localhost only: Create a new folder in the htdocs folder for Xampp (www folder for Wamp). Unpack the contents from simple_quickstart_3.3.x.zip to that folder.
  2. Live site only: Upload simple_quickstart_3.3.x to your server using your favorite FTP software. Generally, you will unpack it under public_html folder, www root folder (windows hosting) or the root folder on your server.
  3. Access your site on the browser, http://localhost/your_folder on localhost or http://yoursite.com on your live site.
  4. Follow the Joomla installation prompts as you would a normal Joomla installation and don't forget to install sample data.
  5. Once the installation complete, delete the installation folder, view site and you'll see your site should look exactly like the demo version.
  6. Watch this video tutorial on how to install Joomla! Click here!

Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, various extensions, so you just decided you want to improve the design of your website. Because the development of this template is based on Helix Framework so you will need to install the Helix System Plugin First. So here's what you have to do:

  1. Log-in to your Joomla! back-end (www.your-website.com/administrator).
  2. If your website is already had Helix System Plugin then pass this step, otherwise just download System Plugin Joomla 2.5 & 3 and install it.
  3. Now Enable Helic Framework Plugin.
  4. Install Template, make it dedault, go to front-end and check the new module positions. You will have to reassign your modules to the new positions of the template.

Note: Some users have issues while installing quickstart pack or template on Wamp server (for testing and exploring), this issue is solved by enable curl in php settings. You need to edit 2 files php.ini inside wamp/bin/php/{your php version}/ and wamp/bin/apache/{your apache version}/bin/. Search for extension=php_curl.dll and remove semicolon before this line. Save and restart your wamp and everything will work fine.

Customizing The Template

Open up this template configuration by go to Extensions > Template Manager, click on the name of this template and you will see all settings that you can make.

Basic

You can config : Layout, Header, Logo, Footer, Goto Top.

Presets

You can config : Preset for main color, menu color, header color... .

Using Layout Builder

Now we'll go through settings inside Layout Tab which represents the most advantage feature - Layout Builder. With Layout Builder, you can create/remove/edit positions to display modules dynamically.

Go to Layout tab and you will see something like this.

Config for row

Config for column, use grid options Bootstrap 3

Custom module positions

With this template, we have two ways to do this. The first and easy way is enter position name on Module Manager of your Module. After that, go to Layout Tab of this template configurations, click the cog icon of any column, in position dropdown field of column settings, you'll see your position there, choose it then your module will displays output on that column. Note that if you use this way, all positions are gonna be saved in database. Your templateDetails.xml file won't change.

The second way is also pretty easy. Just edit templateDetails.xml inside folder templates/template_name. Find <positions> tag and add as many positions as you wish. For example, we add new position before footer and name it custom-pos like this:

<positions>
                <position>logo</position>
                <position>menu</position>
...
<position>custom-pos</position>
<position>footer1</position>
<position>footer2</position> </positions>

You can add positions on any line inside <positions> tag, we added it in that line because it's easy to read further on. And now, your custom position will appear on solumn settings in Layout tab of template settings (reload your admin page to make it works).

Now you can assign display of modules by add position to it and don't forget to create new column (and row) if necessary and set position field of column settings to your custom position you've just created.

Menu

You can config : Menu language, Menu mobile, Menu style ...

Font

You can config : Body Font, Header Font, Other Font ...

If many selectors please use (,) EX: body, h1, h2

Cookie Law

Advanced

Using Shortcodes

Shortcodes are small bits of code that cut down on repetitive typing of HTML while adding "cool features" that are easily accessible to content creators. Rather than writing html code, this feature help you produce html outputs in easy way with tags. You can add css selector to it like normal html tag and style. Just write an article and copy, paste, or type shortcodes code, you'll see it work at front-end.

Accordion

[accordion]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
              [accordion_item title='ITEM_TITLE' icon='ITEM_ICON' title_margin='30px']ADD_CONTENT_HERE[/accordion_item]
            [/accordion]

Carousel

[carousel]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
              [carousel_item]image link [caption]caption text here![/caption][/carousel_item]
            [/carousel]

Tab

[tab]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
              [tab_item title="ITEM_TITLE"]ADD_CONTENT_HERE[/tab_item ]
            [/tab]

Icon

[icon name='ICON_NAME' size='15px' color='#abcxyz' class='abc']ADD_CONTENT_HERE[/icon]

Currently, we use Fontawesome Version 4.2 For icon and icon name, please visit Fontawesome Cheatsheet.

Testimonial

[testimonial
                name="AUTHOR_NAME"
                email="AUTHOR_EMAIL"
                company="AUTHOR_COMPANY"
                designation="AUTHOR_DESIGNATION"]
              content
            [/testimonial]

Buttons

              [button type="flat" size="" link="#"]Flat[/button]
              [button type="3d" size="" link="#"]3D[/button]
              [button type="outline" size="" link="#"]Outline[/button]
              [button type="info" size="" link="#"]Info[/button]
              [button type="success" size="" link="#"]Success[/button]
              [button type="warning" size="" link="#"]Warning[/button]
              [button type="danger" size="" link="#"]danger[/button]
              [button type="inverse" size="" link="#"]Inverse[/button]
              [button type="block outline" size="large" link="#"]Block level button[/button]
              [button type="flat" size="large" link="#"]Large button[/button]
              [button type="flat" size="" link="#"]Default button[/button]
              [button type="3d" size="small" link="#"]Small button[/button]
              [button type="outline" size="mini" link="#"]Mini button[/button]

Rows and Columns

Columns with are set by bootstrap classes.

[row id="ROW_ID" class="ROW_CLASS"]
			[col class="col-lg-4 col-md-4 col-sm-4 col-xs-12"]ADD_CONTENT_HERE[/col]
			[col class="col-lg-4 col-md-4 col-sm-4 col-xs-12"]ADD_CONTENT_HERE[/col]
			[col class="col-lg-4 col-md-4 col-sm-4 col-xs-12"]ADD_CONTENT_HERE[/col]
			[/row]

Image Gallery

[gallery columns="number of columns" filter="yes"]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
            [/gallery]

Image ST Gallery

[stgallery columns="number of columns" filter="yes"]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
              [gallery_item tag="tag to filter" src="image path"/]
            [/stgallery]

Video

[spvideo]youtube or vimeo link[/spvideo]

Google Map

[map 
                lat="LATITUDE"
                lng="LONGITUDE"
                zoom="VALUE 1 to 10"
                maptype="map type"
                height="height in number"
            ]

Alert

[alert type="TYPE"]ADD_CONTENT_HERE[/alert]

type=warning, danger, success, info

Quote

[quote align='align' source='source']content[/quote]

align=left, right

Extensions

Unite Revolution Slider [Link] [Docs] : This is a commercial extensions and you can only use this along with this template for only 1 project.

Responsive Scroller for Articles: Responsive Scroller for Articles Module

BT Google Maps: BT Google Maps Module

SP Tweet: SP Tweet Module

ST Price Table: ST Price Table Module

ST Fancy Icon Boxes: ST Fancy Icon Boxes Module

ST Parallax: ST Parallax Module

ST Partner: ST Partner Module

ST Team: ST Team

ST Testimonial: ST Testimonial Module

Home Page Build Example

While configurating extensions may messing you up, here we will provide an example configurations and settings to make homepage looks like our demo. Before we start, let's make a template style by goto Template Manager, open up this theme style settings (choose the default one), type a new style and save as copy.

Creating Layout

Go to Layout Tab in your Template Style Manager and make something Like this. Maybe you won't need to do anything because the default Style on the template was already made it.

Slider Configuration

This template uses Unite Revolution Slider (valued at 25$). For more information, tutorials and documentation, please visit UniteCMS website. Your job is to make new slider and config it. The slider settings UI is easy to follow. Bellow image shows single slide edit screen.

Main Menu > Components > Unite Revolution Slider 2

Users

user1, user2, user3, user4

Main Menu > Extensions > Module Manager, Filter: user1

Our work

Main Menu > Extensions > Module Manager, Filter: our-work

Last Words

Thanks for purchase our template, hope you happy with it. And if you need any support or have any question please visit out support forum or email to us.