Cómo crear un template para Joomla! (Tercera parte)
domingo, 29 de abril de 2007

Joomla!Tercera y última parte sobre como crear un template funcional para Joomla!

 



Como bien dije antes , solo queda por explicar la creación del archivo 'templateDetails.xml'. Además había quedado en poner un par de puntos que no pude mostrar anteriormente.

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:

 

XML
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <mosinstall version="1.0" type="template">
  3.     <name>Nombre del template</name>
  4.     <version>Version del template</version>
  5.     <creationDate>Fecha de creación</creationDate>
  6.     <author>Nombre del autor</author>
  7.     <authorEmail>E-mail del autor</authorEmail>
  8.     <authorUrl>Url del autor</authorUrl>
  9.     <description>Una breve descripción</description>
  10.     <files>
  11.            <filename>Archivos de la plantilla</filename>
  12.     </files>
  13. </mosinstall>

 

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:

 

XML
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <mosinstall version="1.0" type="template">
  3.     <name>Green Joomla!</name>
  4.     <version>1.0</version>
  5.     <creationDate>04/2007</creationDate>
  6.     <author>Leandro D´Onofrio</author>
  7.     <authorEmail> Esta dirección de correo electrónico está protegida contra los robots de spam, necesita tener Javascript activado para poder verla </authorEmail>
  8.     <authorUrl>http://www.leandrodonofrio.com/</authorUrl>
  9.     <description>Sencilla plantilla en tonos verdes</description>
  10.     <files>
  11.       <filename>index.php</filename>
  12.       <filename>templateDetails.xml</filename>
  13.       <filename>template_thumbnail.png</filename>
  14.       <filename>images/lista.gif</filename>
  15.       <filename>css/template_css.css</filename>
  16.     </files>
  17. </mosinstall>

 

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 200x150 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:

PHP
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <!--Incorporo el Título, Info Meta, y Favicon-->
  4. <?php mosShowHead(); ?>
  5. <!--Obtengo mi estilo en cascada-->
  6. <link href="<?php echo $mosConfig_live_site;?>/templates/nombre_del_template/css/template_css.css" rel="stylesheet" type="text/css" />
  7. </head>


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

 

PHP
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
  3. <!--Incorporo el Título, Meta, y Favicon y habilito la edición en vivo-->
  4. <?php
  5. if ( $my->id ) {
  6.   initEditor();
  7. }
  8.  
  9. mosShowHead();
  10. ?>
  11. <!--Obtengo el estilo en cascada-->
  12. <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
  13. </head>


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:

 

PHP
  1. <?php if(mosCountModules('user1')) { ?>
  2. <div class="caja">
  3. <?php mosLoadModules('user1', -2); ?>
  4. </div>
  5. <?php } ?>


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:

 

CSS
  1. body{
  2. margin:0;
  3. padding:0;
  4. text-align: left;
  5. background: #FFF;
  6. background-image: none;
  7. }

 

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!

Template Final

 

 


Tags:  tutoriales joomla template plantilla




 Comentarios (53)
 51 Escrito por robin, el 04-05-2008 01:26
como està leandro este soy nuevo en esto de jommla y pss seguì los pasos segùn decia el manual pero a la hora de cargar la plantilla me sale un error dice que no encuentra el archivo de desintalaciòn ni el de configuraciòn xml y pues ese lo tengo... esperando su respuesta muchas gracias de antemano
 52 Escrito por karla, el 04-05-2008 01:30
nooo a mi me paso lo mismo que puedo hacer su ayda seria de gran apoyo... gracias Leandro...jijiji
 53 Escrito por Camaleon, el 22-05-2008 20:18
Hola... revisa el tutorial y me parece bueno he interesante, pero ando queriendo hacer un layout mucho más complejo, con esquinas redondeadas en las secciones \"left\" y con diseño en la de \"content\". Subí un ejemplo de que quiero lograr en: http://desarrollosweb.com/prueba/ 
 
Intenté dejarlo en tablas, así como esta... pero se \"descuadraba el contenido en el firefox, en el IE7 se veía bien. 
 
En dado caso de meter los divs, donde los debería meter? dentro de cada \"seccion\" o englobando las tablas con los bordes? que sugerencia pueden darme?  
 
Gracias


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code



 
Delicious
Mister Wong
< Anterior   Siguiente >

Suscribirse por feed


Suscribirse por e-mail

Tu dirección de correo