For all Joomla 3+ templates built using the Zen Grid Framework v4 (any theme after October 2014) please refer to the Zen Grid Framework v4 documentation.
The Zen Grid framework has a number of automated features built in that enable the loading of custom code into the template. For instance the framework looks for browser specific stylesheets, a custom javascript file and a custom php file to load into your site if it exists.
In some cases our pre built templates come with overrides for internet explorer6 and internet explorer 7. But if the css file does not exist and you would like to add some specific css customisation for those browsers then all you need to do is create files named ie6.css and ie7.css in the css folder respectively.
Any css added to these stylesheets will only affect the specific browser in question. We will be adding support for further browser sniffing in upcoming releases.
The template.js file is a custom javascript file that is loaded by the framework onto the page. We often use this file to insert javascript that is specific for that template and is not needed by the wider framework.
As an example we added the following to the Rasa template to create an animated hover for one of the buttons in the template.
{codecitation}
jQuery(document).ready(function(){
// Get tallest side column var sideCol = jQuery('#leftCol').height() > 0 ? jQuery('#leftCol') : jQuery('#rightCol');
var highestCol = Math.max(sideCol.height(),jQuery('#midCol').height());
if (highestCol > jQuery('#midCol').height()) {
if (jQuery.browser.msie && jQuery.browser.version == 6.0) { jQuery('#midCol').css({'height': highestCol}); } jQuery('#midCol').css({'min-height': highestCol}); }
{/codecitation}
You can add your own code snippets to this file obeying the usual semantics for javascript and have the code be included in your template. As with the css examples if the templates/your template/js/template.js file does not exist then you only need to create it in that location in order to have the file included in your site.
The templates/your template/includes/templateVariables.php is a file that can be used to add your own php snippets intoyour Zen Grid compatible template. We use this file to create custom variables that relate to the specific template in use that do not also have a bearing on the wider framework.
As an example we used the following php snippet in the Powerplay template to display the current page title in the header area of the template:
{codecitation}
// Page title syntax
$mydoc =& JFactory::getDocument();
$mytitle = $mydoc->getTitle();
{/codecitation}
We then echoed the variable $mytitle in one of the layout files in order to reproduce the page title on the front end of the website.
This file can also be used to override some of the core logic int he framework. As an example some themes require more than the standard 4 module in a row and so we have used this snippets to allow the framework to calculate the widths of the extra modules in keeping with the core functionality of the zen Grid Framework.
{codecitation}
// Lets add two more modules ot the bottom row
if($bottom!=0 && $bottomEqual || $bottom!=0 && $allEqual) {
$bottom = ($this->countModules('bottom1')?1:0)+ ($this->countModules('bottom2')?1:0)+ ($this->countModules('bottom3')?1:0)+ ($this->countModules('bottom4')?1:0)+ ($this->countModules('bottom5')?1:0)+ ($this->countModules('bottom6')?1:0);
$bottomModules = $cols/$bottom;
$bottom1Cols = $bottom2Cols = $bottom3Cols = $bottom4Cols = $bottom5Cols = $bottom6Cols = $numbers[$bottomModules];
}
{/codecitation}
The code example above overrides the logic in the templates/zengridframework/functions/vars.php file to take into consideration the module positions bottom5 and bottom6 that do not appear in the core framework markup.