Samples

Saturday, 20 November 2010 22:17

Introduction

A practical example of how to create a Joomla template, compatible with GTMagic. We will ignore all aspects of creating Joomla 1.5 templates and design aspects, to try to simplify as much as possible the code.

Install GTMagic

The first thing is to install the component on the Joomla GTMagic where you want to use.

Tree of files and directories

It is important to note that the tree of files and directories in the template, can be anything, it is important to define it in the file gtmagic.xml. In our example we will use a single directory tree, a CSS folder with two files: template.css and dinamic.css. In the root directory: templateDetails.xml, index.php, index.html, template_thumbnail.png, gtmagic.xml. Therefore, the only additional element to any template for Joomla, be gtmagic.xml.

Files typical of any template is not going to explain, such as: template_thumbnail.png and templateDetails.xml

Template.css definition file

This file will use it as a static, it contain only css Traditional

html, body {
    font-size: 11px;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    background-repeat: repeat-x;
}

#simplegtm_god {
    width: 950px;
    margin: auto;
}

#simplegtm_head {
    height: 190px;
    background-position: top left;
}

#simplegtm_top {
    height: 40px;
}

#simplegtm_top ul, #simplegtm_top ul li {
    float: left;
    list-style-type: none;
}

#simplegtm_top a {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 14px;
    text-decoration: none;
}

#simplegtm_content {
    padding: 15px;
}

#simplegtm_foot {
    padding: 15px;
}

.Clr {
    clear: both;
}

Dinamic.css definition file

This is a css file GTCss expanded the concept of component. As you can see, you can use anywhere GTCss code.

html, body {
    background-color: @color(base,0);
    background-image: url('@gradient(1,500,base_1,false,vertical,200)');
}

#simplegtm_head {
    background-image: url('@image(950,950,1)');
}

#simplegtm_god {
    background-color: @color(base,3);
    color: @color(text,3);
    border-left: 3px solid @color(base,2);
    border-right: 3px solid @color(base,2);
    border-bottom: 3px solid @color(base,4);
}

#simplegtm_top {
    border-top: 3px solid @color(base,9);
    background-color: @color(base,5);
}

#simplegtm_top a {
    color: @color(text,5);
    text-decoration: underline;
}

#simplegtm_top a:hover {
    background-color: @color(base,6);
    color: @color(text,6);
    text-decoration: none;
}

#simplegtm_content {
    background-color: @color(base,6);
    color: @color(text,6);
}

#simplegtm_foot {
    border-top: 1px solid @color(base,7);
    background-color: @color(base,8);
    color: @color(text,8);
}

Gtmagic.xml definition file

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://gtmagic.joomlamagic.es/api/0.6/gtmagic.dtd">
<gtmagic>
    <css folder="css">
        <file>template.css</file>
        <file type="dinamic">dinamic.css</file>
    </css>
    <image width="950" ratio="5"/>
</gtmagic>

Definition of file index.php

<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

 
require_once(JPATH_ROOT . DS . 'components' . DS . 'com_gtmagic' . DS . 'helpers' . DS . 'framework.helper.php');

 
GTMHelperFrameWork::init_load();

GTMHelperTemplate::load();

?>

<body>

    <div id="simplegtm_god">

        <div id="simplegtm_head">

        </div>

        <div id="simplegtm_top">

            <jdoc:include type="modules" name="top" />

        </div>

        <div class="Clr"></div>

        <div id="simplegtm_content">

            <jdoc:include type="component" />

        </div>

        <div id="simplegtm_foot">

            <jdoc:include type="modules" name="footer" style="xhtml" />

        </div>

    </div>

</body>

</html>

The file index.php is the same as the standard for a Joomla template with a significant change at the top of it. It includes the following lines:

require_once...

GTMHelperFrameWork::init_load();

GTMHelperTemplate::load();

With init_load function, we load all the files necessary to run GTMagic, with the load function, load the header of a standard template for Joomla 1.5 and also specified in XML files gtmagic.xml.

Download this example

If you want you can download this sample template here.