Avanti Documentation
Getting Started
Please ensure that you read the getting started articles in preparation for working with this template.
This template also uses the Zen Grid Framework which makes controlling widths, colours and sub themes for the Joomla template a breeze. Please make sure that you familiarise yourself with the documentation for working with the Zen Grid Framework before you get started.
Template Configuration
Font Settings:
The top parameters relate to the style of the template and this is where you control the font family, size and logo used by the template. As per the Zen Grid framework your logo can simply be uplaoded to the templates/avanti/style/logo folder and the image will appear as an option int he drop down list.
Background Image Settings
The colour settings refer to the smokey graphic that is positioned behind the slideshow and the hilite refers to the colours used for links and headings. You can also upload your own image to display int he background by uploading it to templates/avanti/style/bg. Once the image has been uploaded it will be available as an option in the background image drop down list.
The template ships with the following background options:
- Blue
- Green
- Grey
- Purple
- Yellow
- Red
Typographical Hilites
The hilite dropdown list determines the file that is referenced for the typographical colours. These files are located in the templates/avanti/style/hilite folder. In order to edit the colours for the typography you will need to edit the .css file that corresponds to the selection in this dropdown list - eg style1, style2 etc. Also you can create your own style by uploading the css file to this folder and then apply it in the theme by selecting your new style from the drop down list.
The hilites available int he template are:
- Style1
- Style2
- Style3
- Style4
- Style5
- Style6
Each style has been designed to work with a specific logo colour but depending on your taste the styles can be mixed and matched to create a new colour palette.
Extensions used on the demo site
You can find specific setup information related to the extensions above in this document or general setup and feature documentation by clicking the links below. All of our recent Joomla extensions are compatible with this template.
Extensions used on the demo site include:
- bambooBox
- jTweet
- JB Type
- JB Slideshow 3
- Extended menu - Superfish and Panel menus
- Microblog
Module Position Overview
The image below outlines the module positions available in this template. The positions are available are the same as can be seen and are described in the Zen Grid template documentation, except for the addition of an extra module in the bottom row - module position called bottom5. The demo site does not take advantage of all of the module positions shown, so please see the descriptions below for a more detailed analysis of the way we have the demo site set up.
Main modules used on the demo site
- The extended menu module is published to the menu position and is set up according to the standard superfish documentation.
- A custom html module and a login module are published to the panel1 and panel4 module positions.
- JB Slideshow is published to the Banner position
- Microblog is published to the grid1 position on the front page and no articles are published to it (please see point 7 below)
- The bottom module positions have three popular items modules published to bottom1 to bottom3, jTweet is published to bottom4 and a custom module is published to bottom5. (please see point 9 below for help setting up the custom module.
- A standard Joomla menu module is published to the footer position to render the very bottom horizontal menu.
- The panel menu rendered on the sub pages is published to the left or right module position depending on the page. You can see the documentation for setting up the panel menu here.
Slideshow Settings
The following is a screenshot of the settings used for the JB Slideshow3 module on the front page published to the banner position.
Microblog Settings
The following is a screenshot of the settings used for the Microblog module on the front page int he Grid1 position.
Configuring K2
K2 from Joomlaworks is a complex beast to say the least and this little snippet will help you to get started using the Avanti template in K2 but for more indepth help we recommend using the forum over at the K2 forum for Joomlaworks for K2 specific requests or by posting questions on our forum for issues related to the template.
Assigning the Avanti template is very simple thanks to the way K2 has implemented its templating system. Once Avanti is set as the default template on your site you should see two templates available to assign within the category and menu item parameters. You will also see what other templates are available for K2 on your site in the dropdown list as per the image below.
These templates ship with Avanti and do not need to be enabled. The fiels for the template are located in this directory on your web server:
templates/avanti/html/com_k2/templates
The AvanteBlog template is a two column blog template that you can see by following this link here to the demo site.
The AvantePhoto template is a more traditional template that has a different category page but the same item page as the AvanteBlog theme. It is used on the demo site as a stripped back photogallery with title and the article image being displayed.
Using the Avanti K2 snapshot
The Avanti k2 snapshot creates a site with the Avanti business sample data but uses the K2 as the base component. So the menu items, slideshow and microblog modules on the front page point to the K2 content items rather than the Joomla content items. Setting up the K2 version of the snapshot adds to extra steps in addition to the normal snapshot setup.
Please follow this in order to setup the snapshot with K2 enabled:
- Install the Core Base or Core Plus package.
- Install the Avanti template (JB_Avanti_J1.5_v1.0.zip)
- Install the K2 component
- Upload the images in the JB_Avanti_K2_Snapshot_images.zip to the media/k2 folder. (This will overwrite the current folder).
- Install the Avanti Snapshot (JB_Snapshot_Avanti_v1.0.zip)
- Install the Avanti K2 snapshot data (JB_Snapshot_Sample_Data_K2.zip)
Now if you go to the front page of your site you should see the Avanti template configured for use with the Avanti K2 sample data and images.
Please note that you may need to disable the K2 css in the K2 parameters when configuring this template.
Frontpage Setup
The front page setup on Avanti is slightly different to normal in that we don't have any content published to the front page. We have done this because we like the exact grid that our microblog module creates and also since it gives us more control over the output of the page without resorting to overly restrictive frontpage overrides.
In order to recreate this, in addition to publishing one instance of the Micro Blog module to the grid1 or grid4 position you need to edit the default home menu item in your menu manager as follows:
- Set the leading and article count to zero.
- Leave the column number there otherwise you will get a division by zero error.
- Ensure that pagination on the front page item is set to hide.
- Pagination results are set to hide also.
- Set the number of links to zero.
Google analytics in your Joomla template
Avanti has a provision for you to paste your google analytics tracking code - or any other javascript for that matter at the bottom of your template just before the closing tag.
All you need to do is paste the code supplied by the statistics application of your choice in the text area provided at the very bottom of the template, as per the screenshot below.
Recreating the contact module at the bottom right
The contact module at the bottom right of the page is a custom html module that uses some simple html to create the layout. The image you see there is available as per the other button colours in the source zip for the template.
The markup is as per the code below:
<p><img border="0" src="/images/stories/democontent/getintouch.jpg" /></p> <p><strong>Company Name</strong></p> <p>22 Bourke St, Melbourne, 3000</p> <p>Australia</p>
Troubleshooting
I get the following error after installing the Zen Grid Framework and a Zen Grid compatible template.
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/26/d171984212/htdocs/tradenet/templates/zengridframework/includes/yth.php on line 36This error means that your server is using php v4 while the Zen Grid Framework needs php5 to function properly. Often changing to php5 is a matter of adding a rule to the htaccess file on your site but it's best to ask your host for help in determining the best way to use php on your server.