Gantry es un poderoso framework, que sirve como base para desarrollar cualquier tipo de proyecto web que necesitemos. Hasta la versión 3.x, teníamos la posibilidad de trabajar con 68 posiciones de módulos, lo que nos daba una flexibilidad sin igual a la hora de comenzar un nuevo sitio web.

Desde la salida de Gantry 4.0, las cosas cambiaron mucho y se produjo un tremendo avance en términos de uso - UX - y adopción de nuevas tecnologías; ya tenemos LESS como preprocesador para el CSS y la adopción de Bootstrap para el web responsive. Esto significa mayor velocidad de respuesta, y para cualquier dispositivo.

¿Definamos algunos terminos? Refresquemos la memoria

• Framework: Conjunto de herramientas que nos da la estructura sobre la cual construimos el sitio web; ejemplo, Gantry.
• LESS: Lenguaje para CSS; lo vuelve dinámico y lo compila, haciendo la página más liviana.
• Bootstrap: El framework utilizado por Twitter. Viene listo para web responsive.

¿Quieres variar el estilo? Muy fácil

Seguramente revisaste en la carpeta CSS y te encontraste con nombre que no estaba en Gantry 3.x. Fuiste a la carpeta LESS curioseando, y viste toso el css compilado como .less… ¿qué pasó? Bien, no te preocupes. Para agregar nuestros propios estilos con CSS, debemos crear un archivo dentro de la carpeta CSS que se llame igual que el template:

Gantry-custom.css

Y es ahí donde crearemos todos nuestros nuevos estilos. Sobrescribirá la gran mayoría de los selectores de Gantry sin problemas, fuentes, colores, fondos, anchos, altos, espaciados, etc.

Un ejemplo: agregando una nueva posición

¿Quieres agregar una nueva posición? Por ejemplo, en Gantry 4.0, ya no viene por defecto la posición “navigation”, que para mí era muy útil, estaba justo debajo de la posición “Header” y era dónde habitualmente ponía el menú. Ahora por defecto la ubica en header-b, y se ve así:

Comencemos. Para crearla es bastante simple, siguiendo estos pasos. Creamos la posición en el archivo index.php; buscamos este código:

<?php /** Begin Header **/ if ($Gantry->countModules('header')) : ?>
<div id="rt-header">
<div class="rt-container">
<?php echo $Gantry->displayModules('header','standard','standard'); ?>
<div class="clear"></div></div></div>
<?php /** End Header **/ endif; ?>
</header>

Y pegamos este código a continuación:

<?php /** Begin Menu **/ if ($Gantry->countModules('navigation')) : ?>
<div id="rt-menu">
<div class="rt-container">
<?php echo $Gantry->displayModules('navigation','basic','basic'); ?>
<div class="clear"></div></div></div>
<?php /** End Menu **/ endif; ?>

Ahora debemos indicarle a Gantry que tenemos una nueva posición, y nos vamos a templateDetails.xml y agregamos debajo del código:

<position>navigation</position>

En este punto, si vamos al administrador de Gantry 4.0, pestaña menú debe aparecernos la posición.

Y si la vemos en vivo, se verías como sigue:

Por supuesto, esto es el trabajo “sobre la base” y si queremos darle un estilo especial ya sabemos que debemos ir al archivo Gantry-custom.css que vimos al comienzo.

Contacto

Gonzalo Suez es un entusiasta colaborador de la comunidad Joomla! en Chile. Es especialista en Joomla! CMS, CSS y desde hace un tiempo a esta parte uno de los referentes al momento de hablar de Gantry en las comunidades hispanohablantes.

Web Site: www.gsuez.cl
Email: Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
Facebook: gsuez.design
Twitter: @gsuez
Google+: https://plus.google.com/u/0/107796451885521916967