General Documentation 2010 Template Documentation Pixel Eight Documentation
Pixel Eight Documentation
The Pixel8 Joomla template was released in March 2010.
The following steps will help you to work better with the Pixel Eight 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 Pixel Eight demo site.
Getting Started
The Pixel Eight Joomla template uses our intuitive Zen Grid framework that makes controlling widths, colours and sub themes for the Joomla template a breeze. Please be sure to check out the zen grid framework documentation for further information for working with and setting up this template.
Please note that the instructions from point 9 and beyond below are specifically for all versions of the template released prior to June 2010. All version releases after June 2010 use the Zen Grid Framework.
General Template documentation
Font Settings
The first lot of parameters relate to controlling the fonts available in the template. We have loaded an array of font variations and stacks for you to choose from. As you can see from the screenshot below you can assign a different font stack to a different area on the site depending on your needs. You can control the font appearance for the main body, the headings as well as the main navigation.
It is also possible to set the overall or base font size of the site.
Pixel Eight COlour Options
The template ships with four basic colour variations - red, brown, green and purple. These colour variations determine the background colour and some of the typography colours, however it is possible to mix and match the colours used on the site as per the module class options as described below.
Pixel Eight Colour variations
pixel8Blue
pixel8Green
pixel8Purple
pixel8Red
The colour variation is set in the template administrator as per the screenshot below.
Pixel Eight Module Classes
In addition to the default module styling for the template it's also possible to change the appearance of the modules via adding a module class to the modules that you are using. There is a good range of module classes available.
Basic Classes
Classes available include:
-purple, -green, -red, -brown
Ribbons
Classes available include:
-purpleribbon, -greenribbon, -redribbon, -brownribbon
Side Ribbons
Classes available include:
-sideribbonpurple, -sideribbongreen, -sideribbonred, -sideribbonbrown
This last class is designed for recreating the ribbon heading that sits on the side edge of the main template container. The main slideshow uses the module class -sidepurpleribbon position in the "above" position.
Bevel Module classes.
There are also two more classes that you can use to replicate the bevel styling seen on the Pixel Eight demo site. The top example in the screenshot below has the module class suffix -bevel while the bottom two modules have the module class -bevel2.
Controlling the Pixel Eight logo
As per the Zen Grid framework the logo in the Pixel Eight template can easily be changed by uploading your own logo to the templates/pixeleight/style/logo folder. The image will appear as an option in the drop down list for the module setting.
The link attached to the image is set to index.php by default but you can alter this to redirect the link to the page of your choice by adding the link in the option as per the screenshot below.
The Pixel Eight tagline.
The tagline that you see on the Pixel Eight demo site underneath the logo is controlled via template parameter. Raw html can be added here so you can add a link or any other form of html you like to this field.
The right column accordion or slider
As can be seen on the demo site the Pixel Eight template has an inbuilt accordion for the right hand column modules. This accordion or slider can be set selectively for all or any of the modules you publish to the right position. In order to trigger the accordion all you need to do is add the module class suffix -slide to the module you want to have behave as an accordion and also ensure that the right column accordion setting in the template is enabled in the template parameters.
Adding the class suffix to the module is as easy as typing -slide into the module class input box in the template:
It is also possible for you to set the colour of the accordion trigger by changing adding one of the following colours to the class suffix: red, brown, purple, green.
The screenshot below displays the four colours available for use in the template on the right hand column. The theme determines the default colour eg in the brown.css theme all sidebar headings are brown in colour. To change the heading colour to a new colour simply add the desired colour to the module class suffix; eg -red, -green, -brown, -purple.
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:
Screenshots of the modules used on the Pixel Eight demo.
Micro Blog
Slideshow Settingsgif
jTweet Settings
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 the top4 module 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 Above position and has the -sideribbonpurple module class suffix assigned to it.
- Microblog is published to the right position and the below position for the more articles module on the front page.
- 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 right module position using the extended menu module. You can see the documentation for setting up the panel menu here.
Configuring K2
The K2 content component from Joomlaworks is a complex beast to say the least and this little snippet will help you to get started using the Pixel Eight 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 Pixel Eight template is very simple thanks to the way K2 has implemented its templating system. Once Pixel Eight is set as the default template on your site you should see the Pixel Eight K2 theme in the dropdown list when editing the theme in the category 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/pixeleight/html/com_k2/templates
The Pixel Eight K2 template is an elegant blog style template that puts some extra flare into the way you display the content on your K2 item and category pages.
The css file for the Pixel Eight K2 template can be found in templates/pixeleight/css/k2.css file.
Please note that the following information relates to versions of Pixel Eight released prior to June 2010. Templates downloaded after this date use the Zen Grid Framework - documentation and further setup instructions can be found on the Zen Grid Framework documentation page.
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 few changes to suit the way we have implemented this theme.
Understanding the Pixel8 folder setup on the server.
While Pixel Eight uses the Zen Grid template framework 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 style folder contains three 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 Pixel Eight. The main images are kept in this folder.
- The logo folder contains the logo images as referenced in the index.php file or in the template admin.
- The themes folder contains images and css files that are specific to the theme variation that you select in the template parameters.
In general if you want to make changes to the base theme then the templates/pixel8/style/base/theme.css file will be the file that you should edit, while changes need to be made to the colour variations are made in the templates/pixel8/style/themes/[your colour].css folder that you have selected in the template admin.
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.
