General Documentation 2010 Template Documentation Avanti Documentation
Avanti Documentation
The Avanti Joomla template was released in January 2010.
The following steps will help you to work better with the Avanti template. Please follow the instructions and use this item as a guide for setting up your site and configuring the various options found in the template as well as the extensions and scripts that are showcased on the Avanti demo site.
Getting Started
Please note that the Avanti template has been updated to operate using the Zen Grid Framework and as such if you are using the version called JB Zen Avanti then please refer to the Zen Grid Framework knowledgebase for setup instructions. Please only refer to the notes below if you are using the version prior to the Zen Grid Framework release (Apr 18, 2010.)
To get started with the Avanti template please make sure that you read the basic Joomla Template documentation as well as the documentation for the Zen Grid Framework.
General Template documentation
Zen Grid Documentation
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 pallette.
Template Parameters
The screenshot below displays the settings that the template uses on the Avanti demo site. The settings below are almost identical with the exception of a fe changes to suit the way we have implemented this theme.
Understanding the Avanti folder setup on the server.
While Avanti uses the Zen Grid template as its base there are some minor changes to the way that the styles are controlled and set out in the template - understanding the way the template works is crucial if you want to start tinkering under the hood and playing with the code.
The screenshot below highlights the folder setup for the template.
All of the folders are laid out the same as the Zen Grid framework except for the styles folder. As you can see the styles folder contains five folders that are used by the template to draw the different theme elements together.
- The base folder contains the theme.css file which holds layout and styling particular to Avanti. It could be seen as the child theme as used in some word press themes while the main css folder holds the css rules that govern the base framework.
- The bg folder contains the background images.
- The hilite folder containers the css files for the typographical hilites
- The images folder contains all the images reerenced by the base/theme.css file and the hilite/ files.
- The logo folder contains the logo images as referenced in the index.php file or in the template admin.
In general if you want to make changes to the base theme then the base/theme.css file will be the file that you should edit, while changes need to be made to the hilite/ file that you have selected in the template admin.
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 Jooma extensions are compatible with this template.
Extensions used on the demo site include:
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.
Setting up the modules
Please click on the images below to view the settings used for the modules on the demo site.
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:
1. Install the Core Base or Core Plus package.
2. Install the Avanti template (JB_Avanti_J1.5_v1.0.zip)
3. Install the K2 component
4. Upload the images in the JB_Avanti_K2_Snapshot_images.zip to the media/k2 folder. (This will overwrite the current folder).
5. Install the Avanti Snapshot (JB_Snapshot_Avanti_v1.0.zip)
6. 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 Avante is slightly different to normal in that we dont 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 anayltics 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>
