Español (spanish formal Internacional)English (United Kingdom)

PDFImprimirE-mail

Ejemplos

GTMagic

Vamos a ver

Un ejemplo práctico de cómo crear una plantilla para Joomla, compatible con GTMagic. Vamos a obviar todos los aspectos de creación de plantillas en Joomla 1.5, así como aspectos de diseño, para intentar simplificar lo máximo posible el código.

Instalar GTMagic

Lo primero de todo es instalar el componente GTMagic en el sitio Joomla donde se desee usar.

Árbol de ficheros y directorios

Es importante señalar que el árbol de ficheros y directorios en la plantilla, puede ser cualquiera, lo importante es definirlo bien en el fichero gtmagic.xml. En nuestro ejemplo, vamos a usar un árbol de directorios sencillo, una carpeta CSS, con dos ficheros: template.css y dinamic.css. En el directorio raíz: templateDetails.xml, index.php, index.html, template_thumbnail.png, gtmagic.xml. Por tanto, el único elemento adicional a cualquier plantilla para Joomla, será gtmagic.xml.

Los ficheros típicos de cualquier plantilla no se van a explicar, como son: template_thumbnail.png y templateDetails.xml

Definición del fichero template.css

Este fichero lo usaremos de forma estática, es decir, contendrá únicamente css tradicional:

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;
}

Definición del fichero dinamic.css

Este es un fichero css ampliado con el concepto GTCss del componente. Como se puede ver, se puede usar GTCss en cualquier parte del código.

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);
}

Definición del fichero gtmagic.xml

<?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>

Definición del fichero 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>

El fichero index.php es igual que el estándar para una plantilla Joomla con una modificación importante en la cabecera de éste. En ella se incluyen las siguientes líneas:

require_once...

GTMHelperFrameWork::init_load();

GTMHelperTemplate::load();

Con la función init_load, cargamos todos los ficheros necesarios para manejar GTMagic, con la función load, cargamos la cabecera de una plantilla estándar para Joomla 1.5 y también los ficheros indicados en el XML gtmagic.xml.

Descarga este ejemplo

Si lo deseas puedes descargar esta plantilla de ejemplo desde aquí.

joomla template
TeAmoMariaJose