Tutorial: Crear un template para Joomla! 1.5 desde cero
Miércoles, 01 de Octubre de 2008 18:01
Joomla!Junto a Comunidad Joomla! , tengo el agrado de presentarles el Manual de desarrollo de plantillas para Joomla! 1.5: Guía paso a paso, una completa ayuda para crear un template funcional, con ejemplos 100% reales y prácticos.


Antes de empezar

Además necesariamente se debe tener:

Índice

  • Estructura básica de una plantilla para Joomla! 1.5.x
    • Carpetas
    • Archivos
  • Creación de la carpeta para nuestro template
  • Creación de templateDetails.xml
    • Datos
    • Archivos
    • Posiciones
    • Parámetros
  • Creación de index.php
  • Edición de template.css
    • Clases pertenecientes a contenido
    • Clases pertenecientes a módulos
    • Otras clases CSS importantes
  • Manejo de parámetros en la plantilla
  • Creación de template_thumbnail.png
  • Apuntes finales

Estructura básica de una plantilla para Joomla! 1.5.x


Básicamente un template puede estar formado por las siguientes carpetas y archivos:

Estructura de una plantilla en Joomla!


Carpetas:

  • css: Es la carpeta que contiene los estilos en cascada del template.
  • html: Esta carpeta posee los archivos que funcionaran como plantilla especifica para módulos y componentes. Su uso no es prioritario pero es una funcionalidad a explotar si deseamos un código personalizado para componentes/módulos.
  • images: Contendrá las imágenes usadas para el diseño.

 

Archivos:

  • index.php: El archivo principal, contendrá todo el HTML y directivas PHP de Joomla! para cargar el contenido (artículos, componentes, módulos, etc.)
  • templateDetails.xml: Determinante para que la plantilla sea reconocida en el back-end del CMS. Posee diversos datos como licencia, autor, e-mail, etc. En Joomla! 1.5 la plantilla podrá tener parámetros manejables desde el back-end para cambiar la visualización del template. En este archivo se agregaran los parámetros y las posiciones de disponibles para mostrar los módulos.
  • template_thumbnail.png: Es la imagen que actuará como previsualización del template en la administración.
  • params.ini: Contendrá los valores para configurar los parámetros del template. Si la plantilla no posee parámetros para configurar, este archivo no será necesario.
  • template.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta 'css'. En la rama de Joomla! 1.0.x este archivo tenía el nombre de template_css.css
  • favicon.ico: Es el favicon que usaremos en nuestro sitio.
  • imagenes varias: Conformaran el diseño de la plantilla.


Dentro de la carpeta 'html', como decía más arriba, estarán archivos y carpetas específicos para los módulos y componentes del sitio. Con esto podremos manejar a nuestro gusto la apariencia y el output de dichos componentes y módulos. La idea es que la plantilla prevalezca por encima del output HTML que genera Joomla! De esta forma, por ejemplo, podremos reemplazar todas las tablas que genera tal componente y reemplazarlas por DIVs.


Creación de la carpeta para nuestro template


Nombre de la carpeta que alojará nuestros archivosLo primero que haremos será crear la carpeta en donde se alojaran los archivos de nuestra plantilla. Para eso vamos al directorio 'templates' de Joomla! y creamos una carpeta con el nombre que queramos, en minúscula, y en caso de ser varias palabras, sin espacios. Luego podemos crear las subcarpetas necesarias: css, images y/o HTML



Creación de templateDetails.xml

Podemos dividir en cuatro partes el contenido de templateDetails.xml: Datos, Archivos, Posiciones y Parámetros.

  • Datos: Aquí, entre cada etiqueta pondremos los datos específicos de la plantilla como su versión, autor, email, página web, año, licencia y descripción:

XML
  1. <?xml version="1.0" encoding="utf-8"?>     
  2.   <install version="1.5" type="template">     
  3.   <name>Nombre del template</name>     
  4.   <creationDate>Fecha de creación</creationDate>     
  5.   <author>Nombre del autor</author>     
  6.   <copyright>Licencia</copyright>     
  7.   <authorEmail>E-mail del autor</authorEmail>     
  8.   <authorUrl>Web del autor</authorUrl>     
  9.   <version>Versión</version>     
  10.   <description>     
  11.   <![CDATA[     
  12.   Aqui va la descripción, puede usarse HTML o texto plano.     
  13.   ]]>     
  14.   </description>

 

  • Archivos: Cuando hayamos terminado nuestro trabajo, aquí deberemos especificar todos los archivos que hemos utilizado para el diseño, para luego comprimir todo en ZIP y tener un instalador de la plantilla. Como ahora no necesitamos un instalador (ya que estamos creando el template dentro del mismo Joomla!) podemos dejar estos campos incompletos, pero es muy recomendable que al terminar el trabajo lo completemos debidamente:

XML
  1. <files>     
  2. <filename>index.php</filename>     
  3. <filename>templateDetails.xml</filename>       
  4. <filename>template_thumbnail.png</filename>     
  5. <filename>favicon.ico</filename>       
  6. <filename>css/template.css</filename>     
  7. <filename>images/imagen.png</filename>       
  8. </files>

 

  • Posiciones: Es importante saber con anticipación que posiciones usaremos y cuantas en nuestro sitio para planificar en donde mostrarlos en la plantilla.

XML
  1. <positions>     
  2. <position>left</position>
  3. <position>right</position>
  4. <position>user3</position>
  5. </positions>

 

  • Parámetros: Si deseamos realizar una plantilla más versátil, podemos agregarle parámetros para ser manejados desde el Back-end. Por ejemplo, si nuestra plantilla cuenta con la posibilidad de configurar los colores de fondo, esta opción estará habilitada para ser activada desde la administración de Joomla!. En Joomla! 1.0.x,  si añadíamos un parámetro, este solo podía ser modificado tocando el index.php de la plantilla. Podemos encontrar un ejemplo de parámetros de template accediendo a Extensiones --> Gestor de plantillas -->rhuk_milkyway. En la columna derecha veremos los parámetros para dicho template:

Parámetros para el template rhuk_milkyway


XML
  1. <params>     
  2.   <param name="color" type="list" default="blanco" label="Color de la tipografia" description="Color de la tipografia">
  3.   <option value="azul">Azul</option>
  4.   <option value="rojo">Rojo</option>
  5.   <option value="verde">Verde</option>
  6.   </param>
  7.   </params>
  8.   </install>

 

Los valores por default y cada vez que modificamos un parámetro desde el back-end, son guardados en el archivo params.ini. Corre por nuestra cuenta si nosotros queremos o no añadir este tipo de posibilidad a nuestro diseño. Por lo general son las plantillas comerciales las que lo implementan, ya que le otorga mucha flexibilidad al producto. Más adelante veremos un ejemplo de utilización de parámetros.

Entonces templateDetails.xml puede tener la siguiente apariencia:


XML
  1. <?xml version="1.0" encoding="utf-8"?>           
  2.       <install version="1.5" type="template">           
  3.       <name>Nombre del template</name>           
  4.       <creationDate>Fecha de creacion</creationDate>           
  5.       <author>Nombre del autor</author>           
  6.       <copyright>Licencia</copyright>           
  7.       <authorEmail>E-mail del autor</authorEmail>           
  8.       <authorUrl>Web del autor</authorUrl>           
  9.       <version>Version</version>           
  10.       <description>           
  11.       <![CDATA[           
  12.       Aqui va la descripcion, puede usarse HTML o texto plano.           
  13.       ]]>           
  14.       </description>     
  15.       <files>           
  16.       <filename>index.php</filename>           
  17.       <filename>templateDetails.xml</filename>           
  18.       <filename>template_thumbnail.png</filename>           
  19.       <filename>favicon.ico</filename>           
  20.       <filename>css/template.css</filename>           
  21.       <filename>images/imagen.png</filename>           
  22.       </files>     
  23.       <positions>           
  24.       <position>left</position>     
  25.       <position>right</position>     
  26.       <position>user3</position>     
  27.       </positions>     
  28.       <params>           
  29.       <param name="color" type="list" default="azul" label="Color de la tipografia" description="Color de la tipografia">
  30.       <option value="azul">Azul</option>     
  31.       <option value="rojo">Rojo</option>     
  32.       <option value="verde">Verde</option>     
  33.       </param>     
  34.       </params>     
  35.       </install>

 


Creación de index.php

Para la creación del index.php, lo primero que haremos será insertar el HTML que formará la maquetación de la plantilla. Para eso partiremos desde un layout básico de tres columnas, barra de navegación, header y footer. Entonces en index.php creamos el HTML:

 

HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. </head>
  5.  
  6. <body>
  7.  
  8. <!-- Contenedor -->
  9. <div id="contenedor">
  10.  
  11. <!-- Comienzo header -->
  12. <div id="header">
  13.  
  14. </div> 
  15. <!-- Fin header -->
  16.  
  17. <!-- Comienzo navegacion-->
  18. <div id="navegacion">   
  19.  
  20. </div>
  21. <!-- Fin navegacion -->
  22.  
  23. <!-- Comienzo columna izquierda -->
  24. <div id="izquierda">   
  25.  
  26. </div> 
  27. <!-- Fin columna izquierda -->
  28.  
  29. <!-- Comienzo contenido -->
  30. <div id="contenido">   
  31.  
  32. </div> 
  33. <!--  Fin contenido -->
  34.  
  35. <!-- Comienzo columna derecha -->
  36. <div id="derecha">   
  37.  
  38. </div> 
  39. <!-- Fin columna derecha -->
  40.  
  41. <!-- Comienzo footer -->
  42. <div id="footer"> 
  43.  
  44. </div> 
  45. <!-- Fin footer -->
  46.  
  47. </div> 
  48. <!-- Fin contenedor -->
  49.  
  50. </body>
  51. </html>

 

Lo siguiente será ir incorporando las directivas que cargaran toda la información para que la plantilla funcione. Veamos las básicas:

 

  •  <jdoc:include type="head" />: Esta directiva irá dentro de la cabecera HTML. Cargará el título de la página en cuestión, metatags, feed, y framework javascript. Joomla! a partir de la versión 1.5 decide usar como framework javascript a Mootools. Y esto lo hace de forma nativa, es decir que no nos dá la posibilidad de elegir entre cargarlo o no (a menos que editemos algún archivo fuente). Obviamente no hay que tomarlo para mal, sino al revés, entre líneas el equipo de Joomla! nos esta diciendo que echemos rienda suelta a nuestra imaginación y utilicemos a Mootools para añadir efectos, nuevas propiedades o lo que queramos a la plantilla. En otras palabras, que explotemos todo su potencial.
    Otro hecho es que para mostrar nuestro favicon, tendremos que añadir las líneas manualmente para mostrarlo.

  • $this->template:Obtendremos el nombre de la carpeta contenedora de nuestra plantilla. Se puede utilizar para cargar el estilo en cascada, favicon y cualquier archivo que queramos y se encuentre dentro de esta carpeta.

Con esto ya podemos crear la cabecera HTML de la plantilla:


PHP
  1. <head>     
  2. <jdoc:include type="head" />       
  3. <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />     
  4. </head>

 

Por otro lado, para el cuerpo utilizaremos:

 

  • $mainframe->getCfg('sitename'): Obtendremos el nombre del sitio en cuestión.
  • <jdoc:include type="modules" name="posición" style="estilo" />: Con esta directiva estamos indicando la carga de un módulo en particular y de una manera especifica.
    Esto se establecerá a partir de los parámetros 'name' y 'style'. En el caso del primero, escribiremos la posición de módulo que queremos cargar. Por ejemplo, si deseamos todos los módulos derechos, el parámetro será 'name="right"'. El segundo parámetro posee algunas variantes, el uso de cada una va a depender de nuestras necesidades. Las variedades de estilo pueden ser 'table', 'horz', 'xhtml', 'rounded' y 'raw'. Tanto con 'table' como con 'horz' el contenido del módulo será cargado a través de tablas, la diferencia es que el primer parámetro lo hará de forma vertical (a través de una columna) y el segundo lo hará de forma horizontal (a través de una fila). Si utilizamos 'xhtml' el contenido en vez de ser cargado en tablas será insertado en DIVs. El parámetro 'rounded' es similar a 'xhtml' con la diferencia que carga el contenido en varios DIVs anidados. Este último se suele utilizar para realizar bordes redondeados a través de imágenes. Finalmente el parámetro 'raw' cargará el contenido neto, sin contenedores ni título.

Ejemplo:


Queremos insertar en DIVs todos los módulos izquierdos en determinada parte del sitio, la directiva quedará conformada por:

<jdoc:include type="modules" name="left" style="xhtml" />

Ejemplo 2:


Queremos cargar los módulos que se encuentran en la posición 'top' de manera horizontal:

<jdoc:include type="modules" name="top" style="horz" />


En caso de no especificar el estilo, por default el valor será 'table'.

 

  • <jdoc:include type="component" />: Con ella cargaremos el contenido principal del sitio (artículos, secciones, categorías, etc.). A diferencia de la inclusión de módulos, esta directiva no posee parámetros para manejar en donde cargar el contenido.

 

Aprendiendo esto ya estaremos resolviendo el 80% de index.php, quedando:

 

PHP
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>     
  4. <jdoc:include type="head" />       
  5. <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />     
  6. </head>   
  7.  
  8. <body>
  9.  
  10. <!-- Contenedor -->
  11. <div id="contenedor">
  12.  
  13. <!-- Comienzo header -->
  14. <div id="header">
  15. <h1><a href="index.php"><?php echo $mainframe->getCfg('sitename');?></a></h1>
  16. </div>     
  17. <!-- Fin header -->
  18.  
  19. <!-- Comienzo navegacion-->
  20. <div id="navegacion">     
  21. <jdoc:include type="modules" name="user3" style="xhtml" />
  22. </div>     
  23. <!-- Fin navegacion -->
  24.  
  25. <!-- Comienzo columna izquierda -->
  26. <div id="izquierda">     
  27. <jdoc:include type="modules" name="left" style="xhtml" />
  28. </div>     
  29. <!-- Fin columna izquierda -->
  30.  
  31. <!-- Comienzo contenido -->
  32. <div id="contenido">     
  33. <jdoc:include type="component" />
  34. </div>     
  35. <!--  Fin contenido -->
  36.  
  37. <!-- Comienzo columna derecha -->
  38. <div id="derecha">     
  39. <jdoc:include type="modules" name="right" style="xhtml" />
  40. </div>     
  41. <!-- Fin columna derecha -->
  42.  
  43. <!-- Comienzo footer -->
  44. <div id="footer">     
  45. <!--Cargo el footer-->     
  46. <?php include_once('includes/footer.php'); ?>
  47. </div>     
  48. <!-- Fin footer -->
  49.  
  50. </div>     
  51. <!-- Fin contenedor -->
  52.  
  53. </body>
  54. </html>

 

En el DIV 'header' se cargó una etiqueta H1 que muestra el nombre del sitio. Por otro lado, en el footer se carga el archivo footer.php que trae un texto predeterminado para mostrar. Este se encuentra en includes/footer.php

Si en el backend, configuramos para que nuestro template sea el predeterminado, al ingresar al sitio veremos:
 

Template sin editar estilos


Lo cual no está mal, ya que aún no hemos editado el CSS, por el contrario está muy bien, porque hemos podido cargar el contenido del sitio en nuestra plantilla.


Edición de template.css

Vamos a la carpeta 'css' y creamos el archivo template.css. Lo primero que haremos será insertar los estilos para la maquetación de la plantilla:

 

CSS
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5.  
  6. body {
  7. font-size: 62.5%;
  8. font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  9. color: #333;
  10. background-color:white;
  11. }
  12.  
  13. #contenedor {
  14. margin: 0 auto;
  15. width: 922px;
  16. }
  17.  
  18. #header {
  19. width: 900px;
  20. float: left;
  21. padding: 10px;
  22. margin: 10px 0px 5px 0px;
  23. }
  24.  
  25. #navegacion {
  26. float: left;
  27. width: 900px;
  28. padding: 10px;
  29. margin: 0px 0px 5px 0px;
  30. }
  31.  
  32. #izquierda {
  33. margin: 0px 5px 5px 0px;
  34. padding: 10px;
  35. width: 195px;
  36. float: left;
  37. }
  38.  
  39. #contenido{
  40. float: left;
  41. margin: 0px 5px 5px 0px;
  42. padding: 10px;
  43. width: 456px;
  44. display: inline;
  45. }
  46.  
  47. #derecha {
  48. color: #333;
  49. margin: 0px 0px 5px 0px;
  50. padding: 10px;
  51. width: 195px;
  52. float: left;
  53. }
  54.  
  55. #footer {
  56. width: 900px;
  57. clear: both;
  58. margin: 0px 0px 10px 0px;
  59. padding: 10px;
  60. }

 

 

Template sin estilos

 

Ahora somos libres de añadir los estilos que queramos, pero para eso primero debemos conocer algunas de las clases que Joomla! carga por default en sus elementos.

Clases pertenecientes a contenido:

 

Clases dentro de contenido
 

 

  • componentheading: Nuestra el título del componente en cuestion. La página de inicio, al ser un componente (com_frontpage) tiene posibilidad de mostrar un título.
  • contentheading: Es la clase perteneciente a la celda que muestra el título de los artículos
  • buttonheading: Pertece a las celdas que muestran los iconos de PDF, Imprimir y Enviar a un amigo
  • small: Es usado por varios elementos, entre ellos el que muestra el autor de un artículo
  • createdate: Es usado por la celda que muestra la fecha de creación de un artículo
  • readon: Utilizada por el link "Leer más..."
  • article_separator: Utilizada por la etiqueta <span> que separa a los artículos entre sí

 

 

Clases pertenecientes a módulos:

Por lo general, las clases asociadas a módulos dependen de varias cosas, desde la forma en que nosotros seleccionamos el estilo de carga del módulo, hasta si esta posee un sufijo de la clase de módulo. Además muchos módulos creados por terceros poseen sus propias clases propias.

Tomemos como ejemplo, un módulo del tipo menú:

 

Clases en modulo de tipo menu

 

  • moduletable: Arriba contábamos que los módulos pueden cargarse de diferentes formas, dentro de tablas ó en DIVs. Para nuestro template nosotros hemos especificado que los módulos se carguen en un solo DIV a través del parámetro style="xhtml".  Para este caso, el DIV contenedor posee la clase CSS asociada moduletable
    Si nosotros entramos a la edición del módulo, podremos añadir un sufijo especifico para moduletable:
Parámetros de un modulo
  • h3: Los títulos de los módulos se cargan con la etiqueta H3
  • active: Para el caso del menú, cuando nos encontramos dentro de una página existente como item, se agrega la clase active
  • item: A su vez cada elemento del menú posee una clase unica, la cual es item más el ID que posea dicho elemento
  • parent: Si hemos creado un elemento que a su vez posee sub-items, al elemento padre se le añade la clase parent

 

Otras clases CSS importantes:

  • button: Es una clase asociada a elementos del tipo botón
  • inputbox: Suele estar asociada a elementos text-input
  • pagenav: Clase asociada a la paginación de artículos
  • modifydate: Clase asociada ala fecha demodificación de un artículo
  • sectiontableentry1/sectiontableentry2: Suele estar asociada cuando se muestran datos en tablas

 

Ahora que conocemos las clases mas importantes, podemos ir aplicando un poco de estilo al template y acomodar los módulos que vamos a usar:

 

CSS
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  5.  
  6. body {
  7. font-size: 62.5%;
  8. font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  9. color: #333;
  10. }
  11.  
  12. #contenedor {
  13. margin: 0 auto;
  14. width: 922px;
  15. }
  16.  
  17. #header {
  18. width: 900px;
  19. float: left;
  20. padding: 10px;
  21. margin: 10px 0px 5px 0px;
  22. }
  23.  
  24. #navegacion {
  25. float: left;
  26. width: 900px;
  27. padding: 10px;
  28. margin: 0px 0px 5px 0px;
  29. }
  30.  
  31. #izquierda {
  32. margin: 0px 5px 5px 0px;
  33. padding: 10px;
  34. width: 195px;
  35. float: left;
  36. }
  37.  
  38. #contenido {
  39. float: left;
  40. margin: 0px 5px 5px 0px;
  41. padding: 10px;
  42. width: 456px;
  43. display: inline;
  44. }
  45.  
  46. #derecha {
  47. color: #333;
  48. margin: 0px 0px 5px 0px;
  49. padding: 10px;
  50. width: 195px;
  51. float: left;
  52. }
  53.  
  54. #footer {
  55. width: 900px;
  56. clear: both;
  57. margin: 0px 0px 10px 0px;
  58. padding: 10px;
  59. }
  60.  
  61. /* Color
  62. --------------------------------------------------------- */
  63.  
  64. a{
  65. text-decoration:none;
  66. color:#3B6EA5;
  67. }
  68.  
  69. #header a {
  70. font-size:1.8em;
  71. margin-left:230px;
  72. color:#3B6EA5;
  73. }
  74.  
  75. /* Elementos
  76. --------------------------------------------------------- */
  77.  
  78. a:hover {
  79. color: #147;
  80. text-decoration: underline;
  81. }
  82.  
  83. a img{
  84. border:0px;
  85. }
  86.  
  87. h1, h2, h3 {
  88. font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
  89. font-weight: bold;
  90. }
  91.  
  92. h1 {
  93. font-size: 2em;
  94. }
  95.  
  96. h2 {
  97. font-size: 1.6em;
  98. }
  99.  
  100. h3 {
  101. font-size: 1.3em;
  102. }
  103.  
  104. h1, h1 a, h1 a:hover, h1 a:visited, .description {
  105. text-decoration: none;
  106. }
  107.  
  108. h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
  109. color: #333;
  110. }
  111.  
  112. h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited{
  113. text-decoration: none;
  114. }
  115.  
  116. /* Modulos
  117. --------------------------------------------------------- */
  118.  
  119. #izquierda .moduletable_menu{
  120. text-align:right;
  121. margin-bottom:15px;
  122. }
  123.  
  124. #derecha .moduletable_menu, #derecha .moduletable{
  125. text-align:left;
  126. margin-bottom:15px;
  127. }
  128.  
  129. #izquierda .moduletable_menu li{
  130. margin:3px 0 0;
  131. padding:0;
  132. list-style-image:none;
  133. list-style-type:none;
  134. }
  135.  
  136. #izquierda .moduletable_menu li:before{
  137. content: "\00BB \0020";
  138. }
  139.  
  140. .moduletable_menu h3, .moduletable h3, .moduletable_text h3{
  141. margin:5px 0 0;
  142. padding:0;
  143. text-transform:uppercase;
  144. }
  145.  
  146. /* Contenido
  147. --------------------------------------------------------- */
  148.  
  149. .contentheading {
  150. font-size:1.4em;
  151. margin:0;
  152. color:#333333;
  153. font-weight:bold;
  154. }
  155.  
  156. .contentheading:hover {
  157. color:#3B6EA5;
  158. }
  159.  
  160. .componentheading{
  161. font-size:1.4em;
  162. margin:0;
  163. color:#777777;
  164. font-weight:bold;
  165. padding-left:10px;
  166. }
  167.  
  168. .contentpaneopen{
  169. line-height:1.4em;
  170. font-size:1.2em;
  171. text-align:left;
  172. padding: 0px 10px 0px 10px;
  173. }
  174.  
  175. .contentpaneopen img{
  176. padding: 5px 10px;
  177. }
  178.  
  179. .readon{
  180. font-size:0.8em;
  181. text-align:left;
  182. }
  183.  
  184. .contenttoc, .pagenavcounter{
  185. margin-bottom:10px;
  186. }
  187.  
  188. .article_separator{
  189. display:block;
  190. background:#474747;
  191. height:1px;
  192. margin:10px 60px 10px 10px;
  193. }
  194.  
  195. small , .createdate, .modifydate{
  196. font-family:Arial,Helvetica,Sans-Serif;
  197. font-size:0.9em;
  198. line-height:1.5em;
  199. color:#777777;
  200. padding-bottom:10px;
  201. }
  202.  
  203. .banneritem_text, .bannerfooter_text{
  204. padding:5px;
  205. }
  206.  
  207. /* Menu superior
  208. --------------------------------------------------------- */
  209.  
  210. #navegacion #mainlevel-nav{
  211. list-style:none;
  212. position:relative;
  213. padding:0px;
  214. float:left;
  215. padding-left:100px;
  216. }
  217.  
  218. #navegacion #mainlevel-nav li {
  219. float:left;
  220. height:20px;
  221. }
  222.  
  223. #navegacion #mainlevel-nav li a {
  224. float:left;
  225. text-decoration:none;
  226. margin:0px;
  227. padding-right:10px;
  228. }
  229.  
  230. #navegacion #mainlevel-nav li a:hover {
  231. text-decoration:underline;
  232. }
  233.  
  234. #navegacion #mainlevel-nav li a:before{
  235. content: "\00BB \0020";
  236. }

 

 

Template con diseño
 

 

El diseño está basado en White as Milk, template para Wordpress, creado por Azeem Azeez

 

Manejo de parámetros en la plantilla:

Como vimos al principio, los parámetros de un template se deben especificar en templateDetails.xml. Allí se debe poner el tipo de parámetro, las opciones que posee y cual es el parámetro por default. A su vez, los valores de los parámetros son guardados en el archivo params.ini que como vimos, se encuentra en la carpeta de la plantilla.

Veamos por ejemplo, la utilización de parámetros para cambiar el color de la tipografía del template. En templateDetails.xml nosotros ya hemos especificado la opción. Lo siguiente será crear un archivo params.ini con el valor por default que debe tener el parámetro, en este caso queremos que el color predeterminado de la tipografía sea azul:

 

params.ini
  1. color=azul

 

En caso de tener más parámetros, estos deben ir uno por línea con su correspondiente valor:

 

params.ini
  1. nombre_del_parametro_1=valor
  2. nombre_del_parametro_2=valor
  3. nombre_del_parametro_3=valor

 

Lo siguiente será ir al index.php y agregar la directiva que llamará al valor del parámetro. Este valor lo utilizaremos para crear un identificador CSS y así especificar cuando cargar un color y cuando otro. Entonces en el index.php, en la etiqueta <body> agregamos:

 

PHP
  1. <body id="<?php echo $this->params->get('color'); ?>">

 

De esta forma, dependiendo del valor que tenga el parámetro podremos tener:

Si seleccionamos como valor azul:

 

HTML
  1. <body id="azul">

 

Si seleccionamos como valor verde: 

HTML
  1. <body id="verde">

 

Si seleccionamos como valor rojo: 

HTML
  1. <body id="rojo">

 


Nos quedaría modificar el CSS del template para que dependiendo del identificador, se cambien los colores. En el apartado Color  podemos poner:

 

CSS
  1. /* Color     
  2. --------------------------------------------------------- */     
  3.  
  4. #header a {
  5. font-size:1.8em;
  6. margin-left:230px;
  7. }
  8.  
  9. a{
  10. text-decoration:none;
  11. }
  12.  
  13. #azul a{
  14. color:#3B6EA5;
  15. }
  16.  
  17. #azul #header a {
  18. color:#3B6EA5;
  19. }
  20.  
  21. #verde a{
  22. color:#59AC03;
  23. }
  24.  
  25. #verde #header a {
  26. color:#59AC03;
  27. }
  28.  
  29. #rojo a{
  30. color:#FF3131;
  31. }
  32.  
  33. #rojo #header a {
  34. color:#FF3131;
  35. }

 

Entrando a la configuración del template podremos cambiar el color de la tipografía.

 

Colores en el template

 

 

Creación de template_thumbnail.png

Lo último que nos quedaría para terminar nuestro template básico, es la creación template_thumbnail.png, la imagen que actuará a modo de previsualización del template en el back-end del sitio. No está establecido el tamaño estándar de la imagen, pero por lo general es de 200px de ancho y 150px de alto.

 

Apuntes finales

 

  • Si deseamos crear un instalador de nuestro template, recordemos de especificar en templateDetails.xml  todos los archivos que se utilizaron. Esto es importante ya que si no lo hacemos, al momento de subir el instalador Joomla! nos entregará un mensaje de error.
  • Una forma fácil para descubrir las diferentes clases asociadas que genera el output de Joomla! es utilizando Firebug , una extensión para Firefox que permite inspeccionar el DOM de un sitio y visualizar como está conformado.
  • En la web podemos encontrar varios recursos para continuar con el aprendizaje de la creación de templates para Joomla!, el más importante se encuentra en la documentación oficial del proyecto: Template reference material
  • No nos olvidemos de Mootools! En su página oficial se puede encontrar documentación y ejemplos para añadir efectos a la plantilla. 
  • Por seguridad, es conveniente crear un archivo index.html sin contenido y alojarlo en la carpeta de nuestro template y subcarpetas.

 

Descargar los archivos fuentes y la versión en PDF del manual desde Comunidad Joomla! 

 

 

 

 

 
Comentarios (40)
1 Miércoles, 01 de Octubre de 2008 21:26
Daniel Mendoza
Increible, tu tutorial es muy útil, felicitaciones. Ideal para los que apenas empiezan.
2 Jueves, 02 de Octubre de 2008 00:29
stanis
Muy bueno !!

Hacía tiempo que no pasaba asiduamente por aqui y ahora este turorial me viene de perlas para la web que quiero crear.

Lo que me tiene preocupado es el tema de seguridad. Me comentan que es fácil y habitual hackear sitios hechos con joomla ¿Alguna recomendación?

Un saludo
3 Jueves, 02 de Octubre de 2008 01:04
edurichard
Sensacional!!! ya fueron referencia obligada tus artículos sobre templates J1.0, y ahora te vuelves a superar!!!

Excelente trabajo! Me encanta echarle un vistazo a tu web de vez en cuando.

Un saludo
4 Jueves, 02 de Octubre de 2008 06:47
aleSub
genial el tutorial, muy útil!!! sin duda me va a ser de mucha utilidad.

un saludo!!!
5 Jueves, 02 de Octubre de 2008 13:30
Leandro
@stanis: La realidad es que ningún software es seguro, en el caso de Joomla! la gran mayoría de los sitios hackeados son debido a la instalación de componentes de terceros, los cuales luego de instalarlos nunca se actualizan o no se realiza un seguimiento para ver si surgen bugs peligrosos.
También depende en parte de responsabilidad que asuma el administrador del sitio, ya sea actualizando el mismo Joomla! o implementando medidas de seguridad en el servidor o no cometiendo errores groseros de seguridad.
Pero como dacia, ningún software es 100% seguro

Saludos
6 Sábado, 04 de Octubre de 2008 23:10
Martin Revert
Felicitaciones, excelente material como siempre Leandro.
7 Martes, 07 de Octubre de 2008 14:08
Michael
Muchísimas gracias me encuentro trabajando precisamente en un template para esta versión y tu información es de suma utilidad.
8 Miércoles, 08 de Octubre de 2008 19:10
martin
Muy completo y muy buen tutorial!
9 Domingo, 12 de Octubre de 2008 20:27
Mr Javo
Esta buena la guia, creo que cubre los aspectos mas basicos de los temas para joomla. Claro que si quieres hacer un tema muy muy prefesional quiza esta guia se quede corta, pero para empezar esta muy buena!
10 Lunes, 13 de Octubre de 2008 10:24
Logus
Realmente muy clara la guia, pero tengo una duda, es posibe definir en joomla un homepage?, para agrupar elementos use las ubicaciones user1, user2, pero eso le resta compatibilidad a mi template :(
http://www.atikalhosting.com/cayato
11 Lunes, 20 de Octubre de 2008 15:04
erika
tengo un problema kiero hacer un menu desplegable en el top
ya lo realice pero no me lo muestra en la pagina como le para q lo muestre
si me puede ayudar
grax
o decirme de un tutorial q me pueda ayudar con este menu
grax
12 Lunes, 20 de Octubre de 2008 19:02
Paula
Muy bueno y muy completo tu tutorial
13 Sábado, 25 de Octubre de 2008 05:23
Geral
Hola! Muy bueno el tutorial, muy claro y consiso. Aunque tengo un problema, cuando voy a viualizarlo por primera vez como lo haces tu aqui, en el backend me aparece el template pero para desinstalarla, pero para configurarla como predeterminada no me deja, asi que no he podido seguir :( ¿sabes a que se debe? Gracias.

PD: Felicidades por el execlente blog!
14 Jueves, 30 de Octubre de 2008 10:09
Ricardo André Brenes
Leandro, muchas gracias. Me salvaste la vida!

Saludos y prosperidad.
15 Domingo, 02 de Noviembre de 2008 18:49
eduardo
muxas gracias me fue de gran ayuda estas clases....
16 Miércoles, 05 de Noviembre de 2008 09:10
Ch0m0
buenisimo, gracias por la ayuda a los que recien empezamos con joomla
17 Viernes, 07 de Noviembre de 2008 09:41
zantotomax
Gracias por publicar contenido educativo y gratuito, es de ran apoyo unque sineto que me falta muchisimo por apreder, sobre todo con los estilos css, y con muchas cosas mas
18 Miércoles, 12 de Noviembre de 2008 07:19
Joatham
Sencillamente Genial
19 Miércoles, 19 de Noviembre de 2008 08:55
Vicente
amigo sos un genio te daria un beso!!! pero mi mujer de seguro que se enoja jeje
20 Viernes, 28 de Noviembre de 2008 18:13
N3150N
jejeje, bueno enrealidad esta muy bien este aporte, deberas te felicito, con respecto a lo del beso, fue un buen chiste!!! Deberas, muchas gracias, lo andaba buscando!
21 Viernes, 05 de Diciembre de 2008 10:48
Danifero
Excelente manual, muy util para cuando uno esta empezando a explorar este mundo de Joomla, ademas es ideal para personalizar el trabajo que se desarrolla. gracias por el manual.
22 Martes, 16 de Diciembre de 2008 04:54
Javier
Leandro, muchas gracias por el tutorial, ha sido tremendamente util.

Me gustaria pedirte ayuda con un problema que tengo,

Deseo que un grupo de articulos se muestre con una imagen al costado ingresada por el usuario. Es decir que la imagen cubra de forma vertical el texto y el titulo del articulo. ¿Es esto posibe? ¿Como lo puedo hacer?
23 Sábado, 24 de Enero de 2009 15:58
DarkNicht
Maestro, maestro, maestro bueno bien dicen que de tanto buscar se aprende a encontrar pues es un aporte que se merece el aplauso de todos y de pie un buen trabajo sigue adelante y gracias por el tuto que lo andaba necesitando felicidades y sigue adelante...
24 Lunes, 02 de Marzo de 2009 04:56
Jonas
buenisimo el tutorial, era lo que necesitaba, la base para despues ir programando a mi gusto!
salu2
25 Miércoles, 04 de Marzo de 2009 16:14
Aldemar Hernandez
Saludos. Tengo una duda La Hoja de estilos no me arranca en la plantilla una vez compilada. Copio y pego el contenido CSS al editar CSS desde joomla y tampoco funciona. usted sbe a que se debe eso?

Agradezco su respuesta
26 Martes, 10 de Marzo de 2009 20:44
ejosvp
excelente ayuda, pondre manos a la obra !!!
27 Miércoles, 11 de Marzo de 2009 00:01
sen
gracias por tu ayuda...
ahora podré comenzar a hacer mi pagina web...
28 Lunes, 23 de Marzo de 2009 20:23
gemu
excelente manual, felicitacion. Hay mucha gente que usa joomla pero nadie habia explicado tan bien como hacer una plantilla para la 1.5, me queda muy claro todo.

con la etiqueta jdoc, el php es interpretado antes de la ejecucion ¿?
29 Jueves, 09 de Abril de 2009 03:28
Pedro
Por que me aparece un formulario para loguiarme en el frontpage?
30 Martes, 21 de Abril de 2009 11:54
royking
Gracias a ti e podio comprender todo .)

Sigo aciendo el tutoria

gracias por dejar un post tan estupendo :D
31 Sábado, 09 de Mayo de 2009 01:07
byker
buen tutorial gracias por la ayuda

felicitaciones
32 Lunes, 11 de Mayo de 2009 04:45
Mariano
Excelente trabajo, tanto este tutorial como el que hiciste para Joomla 1.0
Muchas gracias...!!
33 Martes, 12 de Mayo de 2009 21:01
Fernando Prieto
Este tutorial está muy bacano. Muy claro y didáctico.

Sin embargo, tengo casi el mismo problema que cita Geral en el comentario No. 13.

Cuando quiero visualizar la plantilla por primera vez (antes de empezar a construir la hoja de estilos) en el backend no me aparece el template ni para desinstalarla, ni para configurarla como predeterminada.

Incluso, en el gestor de plantillas (en el backend) sale un aviso que dice:
"XML Parsing Error at 3:1. Error 5: Invalid document end".

Agradecería cualquier pista que me ayude a resolver este problema.
34 Lunes, 06 de Julio de 2009 17:42
Gary
gracias por el tuto esta bueno pero todavia tengo una duda..
como podria agregar un fondo a la cabeza de los modulos o menu.?

si alguien puede ayudar respondame por favor a mi correo garyjoz13@gmail.com o si no aca..
Gracias por el tuto.!!
35 Viernes, 10 de Julio de 2009 18:33
Fernando Prieto
Muy bueno el tutorial. Lo seguí y me funcionó.

No obstante, tuve problemas cuando comprimí toda la carpeta de la plantilla e hice la simulación como si la fuera a instalar.

Instaló exitosamente, no salieron errores. Sin embargo cuando fui a ver cómo se veia la página con la nueva plantilla no se veia nada de contenidos. ¡Sólo se veía una página en blanco!

¿Por qué sucedió esto? ¿Qué hice mal?

Agradecería que alguien más hiciera el ejercicio como si la fuera a instalar a partir de un archivo .zip a ver qué le sale.

Gracias por anticipado.
36 Lunes, 20 de Julio de 2009 14:37
ignacio bello
Leandro, muchas gracias por tu tutorial. Hice el 1.0 y ahora voy por el 1.5.
37 Viernes, 24 de Julio de 2009 12:07
Javier Campos
En el anterior tutorial sobre como crear un template para Joomla 1.0 publicasteis lo siguiente:







... de forma que si no había ningún modulo publicado en esa ubicación, no se escribe la etiqueta "caja".

Esa directiva no es válida para Joomla 1.5 ¿Cómo se escribe para esa versión? OBJETIVO: Que no se cree una etiqueta DIV si no hay módulos publicados para esa etiqueta.

Gracias por vuestra ayuda.
38 Martes, 28 de Julio de 2009 05:50
Gary
este tutorial me gusto pero quisiera saber como puedo ponerle un dropdown menu por favor si alguien me puede ayudar ..
gracias y saludos
39 Viernes, 28 de Agosto de 2009 21:49
ed03j
Me has sido de gran ayuda...gracias
40 Sábado, 24 de Octubre de 2009 12:11
Alejandro
Cuando alguien sabe, se nota... ^^
Me sacaste muchas dudas, Muy Bueno
Gracias!!!

Agregue su comentario

Tu Nombre:
Tu email:
Tu sitio web:
Comentario:
yvComment v.1.23.0