Domingo, 18 Septiembre 2011 00:51

Estilos de módulos en templates por defecto de Joomla 1.7

Escrito por 
CMS:  Joomla! |  Versión:  1.7 |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  10 minutos


icoestilosmodulostemplatej17Joomla 1.7 viene con dos templates por defecto para el front-end beez5 y beez20 (adicionalmente tiene el template atomic para trabajar como base para una nueva plantilla).

Los templates por defecto tienen implementado algunos estilos de módulos, estilos de tabs y estilos desplegables, los cuales nos pueden servir para dar un aspecto visual más atractivo a nuestro sitio web.

En este artículo veremos cómo trabajar con estos estilos de módulos, además veremos en que lugar del código se implementan y a que posiciones obedecen.

 

1- Trabajando con los templates

Primero necesitamos habilitar la funcionalidad en Joomla 1.7 para ver las posiciones de la plantilla, esto se logra desde el backend de Joomla, extensiones => gestor de plantilla => opciones, tal como se muestra en la siguiente imagen.

img1

 

2-Localizando los estilos de módulos en las posiciones

Luego localizamos las posiciones de nuestro template colocando ?tp=1 al final de la url (&tp=1 si ya tiene parámetros), por ejemplo para el template beez20 tenemos que la position-4 y position-5 se encuentra en la parte izquierda.

img2

Vemos que para la posición 4 tenemos el estilo beezHide y para la posición 5 el estilo beeztabs

 

3- Cambiando las posiciones de los módulos

Si deseamos mostrar un determinado módulo como desplegable debemos colocarlo en la posicion 4 (position-4) , si deseamos verlo como tab, debemos colocarlo en la posición 5 (position-5), tal como se muestra en la siguiente imagen.

img3

 

4- Revisando el código

El código de los estilos de los módulos se encuentra en el archivo principal de la plantilla, archivo index.php.

<jdoc:include type="modules" name="position-4" style="beezHide" headerLevel="3" state="0 " />
<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2"  id="3" />

Como se puede observar la position-4 hace referencia a beezHide y la position-5 a beezTabs.

 

5- Resultado final

Después de haber hecho las modificaciones para el módulo por defecto de : "sobre joomla" y "este sitio", veremos las siguientes variaciones.

 

Módulos en position-4

imgfinal1

Módulos en position-5

imgfinal2

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop