Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.

5
1
Desarrollando templates para J oomla! 1.5








Gua paso a paso

Por Comunidad J oomla!
comunidadjoomla.org












Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
2
ndice

Por Comunidad J oomla!............................................................................................................1
ndice........................................................................................................................................2
Antes de empezar.....................................................................................................................3
Estructura bsica de una plantilla para J oomla! 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
imgenes varias ...............................................................................................................5
Creacin de la carpeta para nuestro template...........................................................................5
Creacin de templateDetails.xml ...............................................................................................5
Datos....................................................................................................................................5
Archivos................................................................................................................................6
Posiciones............................................................................................................................6
Parmetros...........................................................................................................................6
Creacin de index.php..............................................................................................................8
<jdoc:include type="head" />.................................................................................................9
$this->template.....................................................................................................................9
$mainframe->getCfg('sitename') ...........................................................................................9
<jdoc:include type="modules" name="posicin" style="estilo" />............................................9
<jdoc:include type="component" />.....................................................................................10
Edicin 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 mdulos........................................................................................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 parmetros en la plantilla.......................................................................................22
Creacin de template_thumbnail.png......................................................................................24
Apuntes finales .......................................................................................................................24
Recursos para el futuro...........................................................................................................25



Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
3
Antes de empezar

Necesariamente se debe tener:

o Conocimiento bsico de HTML, CSS y PHP;
o Conocimiento del entorno de J oomla! y conceptos bsicos (que es un modulo,
que es un componente, etc.)
o Un servidor local o remoto con J oomla! 1.5 instalado;
o Un editor de programacin (por ejemplo Notepad++para Windows);


Estructura bsica de una plantilla para Joomla! 1.5.x

Bsicamente un template puede estar formado por las siguientes carpetas y archivos:




Estructura de una plantilla en J oomla!




Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
4
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 mdulos y
componentes. Su uso no es prioritario pero es una funcionalidad a explotar si deseamos un
cdigo personalizado para componentes/mdulos.
images
Contendr las imgenes usadas para el diseo.


Archivos
index.php
El archivo principal, contendr todo el HTML y directivas PHP de J oomla! para cargar el
contenido (artculos, componentes, mdulos, 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 J oomla! 1.5 la plantilla podr tener parmetros
manejables desde el back-end para cambiar la visualizacin del template. En este archivo se
agregaran los parmetros y las posiciones de disponibles para mostrar los mdulos.
template_thumbnail.png
Es la imagen que actuar como previsualizacin del template en la administracin.
params.ini
Contendr los valores para configurar los parmetros del template. Si la plantilla no posee
parmetros 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
J oomla! 1.0.x este archivo tena 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 Atribucin-No Comercial 2.5
5
imgenes varias
Conformaran el diseo de la plantilla.

Dentro de la carpeta 'html', como deca ms arriba, estarn archivos y carpetas especficos
para los mdulos y componentes del sitio. Con esto podremos manejar a nuestro gusto la
apariencia y el output de dichos componentes y mdulos. La idea es que la plantilla prevalezca
por encima del output HTML que genera J oomla! De esta forma, por ejemplo, podremos
reemplazar todas las tablas que genera tal componente y reemplazarlas por DIVs.

Creacin de la carpeta para nuestro template

Lo primero que haremos ser crear la carpeta en donde se alojaran los archivos de nuestra
plantilla. Para eso vamos al directorio 'templates' de J oomla! y creamos una carpeta con el
nombre que queramos, en minscula, y en caso de ser varias palabras, sin espacios. Luego
podemos crear las subcarpetas necesarias: css, images y/o HTML


Nombre de la carpeta que alojar nuestro template

Creacin de templateDetails.xml

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

Datos
Aqu, entre cada etiqueta pondremos los datos especficos de la plantilla como su versin,
autor, email, pgina web, ao, licencia y descripcin:


XML

<?xml ver si on="1. 0" encodi ng="ut f - 8"?>
<i nst al l ver si on="1. 5" t ype="t empl at e">
<name>Nombr e del t empl at e</ name>
<cr eat i onDat e>Fecha de cr eaci n</ cr eat i onDat e>
<aut hor >Nombr e del aut or </ aut hor >
<copyr i ght >Li cenci a</ copyr i ght >
<aut hor Emai l >E- mai l del aut or </ aut hor Emai l >
<aut hor Ur l >Web del aut or </ aut hor Ur l >
<ver si on>Ver si n</ ver si on>
<descr i pt i on>
<! [ CDATA[
Aqui va l a descr i pci n, puede usar se HTML o t ext o pl ano.
] ] >
</ descr i pt i on>

Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
6
Archivos
Cuando hayamos terminado nuestro trabajo, aqu deberemos especificar todos los archivos
que hemos utilizado para el diseo, 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 J oomla!) podemos dejar estos campos incompletos, pero es muy
recomendable que al terminar el trabajo lo completemos debidamente:


XML

<f i l es>
<f i l ename>i ndex. php</ f i l ename>
<f i l ename>t empl at eDet ai l s. xml </ f i l ename>
<f i l ename>t empl at e_t humbnai l . png</ f i l ename>
<f i l ename>f avi con. i co</ f i l ename>
<f i l ename>css/ t empl at e. css</ f i l ename>
<f i l ename>i mages/ i magen. png</ f i l ename>
</ f i l es>

Posiciones
Es importante saber con anticipacin que posiciones usaremos y cuantas en nuestro sitio para
planificar en donde mostrarlos en la plantilla.


XML

<posi t i ons>
<posi t i on>l ef t </ posi t i on>
<posi t i on>r i ght </ posi t i on>
<posi t i on>user 3</ posi t i on>
</ posi t i ons>

Parmetros
Si deseamos realizar una plantilla ms verstil, podemos agregarle parmetros para ser
manejados desde el Back-end. Por ejemplo, si nuestra plantilla cuenta con la posibilidad de
configurar los colores de fondo, esta opcin estar habilitada para ser activada desde la
administracin de J oomla!. En J oomla! 1.0.x, si aadamos un parmetro, este solo poda ser
modificado tocando el index.php de la plantilla. Podemos encontrar un ejemplo de parmetros
de template accediendo a Extensiones --> Gestor de pl antillas -->rhuk_mil kyway. En la
columna derecha veremos los parmetros para dicho template:




Parmetros para el template rhuk_milkyway
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
7


XML

<par ams>
<par amname="col or " t ype=" l i st " def aul t ="bl anco" l abel ="Col or de l a
t i pogr af i a" descr i pt i on="Col or de l a t i pogr af i a">
<opt i on val ue="azul " >Azul </ opt i on>
<opt i on val ue="r oj o" >Roj o</ opt i on>
<opt i on val ue="ver de">Ver de</ opt i on>
</ par am>
</ par ams>
</ i nst al l >



Los valores por default y cada vez que modificamos un parmetro desde el back-end, son
guardados en el archivo params.ini. Corre por nuestra cuenta si nosotros queremos o no
aadir este tipo de posibilidad a nuestro diseo. Por lo general son las plantillas comerciales las
que lo implementan, ya que le otorga mucha flexibilidad al producto. Ms adelante veremos un
ejemplo de utilizacin de parmetros.

Entonces templateDetails.xml puede tener la siguiente apariencia:


XML

<?xml ver si on="1. 0" encodi ng="ut f - 8"?>
<i nst al l ver si on="1. 5" t ype="t empl at e">
<name>Nombr e del t empl at e</ name>
<cr eat i onDat e>Fecha de cr eaci on</ cr eat i onDat e>
<aut hor >Nombr e del aut or </ aut hor >
<copyr i ght >Li cenci a</ copyr i ght >
<aut hor Emai l >E- mai l del aut or </ aut hor Emai l >
<aut hor Ur l >Web del aut or </ aut hor Ur l >
<ver si on>Ver si on</ ver si on>
<descr i pt i on>
<! [ CDATA[
Aqui va l a descr i pci on, puede usar se HTML o t ext o pl ano.
] ] >
</ descr i pt i on>
<f i l es>
<f i l ename>i ndex. php</ f i l ename>
<f i l ename>t empl at eDet ai l s. xml </ f i l ename>
<f i l ename>t empl at e_t humbnai l . png</ f i l ename>
<f i l ename>f avi con. i co</ f i l ename>
<f i l ename>css/ t empl at e. css</ f i l ename>
<f i l ename>i mages/ i magen. png</ f i l ename>
</ f i l es>
<posi t i ons>
<posi t i on>l ef t </ posi t i on>
<posi t i on>r i ght </ posi t i on>
<posi t i on>user 3</ posi t i on>
</ posi t i ons>
<par ams>
<par amname="col or " t ype=" l i st " def aul t ="azul " l abel ="Col or de l a t i pogr af i a"
descr i pt i on="Col or de l a t i pogr af i a">
<opt i on val ue="azul " >Azul </ opt i on>
<opt i on val ue="r oj o" >Roj o</ opt i on>
<opt i on val ue="ver de">Ver de</ opt i on>
</ par am>
</ par ams>
</ i nst al l >

Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
8
Creacin de index.php

Para la creacin del index.php, lo primero que haremos ser insertar el HTML que formar la
maquetacin de la plantilla. Para eso partiremos desde un layout bsico de tres columnas,
barra de navegacin, header y footer. Entonces en index.php creamos el HTML:


PHP

<! DOCTYPE ht ml PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"
"ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d" >
<ht ml xml ns="ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
</ head>

<body>

<! - - Cont enedor - - >
<di v i d="cont enedor " >

<! - - Comi enzo header - - >
<di v i d="header ">

</ di v>
<! - - Fi n header - - >

<! - - Comi enzo navegaci on- - >
<di v i d="navegaci on" >

</ di v>
<! - - Fi n navegaci on - - >

<! - - Comi enzo col umna i zqui er da - - >
<di v i d="i zqui er da">

</ di v>
<! - - Fi n col umna i zqui er da - - >

<! - - Comi enzo cont eni do - - >
<di v i d="cont eni do">

</ di v>
<! - - Fi n cont eni do - - >

<! - - Comi enzo col umna der echa - - >
<di v i d="der echa">

</ di v>
<! - - Fi n col umna der echa - - >

<! - - Comi enzo f oot er - - >
<di v i d="f oot er ">

</ di v>
<! - - Fi n f oot er - - >

</ di v>
<! - - Fi n cont enedor - - >

</ body>
</ ht ml >




Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
9
Lo siguiente ser ir incorporando las directivas que cargaran toda la informacin para que la
plantilla funcione. Veamos las bsicas:

<jdoc:include type=" head" />
Esta directiva ir dentro de la cabecera HTML. Cargar el ttulo de la pgina en cuestin,
metatags, feed, y framework javascript. J oomla! a partir de la versin 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 algn archivo fuente).
Obviamente no hay que tomarlo para mal, sino al revs, entre lneas el equipo de J oomla! nos
esta diciendo que echemos rienda suelta a nuestra imaginacin y utilicemos a Mootools para
aadir 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 aadir las lneas 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

<head>
<j doc: i ncl ude t ype=" head" / >
<l i nk r el ="st yl esheet " hr ef ="t empl at es/ <?php echo $t hi s- >t empl at e
?>/ css/ t empl at e. css" t ype="t ext / css" / >
</ head>




Por otro lado, para el cuerpo utilizaremos:

$mainframe->getCfg('sitename')
Obtendremos el nombre del sitio en cuestin.

<jdoc:include type=" modules" name=" posicin"
styl e=" estilo" />
Con esta directiva estamos indicando la carga de un mdulo en particular y de una manera
especifica.
Esto se establecer a partir de los parmetros 'name' y 'style'. En el caso del primero,
escribiremos la posicin de mdulo que queremos cargar. Por ejemplo, si deseamos todos los
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
10
mdulos derechos, el parmetro ser 'name="right"'. El segundo parmetro 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 mdulo ser cargado a travs de tablas, la diferencia es que el primer parmetro
lo har de forma vertical (a travs de una columna) y el segundo lo har de forma horizontal (a
travs de una fila). Si utilizamos 'xhtml' el contenido en vez de ser cargado en tablas ser
insertado en DIVs. El parmetro '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 travs de imgenes. Finalmente el parmetro 'raw' cargar el contenido neto,
sin contenedores ni ttulo.


Ejemplo: Queremos insertar en DIVs todos los mdulos izquierdos en determinada parte del
sitio, la directiva quedar conformada por:


PHP

<j doc: i ncl ude t ype=" modul es" name="l ef t " st yl e="xht ml " / >



Ejemplo 2: Queremos cargar los mdulos que se encuentran en la posicin 'top' de manera
horizontal:


PHP

<j doc: i ncl ude t ype=" modul es" name="t op" st yl e="hor z" / >



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 (artculos, secciones, categoras, etc.). A
diferencia de la inclusin de mdulos, esta directiva no posee parmetros para manejar en
donde cargar el contenido.

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
















Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
11
PHP

<! DOCTYPE ht ml PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"
"ht t p: / / www. w3. or g/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d" >
<ht ml xml ns="ht t p: / / www. w3. or g/ 1999/ xht ml " >
<head>
<j doc: i ncl ude t ype=" head" / >
<l i nk r el ="st yl esheet " hr ef ="t empl at es/ <?php echo $t hi s- >t empl at e
?>/ css/ t empl at e. css" t ype="t ext / css" / >
</ head>

<body>

<! - - Cont enedor - - >
<di v i d="cont enedor " >

<! - - Comi enzo header - - >
<di v i d="header ">
<h1><a hr ef ="i ndex. php"><?php echo $mai nf r ame- >get Cf g( ' si t ename' ) ; ?></ a></ h1>
</ di v>
<! - - Fi n header - - >

<! - - Comi enzo navegaci on- - >
<di v i d="navegaci on" >
<j doc: i ncl ude t ype=" modul es" name="user 3" st yl e=" xht ml " / >
</ di v>
<! - - Fi n navegaci on - - >

<! - - Comi enzo col umna i zqui er da - - >
<di v i d="i zqui er da">
<j doc: i ncl ude t ype=" modul es" name="l ef t " st yl e="xht ml " / >
</ di v>
<! - - Fi n col umna i zqui er da - - >

<! - - Comi enzo cont eni do - - >
<di v i d="cont eni do">
<j doc: i ncl ude t ype=" component " / >
</ di v>
<! - - Fi n cont eni do - - >

<! - - Comi enzo col umna der echa - - >
<di v i d="der echa">
<j doc: i ncl ude t ype=" modul es" name="r i ght " st yl e=" xht ml " / >
</ di v>
<! - - Fi n col umna der echa - - >

<! - - Comi enzo f oot er - - >
<di v i d="f oot er ">
<! - - Car go el f oot er - - >
<?php i ncl ude_once( ' i ncl udes/ f oot er . php' ) ; ?>
</ di v>
<! - - Fi n f oot er - - >

</ di v>
<! - - Fi n cont enedor - - >

</ body>
</ ht ml >










Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
12
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:


Apariencia de nuestro template sin estilos



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


Edicin de template.css

Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
13
Vamos a la carpeta 'css' y creamos el archivo template.css. Lo primero que haremos ser
insertar los estilos para la maquetacin de la plantilla:

CSS

* {
paddi ng: 0;
mar gi n: 0;
}

body {
f ont - si ze: 62. 5%;
f ont - f ami l y: ' Luci da Gr ande' , Ver dana, Ar i al , Sans- Ser i f ;
col or : #333;
backgr ound- col or : whi t e;
}

#cont enedor {
mar gi n: 0 aut o;
wi dt h: 922px;
}

#header {
wi dt h: 900px;
f l oat : l ef t ;
paddi ng: 10px;
mar gi n: 10px 0px 5px 0px;
}

#navegaci on {
f l oat : l ef t ;
wi dt h: 900px;
paddi ng: 10px;
mar gi n: 0px 0px 5px 0px;
}

#i zqui er da {
mar gi n: 0px 5px 5px 0px;
paddi ng: 10px;
wi dt h: 195px;
f l oat : l ef t ;
}

#cont eni do{
f l oat : l ef t ;
mar gi n: 0px 5px 5px 0px;
paddi ng: 10px;
wi dt h: 456px;
di spl ay: i nl i ne;
}

#der echa {
col or : #333;
mar gi n: 0px 0px 5px 0px;
paddi ng: 10px;
wi dt h: 195px;
f l oat : l ef t ;
}

#f oot er {
wi dt h: 900px;
cl ear : bot h;
mar gi n: 0px 0px 10px 0px;
paddi ng: 10px;
}


Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
14

Apariencia de nuestro template con estilos de maquetacin





Ahora somos libres de aadir los estilos que queramos, pero para eso primero debemos
conocer algunas de las clases que J oomla! carga por default en sus elementos.



Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
15
Clases perteneci entes a contenido


Clases CSS asociadas a un artculo

componentheading
Nuestra el ttulo del componente en cuestin. La pgina de inicio, al ser un componente
(com_frontpage) tiene posibilidad de mostrar un ttulo.

contentheading
Es la clase perteneciente a la celda que muestra el ttulo de los artculos.

buttonheadi ng
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 artculo.
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
16
createdate
Es usado por la celda que muestra la fecha de creacin de un artculo.

readon
Utilizada por el link "Leer ms..."

arti cle_separator
Utilizada por la etiqueta <span>que separa a los artculos entre s.

Clases perteneci entes a mdulos
Por lo general, las clases asociadas a mdulos dependen de varias cosas, desde la forma en
que nosotros seleccionamos el estilo de carga del mdulo, hasta si esta posee un sufijo de la
clase de mdulo. Adems muchos mdulos creados por terceros poseen sus propias clases
propias.

Tomemos como ejemplo, un mdulo del tipo men:



Clases CSS asociadas a un mdulo del tipo men


moduletable
Arriba contbamos que los mdulos pueden cargarse de diferentes formas, dentro de tablas
en DIVs. Para nuestro template nosotros hemos especificado que los mdulos se carguen en
un solo DIV a travs del parmetro style="xhtml". Para este caso, el DIV contenedor posee la
clase CSS asociada moduletable
Si nosotros entramos a la edicin del mdulo, podremos aadir un sufijo especifico para
moduletable:
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
17

Parmetro para aadir sufijo CSS



h3
Los ttulos de los mdulos se cargan con la etiqueta H3.

active
Para el caso del men, cuando nos encontramos dentro de una pgina existente como item, se
agrega la clase active.

item
A su vez cada elemento del men posee una clase unica, la cual es item ms el ID que posea
dicho elemento. Es importante esta clase cuando deseamos un diseo nico por cada
elemento del men.

parent
Si hemos creado un elemento que a su vez posee sub-items, al elemento padre se le aade la
clase parent.

Otras cl ases CSS importantes
button
Es una clase asociada a elementos del tipo botn.

inputbox
Suele estar asociada a elementos text-input.

pagenav
Clase asociada a la paginacin de artculos.

modifydate
Clase asociada a la fecha de modificacin de un artculo.
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
18
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 mdulos que vamos a usar:


CSS


* {
paddi ng: 0;
mar gi n: 0;
}

body {
f ont - si ze: 62. 5%;
f ont - f ami l y: ' Luci da Gr ande' , Ver dana, Ar i al , Sans- Ser i f ;
col or : #333;
}

#cont enedor {
mar gi n: 0 aut o;
wi dt h: 922px;
}

#header {
wi dt h: 900px;
f l oat : l ef t ;
paddi ng: 10px;
mar gi n: 10px 0px 5px 0px;
}

#navegaci on {
f l oat : l ef t ;
wi dt h: 900px;
paddi ng: 10px;
mar gi n: 0px 0px 5px 0px;
}

#i zqui er da {
mar gi n: 0px 5px 5px 0px;
paddi ng: 10px;
wi dt h: 195px;
f l oat : l ef t ;
}

#cont eni do {
f l oat : l ef t ;
mar gi n: 0px 5px 5px 0px;
paddi ng: 10px;
wi dt h: 456px;
di spl ay: i nl i ne;
}

#der echa {
col or : #333;
mar gi n: 0px 0px 5px 0px;
paddi ng: 10px;
wi dt h: 195px;
f l oat : l ef t ;
}

#f oot er {
wi dt h: 900px;
cl ear : bot h;
mar gi n: 0px 0px 10px 0px;
paddi ng: 10px;
}

/ * Col or
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
19

a{
t ext - decor at i on: none;
col or : #3B6EA5;
}

#header a {
f ont - si ze: 1. 8em;
mar gi n- l ef t : 230px;
col or : #3B6EA5;
}

/ * El ement os
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

a: hover {
col or : #147;
t ext - decor at i on: under l i ne;
}

a i mg{
bor der : 0px;
}

h1, h2, h3 {
f ont - f ami l y: ' Tr ebuchet MS' , ' Luci da Gr ande' , Ver dana, Ar i al , Sans- Ser i f ;
f ont - wei ght : bol d;
}

h1 {
f ont - si ze: 2em;
}

h2 {
f ont - si ze: 1. 6em;
}

h3 {
f ont - si ze: 1. 3em;
}

h1, h1 a, h1 a: hover , h1 a: vi si t ed, . descr i pt i on {
t ext - decor at i on: none;
}

h2, h2 a, h2 a: vi si t ed, h3, h3 a, h3 a: vi si t ed {
col or : #333;
}

h2, h2 a, h2 a: hover , h2 a: vi si t ed, h3, h3 a, h3 a: hover , h3 a: vi si t ed{
t ext - decor at i on: none;
}

/ * Modul os
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#i zqui er da . modul et abl e_menu{
t ext - al i gn: r i ght ;
mar gi n- bot t om: 15px;
}

#der echa . modul et abl e_menu, #der echa . modul et abl e{
t ext - al i gn: l ef t ;
mar gi n- bot t om: 15px;
}

#i zqui er da . modul et abl e_menu l i {
mar gi n: 3px 0 0;
paddi ng: 0;
l i st - st yl e- i mage: none;
l i st - st yl e- t ype: none;
}

#i zqui er da . modul et abl e_menu l i : bef or e{
cont ent : " \ 00BB \ 0020";
}

Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
20
. modul et abl e_menu h3, . modul et abl e h3, . modul et abl e_t ext h3{
mar gi n: 5px 0 0;
paddi ng: 0;
t ext - t r ansf or m: upper case;
}

/ * Cont eni do
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

. cont ent headi ng {
f ont - si ze: 1. 4em;
mar gi n: 0;
col or : #333333;
f ont - wei ght : bol d;
}

. cont ent headi ng: hover {
col or : #3B6EA5;
}

. component headi ng{
f ont - si ze: 1. 4em;
mar gi n: 0;
col or : #777777;
f ont - wei ght : bol d;
paddi ng- l ef t : 10px;
}

. cont ent paneopen{
l i ne- hei ght : 1. 4em;
f ont - si ze: 1. 2em;
t ext - al i gn: l ef t ;
paddi ng: 0px 10px 0px 10px;
}

. cont ent paneopen i mg{
paddi ng: 5px 10px;
}

. r eadon{
f ont - si ze: 0. 8em;
t ext - al i gn: l ef t ;
}

. cont ent t oc, . pagenavcount er {
mar gi n- bot t om: 10px;
}

. ar t i cl e_separ at or {
di spl ay: bl ock;
backgr ound: #474747;
hei ght : 1px;
mar gi n: 10px 60px 10px 10px;
}

smal l , . cr eat edat e, . modi f ydat e{
f ont - f ami l y: Ar i al , Hel vet i ca, Sans- Ser i f ;
f ont - si ze: 0. 9em;
l i ne- hei ght : 1. 5em;
col or : #777777;
paddi ng- bot t om: 10px;
}

. banner i t em_t ext , . banner f oot er _t ext {
paddi ng: 5px;
}

/ * Menu super i or
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#navegaci on #mai nl evel - nav{
l i st - st yl e: none;
posi t i on: r el at i ve;
paddi ng: 0px;
f l oat : l ef t ;
paddi ng- l ef t : 100px;
}
Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
21

#navegaci on #mai nl evel - nav l i {
f l oat : l ef t ;
hei ght : 20px;
}

#navegaci on #mai nl evel - nav l i a {
f l oat : l ef t ;
t ext - decor at i on: none;
mar gi n: 0px;
paddi ng- r i ght : 10px;
}

#navegaci on #mai nl evel - nav l i a: hover {
t ext - decor at i on: under l i ne;
}

#navegaci on #mai nl evel - nav l i a: bef or e{
cont ent : " \ 00BB \ 0020";
}





Template con diseo


El diseo est basado en White as Mil k http://azeemazeez.com/misc/whiteasmilk/ , template
para Wordpress, creado por Azeem Azeez http://www.azeemazeez.com/blogs/white-as-milk/


Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
22
Manejo de parmetros en la plantilla

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

Veamos por ejemplo, la utilizacin de parmetros para cambiar el color de la tipografa del
template. En templateDetails.xml nosotros ya hemos especificado la opcin. Lo siguiente ser
crear un archivo params.ini con el valor por default que debe tener el parmetro, en este caso
queremos que el color predeterminado de la tipografa sea azul:




col or =azul



En caso de tener ms parmetros, estos deben ir uno por lnea con su correspondiente valor:




nombr e_del _par amet r o_1=val or
nombr e_del _par amet r o_2=val or
nombr e_del _par amet r o_3=val or



Lo siguiente ser ir al index.php y agregar la directiva que llamar al valor del parmetro. 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

<body i d="<?php echo $t hi s- >par ams- >get ( ' col or ' ) ; ?>">



De esta forma, dependiendo del valor que tenga el parmetro podremos tener:

Si seleccionamos como valor azul:

HTML

<body i d="azul ">



Si seleccionamos como valor verde:

HTML

<body i d="ver de">



Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
23
Si seleccionamos como valor rojo:

HTML

<body i d="r oj o">


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

CSS

/ * Col or
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


#header a {
f ont - si ze: 1. 8em;
mar gi n- l ef t : 230px;
}

a{
t ext - decor at i on: none;
}

#azul a{
col or : #3B6EA5;
}

#azul #header a {
col or : #3B6EA5;
}

#ver de a{
col or : #59AC03;
}

#ver de #header a {
col or : #59AC03;
}

#r oj o a{
col or : #FF3131;
}

#r oj o #header a {
col or : #FF3131;
}





Entrando a la configuracin del template podremos cambiar el color de la tipografa.

Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
24

Diferentes colores utilizando parmetros

Creacin de template_thumbnail.png

Lo ltimo que nos quedara para terminar nuestro template bsico, es la creacin
template_thumbnail.png, la imagen que actuar a modo de previsualizacin del template en el
back-end del sitio. No est establecido el tamao estndar 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
templateDetail s.xml todos los archivos que se utilizaron. Esto es importante ya que si
no lo hacemos, al momento de subir el instalador J oomla! nos entregar un mensaje de
error.

Una forma fcil para descubrir las diferentes clases asociadas que genera el output de
J oomla! es utilizando Firebug http://getfirebug.com , una extensin 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
creacin de templates para J oomla!, el ms importante se encuentra en la
documentacin oficial del proyecto: Templ ate reference material
http://docs.joomla.org/Template_reference_material

No nos olvidemos de Mootools! En su pgina oficial http://mootools.net se puede
encontrar documentacin y ejemplos para aadir 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.


Este documento se distribuye bajo la licencia Creative Commons Atribucin-No Comercial 2.5
25
Recursos para el futuro


Tanto si ests interesado en desarrollar sitios para terceros, como si lo ests en desarrollar
sitios para t, tras este manual paso a paso, te queda todo un mundo abierto de posibilidades y
de recursos para seguir profundizando y adquiriendo mayor experiencia con J oomla!


Si te decides a trabajar ms con J oomla!, estos enlaces generales pueden ayudarte en tus
venideros desarrollos:


http://forum.joomla.org Regstrate, busca y pregunta. Siempre ayuda a otros si te es
posible!

http://help.joomla.org Encuentra ms y ms documentacin.

http://extensions.joomla.org Encuentra un montn de extensiones!.

http://www.joomla.org Estate al da y !encuentra el modo de devolver tu gratitud a la
comunidad en la medida de tus posibilidades!

http://www.comunidadjoomla.org Vistanos y participa con nosotros si te apetece!,
aparte de adaptar guas y otro material de ayuda para J oomla! del ingls al espaol,
dedicamos nuestras energas a:

o Mantener y actualizar los packs de J oomla! en nuestro idioma.
o Generar material de ayuda en nuestro idioma para J oomla!
o Traducir noticias J oomla! del ingls al espaol
o Traducir extensiones para J oomla! que sean GNU/GPL
o Dar soporte para J oomla!, en nuestro idioma, desde nuestro Foro
http://foro.comunidadjoomla.org/
o Tenemos una wiki para documentacin
o Y un blog para charlar sobre temas de inters!


Todo esto y algunas cosas ms, con el objetivo principal de fomentar y promover la
colaboracin entre usuarios, sin nimo de lucro; brindando el espacio y un entorno apropiado
que lo permitan, a travs de nuestro proyecto Comunidad J oomla!.