PDF de programación - Desarrollo templates para joomla 1.5 - Guía paso a paso

Desarrollando templates para Joomla! 1.5



Guía paso a paso

Por Comunidad Joomla!

comunidadjoomla.org



Este documento se distribuye bajo la licencia Creative Commons Atribución-No Comercial 2.5

1

Índice

Por Comunidad Joomla!............................................................................................................1
Índice........................................................................................................................................2
Antes de empezar.....................................................................................................................3
Estructura básica de una plantilla para Joomla! 1.5.x ................................................................3
Carpetas...............................................................................................................................4
css....................................................................................................................................4
html ..................................................................................................................................4
images..............................................................................................................................4
Archivos................................................................................................................................4
index.php..........................................................................................................................4
templateDetails.xml ..........................................................................................................4
template_thumbnail.png....................................................................................................4
params.ini.........................................................................................................................4
template.css .....................................................................................................................4
favicon.ico ........................................................................................................................4
imágenes varias ...............................................................................................................5
Creación de la carpeta para nuestro template ...........................................................................5
Creación de templateDetails.xml ...............................................................................................5
Datos....................................................................................................................................5
Archivos................................................................................................................................6
Posiciones ............................................................................................................................6
Parámetros...........................................................................................................................6
Creación de index.php ..............................................................................................................8
<jdoc:include type="head" />.................................................................................................9
$this->template.....................................................................................................................9
$mainframe->getCfg('sitename') ...........................................................................................9
<jdoc:include type="modules" name="posición" style="estilo" />............................................9
<jdoc:include type="component" /> .....................................................................................10
Edición de template.css ..........................................................................................................12
Clases pertenecientes a contenido......................................................................................15
componentheading .........................................................................................................15
contentheading...............................................................................................................15
buttonheading.................................................................................................................15
small...............................................................................................................................15
createdate ......................................................................................................................16
readon............................................................................................................................16
article_separator.............................................................................................................16
Clases pertenecientes a módulos........................................................................................16
moduletable....................................................................................................................16
h3...................................................................................................................................17
active..............................................................................................................................17
item ................................................................................................................................17
parent.............................................................................................................................17
Otras clases CSS importantes ............................................................................................17
button.............................................................................................................................17
inputbox..........................................................................................................................17
pagenav .........................................................................................................................17
modifydate......................................................................................................................17
sectiontableentry1 / sectiontableentry2 ...........................................................................18
Manejo de parámetros en la plantilla .......................................................................................22
Creación de template_thumbnail.png ......................................................................................24
Apuntes finales .......................................................................................................................24
Recursos para el futuro...........................................................................................................25



Este documento se distribuye bajo la licencia Creative Commons Atribución-No Comercial 2.5

2

Antes de empezar


 Necesariamente se debe tener:



o Conocimiento básico de HTML, CSS y PHP;
o Conocimiento del entorno de Joomla! y conceptos básicos (que es un modulo,
o Un servidor local o remoto con Joomla! 1.5 instalado;
o Un editor de programación (por ejemplo Notepad++ para Windows);

que es un componente, etc.)



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!



Este documento se distribuye bajo la licencia Creative Commons Atribución-No Comercial 2.5

3

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.


Este documento se distribuye bajo la licencia Creative Commons Atribución-No Comercial 2.5

4

imágenes 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 gene