Installation

If you already have joomla installed and would like to install this template, then the standard install is quick and easy. Follow these steps to get this template installed on your existing website.

To install this template, you can either perform a standard install (template only) on your joomla site or use the quickstart package.  The quickstart package is ideal if you are starting from a blank site.  If you have an existing website, then its best to just install the template like installing any regular joomla extension.

Standard Install (Template Only):

Requirements:

1. You will need a copy of Joomla running on your computer or web server. If you do not have joomla, get the latest copy of Joomla (Stable Version): (Download here & Getting Started Instructions here).
2. Download your copy of the template.

Installation Procedure:

1. To install the template, login to the joomla administrator backend and select: Extensions > Extension Manager
   
2. Click Browse to locate your template file on your computer.
3. Once you have selected the file, click the Upload File and Install button to begin the template installation.
4. Once the template has been installed, a brief success message is displayed.
5. To activate your new template, click on Extensions > Template Manager.
6. You should now see your new template listed as one of the options.
   1. Click to select the radio box on the left of your template.
   2. Click the Default icon (“star”) on the top right of the page.
   3. You should now see a star appear next to your selected template. This means that the current template is the default template for your website.
   4. Go to your website front-end (homepage) and verify that your new template has indeed been installed correctly.

Quickstart Install (New / Full Site):

Installing the quickstart package is the easiest way to get up and running quickly. The quickstart package contains a copy of Joomla! and the sample content for this template.

• Locate and extract the Quickstart zip file on your computer.
• Upload the extracted files over to your webhost or local webserver directory
• In your browser, navigate to the directory where you have uploaded the quickstart files.
• You should be greeted by the default Joomla installer page.
• Proceed as per standard joomla installation - remember to install the sample data.

Template Guides

These are special features we've baked into this template to allow you to easily layout the modules on your site. Remember to turn both of these options OFF before going live with your production website. These are described below:

Show Layout Grid

During development of your site, you may display a vertical grid overlaid over your website to view the layout in more detail so you can customize the grid widths of each module more easily.

Show Module Positions

During development of your site, you may want to visualize all the unused / available module positions. Setting this to YES will quickly show you where each module position is on the front-end of the site.

Module Positions

This template has one main sidebar that houses 16 indvidual module positions. These are (from top-top bottom and left to right):

• Top
• Search (for Search)
• Showcase (FLEX)
• Feature (FLEX)
• Nav (for Navigation)
• Left (generic sidebar)
• User1
• User2
• Breadcrumbs
• User3
• User4
• Right (generic sidebar)
• Content-Bottom (FLEX)
• Bottom (FLEX)
• Footer-Nav (footer Navigation)
• Debug (visible debug position)

Items marked FLEX are flex module positions and can hold multiple modules in the same position.

Flex Modules

This template features several Flex Module positions.  These modules behave just like regular module positions, but have one special feature: you can customize the width of each module to any size you want.  To set a desired width of the module, click on the module you wish to customize and then locate the Module Class Suffix parameter under the Advanced Options of the module (see screenshot). This template is based on the 960 grid framework, so you can set module class suffix of the module to any grid width e.g. grid_1, grid_2, grid_3 ... upto grid_16.  Grid withs start with the prefix "grid_" and end with a number ranging from 1 to 16. If the module class suffix is not set, then the module widths are calculated automatically and the modules are tiled with equal widths horizontally.

See the section template guides to help easily calculate the perfect the grid widths that you require.

Logo Customization

To customize the site with your own logo, you can either opt for a grapical image logo or a text based logo.

Text Logo

For text based logos, select Logo type: text under the Logo section of the template parameters. Thereafter, you can specify the logo text below.  For text based logos, you can also select a google font.

Image Logo

To set an image logo, select Logo type: image under the Logo section of the template parameters.  Image logos can be uploaded using the joomla's media manager and are usually located under the site's images directory.

Module: Menu

To set the main navigation menu, publish a menu module in the nav module position. This module can cater for multi-level dropdown menus as well, and should you require dropdown menus for your site, Set the Show Sub-menu Items to Yes under the module's basic settings. Under the Miscellaneous settings of the template parameters, you can also specify weather you wish to use superfish (dropdown with animation) menus or CSS only menus without animation.

Module Options (Details Panel):

• Module Position: nav
• Show Title: hide
• Status: Published

Parameters (Basic Options):

• Show Sub-menu Items: Yes <- Set this if you require drop-down menus!

Parameters (Advanced Options):

• Menu Tag ID: (leave this empty)
• Menu Class Suffix: (leave this empty)
• Module Class Suffix: (leave this empty)

Module: Search

The search module should be published in the Search module position. Additional paramters for this module should be set as shown below:

• Search Button: No (optional)
  
• Search Button as Image: No

Color Options

This template supports several foreground and background presets. The color themes can be set under the template's Administration parameters:
Extensions > Template Manager > Business 2.0

Here, you will be able to set the foreground theme and the background image pattern to suit your websites profile. There are 4 foreground themes and 18 background presets that you may select as well as the option of specifying a custom background image pattern.

Layout Options

Adjusting the width of the sidebars for this template is as easy as selecting the width from the dropdown paramter under the template's Administration parameters:

Extensions > Template Manager > Business 2.0

Sidebar Widths:

This template supports the following preset widths for each of the sidebars:

1. 0px (sidebar disabled)
2. 100px
3. 160px
4. 220px
5. 280px
6. 340px
7. 400px
8. 460px

Column Layouts:

This theme is based on the popular 960.gs CSS Grid Framework. You can easily adjust the theme's layout settings by modifying the width of both the left and right column from within the Joomla Administrator section. The content column in the center automatically adjusts according the the available width.

Front-end Editing with 3 columns:

If you have both the left and right module positions published, you can also set the Hide Right Col on Edit parameter to Yes if you wish to Hide the right column when the editor is open on the frontend of the site. This allows the editor window to occupy a larger area, making it easy to edit content on the front-end.

Module Variations

The default module style for the left and right columns has a light gray background. To change this, you may apply the following module class suffixes to any of the modules displayed in the right or left positions.  Below is a list of module variations that are supported on this template:

Module class suffixes can be under the Advanced Options panel of a module's settings page. When adding a module class suffix for this template, it is preferred to prefix it with a space " ". So the above module class suffixes will look like " modlight" (without quotes).

Footer Copyright Text

To change the Footer copyright text to something more suitable for your website, modify the Copyright Text field in the template's administation paramters (Extensions > Template Manager > Business 2.0). You may enter plain-text or html in this field.

You can also set the width of the copyright block in the template parameters, below the copyright text field.

Module: Breadcrumbs

The breadcrumbs module should be published in the breadcrumbs position. Note that by default, the breadcrumbs will not be shown on the homepage of the template.

Mobile Site

This template comes with a built-in mobile-friendly theme that specifically adapts your site for any visitors that are viewing the website using a smart phone or tablet. The mobile theme provides a simple and elegant browsing experience for visitor to your device using a small screen browser. You do not have to install any third party plugins or manage a separate site for your mobile traffic - just turn enable the feature in the template options. The mobile theme supports most modern smartphones, including the very popular iPhone and Android handsets as well as tablets.

Under the Mobile template parameters, you can select to enable or disable the mobile theme for smartphones or tablets. You can also specify the menu link labels and text descriptions for the mobile navigation.

The mobile theme a top navigation bar with for links:

• Menu: This is a link to the site's navigation. The mobile theme uses the same navigation module as the desktop site (published under the nav module position). 
• User Link: This is customizable under the template parameters. It can link to any joomla module that is published in the mobileuser module position or link to a specific menu item directly. If you have a special page for mobile users, then it may be helpful to link to this page directly from the main navigation page using the user link. Alternatively, you could publish any joomla module in the mobileuser position (e.g. Latest News, Menu, etc) and allow the user link to point to this module position.
• Search: This is a link to the site's search. The mobile theme uses the same search module as the desktop site (published under the search module position).
• Desktop: This is a link to switch directly to the desktop version of the site.

There is also a link at the bottom (right side on tablets) that allows the visitor to switch to desktop theme.  The language strings for this can also be set within the template parameters.

Google Fonts

Typography Options

The typography options allow you to set the default font size of the template, the default font stack and specific font settings for Headings, Module Titles and the Logo.

Using Google Fonts

This template allows for specific google fonts for the Page and Content Headings, Module Headings and Logo. To specify a specific google font for any of these:

1. Set Enable Google Fonts under the Typography section to Yes.
2. Visit the Google Web Fonts page at http://www.google.com/webfonts and select your desired font. 
3. Copy the name of the font as shown in the attached screenshot below.
4. Paste the name of the font into the template options.

You may also optionally adjust the font size and / or font weight.

Miscellaneous

The miscellaneous section caters for the following settings:

Back to top link

The back to top link that appears on the the bottom right corner of every page when a visitor begins to scroll down a page can be enabled or disabled using this setting.

Homepage Breadcrumbs

If disabled (set to No), then this option hides the breadcrumbs module on the homepage.  Generally, showing the breadcrumbs on the homepage displays the word Home only, so some may choose to hide this.

Menu Type

Select between the superfish dropdown menu or pure css dropdown menu.  The superfish dropdown menu uses the jQuery JavaScript library whilst the CSS menu does not require any JavaScript.  If your site does not make use of drop down menus, its prefereable to set this to CSS Menu.

Copyright Block:

Specify the width and text content of the copyright block that is shown at the bottom of every page on the site.  One may enter valid HTML in the text area.  To hide the copyright block, simply select Hide Copyright Text option under the Copyright Block Width select box.

Google Analytics ID

Enter your Google Analytics web property ID. (It looks like this: UA-XXXXX-X). Leave blank if you do not want to track with google analytics.  The google analytics tracking code is automatically inserted into the main template, the error page and the offline page.

Advanced Options

The Advanced section caters for the following settings:

Disable Mootools:

This option allows you to unload the Mootools and captions javascript libraries that are loaded by default within joomla.

Display JS Warning:

This option allows you to set a warning to be displayed on the front-end for visitors that have javascript turned off with an instructional link on how to enable javascript.

CSS Compression:

This option allows you to compress all the templates stylesheets into one file to increase site performance.

JC Compression:

This option allows you to compress all the javascript files into one file to increase site performance.

jQuery Source:

Select where you would like to load jQuery from. Options include:

1. Load Locally (version bundled with the template)
2. Google CDN (default option)
3. jQuery CDN
4. Do Not Load jQuery

jQuery Version

When loading jQuery from a CDN (Google CDN or jQuery CDN), one can opt to load a specific version of jQuery.  To load a specific version of jQuery, simply enter the version number, e.g. 1.4.0 or 1.7.1 etc.

Scripts (Body)

Any JavaScript you may wish to load before the closing </body> tag can be entered here.  This may be useful for analytics or advertising scripts you may wish to load on your site.  Opening and closing <script></script> tags are not required.

Scripts (Head)

Any JavaScript you may wish to load before the closing </head> tag can be entered here.  This may be useful for analytics or advertising scripts you may wish to load on your site.  Opening and closing <script></script> tags are not required.

CSS Overrides

Add any CSS to override default styles. Opening and closing <style></style> tags are not required.  E.g. to change the link color to red, one may enter the following CSS Override:

a:link {color:#FF0000; }

Generator Meta Tag:

Allows you to specify a custom Generator Meta tag, Use the default Meta Tag or Disable the Meta tag completely.  If you select a custom Meta tag, you will also need to provide the Generator Meta Text in the field below.

Slideshow

Showcase Slider

The homepage slider (as shown on the demo homepage) is created using the DJ Image Slider module.  This is a free module that can be downloaded from here. You will need to download the module and the component (optional).  You can use the module on its own, or you can use the component along with the module.  If  need to add headlines and descriptions to each slide image, then the component is required. If you simply want to display a slideshow of images without any headlines or descriptions, then the component is not required and you can upload all your images to a folder and set the module to cycle through the images one-by-one.

Once you've installed the dj image slider module, go to the extensions manager, open the module and apply the following settings:

• Module Position: showcase
• Show Title: Hide
• Slide Width: 960
• Fit Size of image to: Auto
• Visible Images: 1
• Space between Images: 0
• Module Class Suffix: nopadding

The above settings are required - all other settings depend on your exact setup, e.g. you will need to set location of folder where you upload the images or, if you use the DJ Slider component, you will need to set slides category field.

The module class suffix is set to nopadding to allow the slider to take up the full width and height of the showcase module position.  If the suffix is not present, a padding of 10px will be present all around the module.

Feature Slider

The feature slider (as shown on this page) is also created using the DJ Image Slider module (as mentioned above). The settings for the Feature Slider are below:

• Module Position: feature
• Show Title: Hide
• Slide Width: 960
• Fit Size of image to: Auto
• Visible Images: 1
• Space between Images: 0

The above settings are required - all other settings depend on your exact setup, e.g. you will need to set location of folder where you upload the images or, if you use the DJ Slider component, you will need to set slides category field.

Contact Page Map

The map module used on the contact page is called JGMap. This is a free module and may be downloaded from the Kermode Bear Software site. This module is published in the user6 module position on the demo but can be published anywhere between user6 to user10. Refer to the screenshot below for the module settings as used in the demo: