Compatible with Joomla 2.5 / Joomla 3+ and uses the T3 framework .
Please note: This template uses the T3 framework. You can download the latest release of the T3 plugin directly from the T3 GitHub repository.
The following steps outline the process involved for setting this template up in a new or existing Joomla installation. Please note: We recommend users use our quickstart packages if they have the opportunity to start completely from scratch.
At this stage you will have a very basic looking template ready for you to customise, add your content and start setting up the other modules you can see on the demo for the Lifestyle2 template.
For more information on replicating the front page layout or other extensions used on this site please read the information provided on the frontpage and extensions tab.
This template has the ability to create different layouts within different template styles. A new template style can be created in Joomla by using the save as copy button in the template admin. Using multiple template styles makes it possible to create layouts with different module positions and widths that can be used on different pages of your site. Joomlabamboo templates typically use two styles - one for the front page and the other for all other pages.
The sub pages of the demo site use a number of modules published to the sidebar-2 position. In addition to this the demo uses an instance of the Zentools slideshow module published to the banner position. This is used to add colour to the background of your content area.
There are two main considerations when looking to control the height of the banner in this template.
The main banner height is controlled in the Theme Magic settings in the template admin under the variable called Banner Height.
To change the height of the banner area in your template administrator click on the Theme Magic button and then set the banner height variable to the height you want to use on the page.
Once you have set the correct height for the banner you need to save the theme style or theme preset. The template will automatically compile the css for your site during the save process and the new banner height will be displayed on your site.
The Lifestyle2 classic home page layout uses an instance of the Zentools module to create the full width slideshow. The module will fill the entire space available and the images will be placed in the slideshow in the optimum position for the browser window.
The module uses the banner height set in Theme Magic to determine the position of the image however you need to set one more variable in order to control the position of the slideshow pagination and title.
In order to do this you need to set the height of the image in the Zentools slideshow as per the image below. The positioning of the elements in the slideshow is determined by the height applied to the image size.
in the example above the slideshow will be forced to a height of 400px. The value set in the Theme Magic settings for the banner height also needs to equal 400px.
The following colours are the primary and secondary colours used in the lifestyle2 template styles.
Module classes are a core Joomla functionality that allow the user to specify how a specific module will appear. The class itself is added to the module in the module parameters.
Module classes can be combined to take advantage of multiple complementary styles. An example of a module class suffix using a combination of classes: "hot primary1 top50".
Structural classes can be used to change the general layout or structure of a module.
Our themes use a combination of two colours to determine the colour scheme for each template style. In general the colours are determined by the following formula:
Module classes for mobile viewing (mediaqueries classes).
|Class||Mobile max-767px||Tablets 768px to 979px||Desktop min-980px|
The following image details the layout used for the home page classic view. This is the frontpage view that mimics the layout of the original Lifestyle template.
The following image highlights the modules used to create the main front page layout as seen on the demo.