NIGHTMAN WAREZ

El archivo templateDetails.xml

Dicho es una parte esencial para la instalación y reconocimiento de la plantilla en la administración de Joomla!. Además con él podemos brindar información sobre el autor, datos de contacto, licencia, etc. Básicamente tendremos las siguientes etiquetas y sus correspondientes datos:

Más alla de los datos de autor y nombres, es muy importante que especifiquemos correctamente todos los archivos de la plantilla, con su correspondiente carpeta contenedora y formato de archivo. En caso de no especificar alguno, sencillamente ese archivo no será reconocido ni instalado…

En nuestro caso, con la plantilla de ejemplo que estamos creando tendremos:

Guardamos el archivo y lo situamos en la carpeta raiz de la plantilla.

Queda crear la imagen ‘template_thumbnail.png‘ que actuará de preview en la administración. Lo ideal es que sea una captura de la plantilla, con un tamaño aproximado de 200×150 px.

Una vez hecho, seleccionamos todos los archivos (index.php, templateDetails.xml, template_thumbnail.png)  y carpetas (css e images) y los comprimimos en zip. Y eso es todo, ya hemos terminado una plantilla para Joomla!. Me quedan aclarar unos puntos más.

Notas aparte sobre index.php

• .En la primera parte del tutorial, al crear el index, dentro de la cabecera teníamos:

Lo cual no está mal, pero añadiendo un par de cosas podemos mejorarlo:

En primer lugar se incorporó la directiva PHP ‘<?php echo _ISO; ?>‘ para mostrar una codificación correcta en la plantilla. En segundo lugar además de mostrar el titulo, metatags y favicon con ‘mosShowHead()‘, se agregó una función condicional, para que, si configuramos al sitio ‘fuera de línea’, aun asi podamos seguir viéndolo nosotros, no así las demás personas (veran el mensaje que hayamos especificado en la configuración). Finalmente se incorporó la directiva ‘<?php echo $mainframe->getTemplate(); ?>‘ en la ruta de obtención del estilo en cascada. Esta es la manera genérica para cargar un CSS en Joomla!, así no será necesario poner el nombre de la plantilla para cada index.php que hagamos.

• Mostrar un diseño si tal modulo está publicado. Para eso:

Se creó una función condicional, en palabras, si el modulo user1 está publicado - mosCountModules(‘user1′) - mostramos todo que hay entre las llaves contenedoras (el div “caja” y el contenido del modulo). En caso de no estar publicado dicho modulo, no se mostrará nada (ni el div “caja” ni el modulo)

Notas aparte sobre el CSS

En la segunda parte del tutorial ponía énfasis en las reglas que vamos a incorporar al body del documento. El problema radica que el editor WYSIWYG de Joomla! toma estas reglas para mostrar el contenido a medida que lo vamos agregando. Si no podemos cumplir con esto, una solución es crear un estilo en cascada aparte y  especificar en las opciones del editor WYSIWYG que cargue a este cuando estamos creando contenido. El archivo en cuestión se llamará ‘editor_content.css‘, lo guardamos junto a ‘template_css.css‘ dentro del directorio ‘CSS’ y tendrá estas reglas:

Lo siguiente será ir a las opciones del editor (Administrador de Mambots –> Editor WYSIWYG TinyMCE) y en la opción Template CSS classes ponemos No. Guardamos y listo, cada vez que estemos trabajando con el editor, el contenido se mostrará según editor_content.css.

Ahora si, eso es todo, sientanse libres de hacer con la plantilla lo que quieran.

Descargar Green Joomla!

En esta continuación me enfocaré a hablar sobre el CSS de la plantilla. Pensaba explicar también la creación de ‘ TemplateDetails.xml ‘ pero debido a lo largo que es este capítulo preferí dejar la explicación para la tercera parte. La apariencia de la plantilla cuando terminemos será:

Está inspirado en Sangre Brillante, una plantilla de Jonathan Lewenhaupt (que seguramente adaptaré más adelante).

El CSS de Joomla!

A diferencia de otros CMS,  en Joomla! no queda elemento que no podamos modificar a través de CSS. Esto es porque posee clases y estilos específicos para cada módulo, componente, mambots, los que ya vienen por default  y  los que podemos crear nosotros en la administración.

Dependiendo del punto de vista esta inmensa cantidad de información puede ser un poco desorientadora  o convertirse en una ventaja.

De cualquier forma, Gustavo enlista todas las clases y elementos de Joomla! (podrán ver que es bastante).

Por eso lo que vamos a hacer es poner a punto la maquetacion que teniamos y luego explicar los elementos y clases más importantes de este CMS [ Leer más ]

Puesta a punto de la maquetación.

Recuerdan que en la primera parte partimos de un layout a tres columnas, header y footer [ Ver Layout ]. Lo único que hicimos con él fue tomar su CSS para crear el archivo ‘ template_css.css ‘. Ahora modificaremos a este último para dejar la maquetación “en bruto”. En otras palabras sacaremos los colores de fondo, bordes, tipo de fuente y tamaño. Además quitaremos el alto de las tres columnas.

Por lo tanto el CSS original era:

Quitando los atributos que nombré quedará:

De esta forma obtenemos el layout en bruto para poder trabajar en él. Ya podemos empezar con los estilos más importantes de Joomla!

Estilos referentes al contenido principal.

• .contentheading: Podemos controlar el estilo de los títulos de los artículos. Ejemplo:

Además le hemos agregado que, cuando el mouse pase sobre el titulo, este cambie de color.

• .contentpaneopen: Podemos controlar el contenido mostrado en cada artículo. Ejemplo:

En el ejemplo especificamos un color, padding y alineación del texto. Además especificamos como se deben mostrar las listas. Vean que se le agregó una imagen llamada ‘ lista.gif ‘ la cual está guardada en la carpeta ‘ images ‘ dentro del template.

• .createdate / .modifydate: Controlamos la fecha de creación / modificación del artículo. Ejemplo:

• .readon: Controlamos la manera de mostrar el link ‘ Leer más… ‘ Ejemplo:

• .pagenav_next / .pagenav_prev / .back_button: Son las clases que controlan los links ‘ Siguiente ‘ , ‘ Anterior ‘ y ‘ Volver ‘

Estilos referentes a los módulos

Conté en la primera parte, que nosotros podemos especificar el estilo en que se mostraran los módulos: tablas, divs, en bruto. El asunto es que cada estilo posee clases diferentes. Por ejemplo si nosotros cargamos un módulo en divs [ mosLoadModules (left, -2) ] la clase contenedora será ‘ moduletable ‘. En cambio si cargamos un modulo con extra divs[ mosLoadModules (left, -3) ] la clase será ‘ module ‘. Lo mismo sucede si cargamos el modulo en tablas. Yo en este caso solamente me voy a abocar a nombrar las clases si cargamos los modulos en divs (-2) simplemente porque así se cargaron en el ejemplo del primer tutorial. En todo caso, si cambian el estilo de carga tengan en cuenta lo que dije.

• .moduletable: Cada modulo será cargado en un div diferente. Cada uno de estos divs tendrán la clase ‘ moduletable ‘. Ejemplo:

En el ejemplo hicimos que cada modulo cargado esté separado unos 20px.

• .moduletable h3: Es el título de cada módulo. Ejemplo:

• .moduletable .mainlevel: Es la clase específica para cada elemento de los módulos del tipo menú. Ejemplo:

• .moduletable .latestnews: Es la clase específica del modulo ‘ Últimas noticias ‘. Los títulos son cargados en una lista.

• .moduletable .mostread: Es la clase específica del modulo ‘ Popular ‘.Los títulos son cargados en una lista.

• .moduletable .search: Es la clase específica del modulo ‘ Buscador ‘. Ejemplo:

De esta forma especificamos el color, borde, fuente y padding de la caja de introducción de texto. Además al pasar el mouse sobre él cambia el color de fondo.

Clases personalizadas para los módulos

Al principio conté que son muchas las posibilidades que nos da Joomla! para personalizar la plantilla. También nombre que es posible crear nuestras propias clases para cada módulo. Sin ir más lejos, al instalar Joomla! dos módulos tendrán por default clases personalizadas: el módulo ‘ Menú principal ‘ y el módulo ‘ Menú superior ‘. En la administración, si entramos a la configuración de cualquiera de estos dos módulos veremos en la zona de parámetros:

Es decir que podemos especificar una clase tanto para el modulo como para los elementos del menú en sí (esta ultima opción es solo para módulos del tipo menú). En el primer caso al modulo que contiene ‘ Menú principal ‘ se le agrego el sufijo ‘ _menu ‘ por lo cual la clase final será ‘ moduletable_menu ‘. Noten que el sufijo ‘ _menu ‘ se acopló a la clase ‘ moduletable ‘ nombrada más arriba. En el segundo caso se añadió el sufijo ‘ -nav ‘ a los elementos del ‘ Menú superior ‘. De esta manera la clase resultante para cada elemento será ‘ mainlevel-nav ‘

Estilos de los menús

Los módulos del tipo menú son los que más posibilidades de personalización entregan. Además de poder crear una clase única para cada modulo y cada elemento del menú, nos permiten elegir de que manera mostrar los elementos: de forma vertical, de forma horizontal o en lista:

La manera de mostrar los elementos va a depender del tipo de menú que tengamos. Tanto en la manera ‘ Vertical ‘ como  ‘ Horizontal ‘ los elemento se cargan en una tabla. Si elegimos ‘ lista ‘, los elementos se cargan en una unica lista. Por eso es conveniente tener en cuenta como esta puesto este parámetro para que no existan problemas al diseñar la plantilla.

Estilos globales:

Ahora nos queda agregar un par de reglas para elementos globales como body, img, li, a, etc. Es muy importante las reglas que establezcamos en la hoja de estilos en cascada con respecto al body del documento. Esto es debido a que el editor WYSIWYG de Joomla! tomará estas reglas para mostrarnos el contenido a medida que lo vamos agregando. Por eso, recomiendo que las reglas de body tan solo sean sobre el tipo de fuente, color, y color del background:

Si por ejemplo especificamos más reglas (alineación del texto, imagen de fondo, etc) cuando estemos  usando el editor WYSIWYG será muy dificultoso crear los artículos. En caso de que necesitemos agregar más información del estilo, tan solo creamos un div contenedor del body y ahí si ponemos las reglas que queramos.

Especificamos un par de reglas para los demás elementos:

Y formateamos el título de la plantilla que está en el header:

Con esto terminamos el archivo ‘ template_css.css ‘ , el resultado final ordenado es:

No se agregó nada más de lo que se mostró, tan solo comentarios para organizar el CSS [Descargar ejemplo ]

A diferencia de otros tutoriales que explican como crear un template para Joomla!, en este, no sera necesario ningún programa del tipo Dreamweaver, ni nada por el estilo, tan solo un editor de textos y conocimiento básico de HTML, CSS y PHP (no mucho).

La estructura básica de un template de Joomla! consta de:

• ‘Index.php’ el cual contendrá el HTML y las directivas PHP;
• ‘TemplateDetails.xml’, esencial para la instalación del template y su reconocimiento en la administración;
• Una carpeta llamada ‘css‘ que contendrá el estilo en cascada ‘template_css.css‘;
• Una carpeta llamada ‘images‘ que contendrá las imágenes utilizadas para el diseño de la plantilla;
• ‘Template_thumbnail.png‘, una pequeña imagen que funcionará como previsualizacion del template en la administración.

Por lo tanto un template en Joomla! tendrá la siguiente apariencia:

Todos las plantillas van alojadas en la carpeta ‘templates’, dentro del directorio raiz de Joomla!. En este caso la plantilla será de tres columnas, header y footer [ Ver Layout ] [ Descargar ]. No es la esencia de esta guia explicar cómo crear el layout, existen varios sitios para descargarlos y ahorrar trabajo.

Creación del index.php. Con tan solo saber como se desempeñan tres funciones PHP y dos variables ya se puede empezar con la creación del index…

Funciones:

• mosShowHead(): Esta función al invocarla muestra la información metatag, el titulo y favicon. Se lo usa entre <head> y </head>.
• mosMainBody(): Se utiliza para mostrar el cuerpo principal del documento. Se lo usa en el body del documento.
• mosLoadModules (): Carga los módulos en una posición predispuesta y en un estilo determinado. Para eso posee dos parámetros (posición , estilo). El primero dirá que módulos cargar (left, right, user1, user2, user3, top, etc). El segundo parámetro dirá en que forma cargarlos: 1= horizontal (cada modulo se cargan en celdas en una única fila), 0= normal (cada modulo se cargan en celdas en una única columna), -1= raw (los módulos se cargan en bruto y sin título), -2= XHTML (muestra a los módulos en divs), -3= extra divs (similar al anterior, pero con más divs). De esta forma si tenemos mosLoadModules (left, -2) cargará los módulos predispuestos en la posición ‘left’ y los mostrará en diferentes divs. Otro ejemplo. Si tenemos mosLoadModules (user2, 1) cargamos los módulos predispuestos en la posición ‘user2′ y los mostrará de manera horizontal.

Variables:

• $mosConfig_live_site: Esta variable contiene la URL del sitio en cuestión. Asi por ejemplo la variable $mosConfig_live_site para este sitio es http://www.leandrodonofrio.com. Se la utilizará para cargar el CSS.
• $mosConfig_sitename: Contiene el nombre del sitio en cuestión. Asi la variable $mosConfig_sitename para este sitio es Leandono´s Blog.

Con esto ya podemos empezar. El paquete de descarga del layout posee dos archivos, ‘index.html’ y ‘main.css’. Al estilo en cascada lo renombramos ‘template_css.css‘ y lo guardamos en la carpeta ‘css‘ anteriormente creada. En tanto que a index.html lo abrimos con nuestro editor de textos. Veremos un código similar a:

Lo que haremos será copiar todo el código y pegarlo en un nuevo archivo. Este último lo guardamos como ‘index.php‘ y lo metemos dentro de la carpeta de nuestro template. Lo siguiente será insertar las funciones PHP y las variables para cargar el contenido a nuestra plantilla. Para eso abrimos el archivo recién guardado. Empezaremos por la cabecera del documento:

Lo primero que se hizo fue mostrar toda la información metatag, titulo del documento y el favicon. Esto se hizo con la directiva <? php mosShowHead(); ?>. Por otro lado utilizando la variable <?php echo $mosConfig_live_site;?> se cargo el estilo en cascada del documento guardada en la carpeta ‘css’ dentro del directorio de nuestro template (nombre_del_template). Esta carpeta se ubicará en el directorio ‘templates’ cuando hallamos instalado la plantilla.

Siguiendo con el header del documento lo que haremos será mostrar el nombre del sitio y linkearlo:

Con <?php echo $mosConfig_sitename; ?> estamos mostrando el nombre del sitio. A su vez se utiliza <?php echo $mosConfig_live_site; ?> para poder crear un link.

Lo siguiente será cargar y mostrar el contenido principal y los módulos:

La lectura del documento es fácil. En el div ‘leftcolumn’ cargaremos los módulos predispuestos en la posición ‘left’ (<?php mosLoadModules ( ‘left’,-2);?>). Estos serán mostrados en diferentes divs. Lo mismo sucede con el div ‘rightcolumn’ y los módulos en posición ‘right’ (<?php mosLoadModules ( ‘right’,-2);?>). Mientras tanto, el contenido principal del documento se muestra en la columna central a través de <?php mosMainBody(); ?>.

Finalmente nos queda el footer. Aqui podemos poner lo que queramos o incluir los datos predispuestos en ‘footer.php’. Para eso:

Editando el archivo ‘footer.php’ (dentro del directorio ‘includes’, en la carpeta raiz de Joomla!) podremos cambiar la información a mostrar. Y asi terminamos el ‘index.php‘, el resultado final es:

Descargar ejemplo .