SEGUNDA PARTE DEL TUTORIAL COMO CREAR UN Template Y ESTRUCTURA DEL MISMO PASO A PASO. 

   • Seguimos viendo la forma de crear un template en Joomla y aprendemos a entender como está estructurado; hoy presento la segunda lección que espero te resulte interesante.

               

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

    El CSS de Joomla!
   

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

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

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

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

   Puesta a punto de la maquetación  

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

Por lo tanto el CSS original era:

   CSS

* {padding: 0; margin: 0; }
 
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper {
 margin: 0auto;
 width: 922px;
}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #BD9C8C;
}
#leftcolumn {
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content {
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 456px;
 display: inline;
}
#rightcolumn {
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#footer {
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

    • Quitando los atributos que nombré quedará:

* {
padding: 0;
margin: 0;
}
 
body{
 
}
 
#wrapper {
 margin: 0auto;
 width: 922px;
}
 
#header {
 width: 900px;
 float: left;
 padding: 10px;
 height:42px;
 padding-bottom:30px;
}
 
#leftcolumn {
 margin: 0px 5px 5px 0px;
 padding: 10px;
 width: 195px;
 float: left;
}
#content {
 float: left;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 width: 456px;
 display: inline;
}
#rightcolumn {
 margin: 0px 0px 5px 0px;
 padding: 10px;
 width: 195px;
 float: left;
}
#footer {
 width: 900px;
 clear: both;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

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

      Estilos referentes al contenido principal.

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

     CSS

.contentheading {
font: 2.5em "Times New Roman", Times, Serif;
letter-spacing: -0.05em;
color: #96D377;
}
 
.contentheading a{
color: #79B33A;
}
 
.contentheading a:hover{
color: #96D377;
}

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

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

   CSS

.contentpaneopen{
color: #4F4F4F;
padding:020px 00;
text-align:justify;
}
 
.contentpaneopen li{
padding:030px 0 10px;
background: url(../images/lista.gif)no-repeat0 5px;
list-style:none;
}

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

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

    CSS

.createdate, .modifydate{ 
font-size: 0.8em;
color: #5F5F5F;
}

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

    CSS

.readon, .readon:hover{
color: #497858;
text-decoration:underline;
}

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

   

Estilos referentes a los módulos

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

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

    CSS

.moduletable{
margin-bottom:20px;
}

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

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

    CSS

.moduletable h3 {
font:  2em/1em  "Times New Roman", Times, Serif;
letter-spacing: -0.09em;
color: #497858;
border-bottom: 1px solid #A7A37E;
margin-bottom:10px;
}

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

    CSS

.moduletable .mainlevel{
text-decoration:none;
color: #235033;
}

• .moduletable .latestnews: Es la clase específica del modulo ' Últimas noticias '. Los títulos son cargados en una lista.
  
• .moduletable .mostread: Es la clase específica del modulo ' Popular '.Los títulos son cargados en una lista.
  
• .moduletable .search: Es la clase específica del modulo ' Buscador '. Ejemplo:

    CSS

.moduletable .search input{
font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
border:1px solid #CCC;
color:#666;
padding:2px 0 2px 5px;
}
 
.moduletable .search input:hover{
background-color:#FFFFF1;
}

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

Clases personalizadas para los módulos

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

                       
 

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

Estilos de los menús

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

                           
    

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

Estilos globales:  

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

    CSS

body{
font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
background: #FFFFFF;
color: #4F4F4F;
}

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

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

    CSS

img {
padding: 4px 18px 4px 8px;
}
 
a{
text-decoration:none;
color: #235033;
}
 
li {
list-style:none;
}
 
li a {
font: 1.1em Georgia, "Times New Roman", Times, Serif;
color:#046380;
}
 
li a:hover {
color: #4A8797;
}

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

    CSS

#header h1 {
font: 3.5em/1em "Times New Roman", Times, Serif;
letter-spacing: -0.05em;
color: #69BFDE;
border-bottom: 1px solid #A7A37E;
margin-bottom:30px;
}

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

    CSS

/*----------------------------------------------------
Template de ejemplo para Joomla!
version:   1.0
date:      09/04/07
author:    [Leandro D´Onofrio]
email:     [ donofrio.leandro(arroba)gmail.com. Esta dirección de correo electrónico está protegida contra los robots de spam, necesita tener Javascript activado para poder verla ]
website:   [www.leandrodonofrio.com]
Maquetación:
Created by Keith Donegan of Code-Sucks.com
E-Mail: Keithdonegan(arroba)gmail.com. Esta dirección de correo electrónico está protegida contra los robots de spam, necesita tener Javascript activado para poder verla
You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com
------------------------------------------------------*/
 
 
/* Estilos globales
------------------------------------------------------*/
* {
margin: 0;
padding: 0;
border: 0;
}
 
body{
font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
background: #FFFFFF;
color: #4F4F4F;
}
 
img {
padding: 4px 18px 4px 8px;
}
 
a{
text-decoration:none;
color: #235033;
}
 
li {
list-style:none;
}
 
li a {
font: 1.1em Georgia, "Times New Roman", Times, Serif;
color:#046380;
}
 
li a:hover {
color: #4A8797;
}
 
 
/* Header
------------------------------------------------------*/
#header h1 {
font: 3.5em/1em "Times New Roman", Times, Serif;
letter-spacing: -0.05em;
color: #69BFDE;
border-bottom: 1px solid #A7A37E;
margin-bottom:30px;
}
 
 
/* Maquetación
------------------------------------------------------*/
#wrapper {
 margin: 0auto;
 width: 922px;
}
 
#header {
 width: 900px;
 float: left;
 padding: 10px;
 height:42px;
 padding-bottom:30px;
}
 
#leftcolumn {
 margin: 0px 5px 5px 0px;
 padding: 10px;
 width: 195px;
 float: left;
}
#content {
 float: left;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 width: 456px;
 display: inline;
}
#rightcolumn {
 margin: 0px 0px 5px 0px;
 padding: 10px;
 width: 195px;
 float: left;
}
#footer {
 width: 900px;
 clear: both;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
 
/* Estilos para Joomla!
------------------------------------------------------*/
 
/*Estilos referentes al contenido principal*/
.contentheading {
font: 2.5em "Times New Roman", Times, Serif;
letter-spacing: -0.05em;
color: #96D377;
}
 
.contentheading a{
color: #79B33A;
}
 
.contentheading a:hover{
color: #96D377;
}
 
.contentpaneopen{
color: #4F4F4F;
padding:020px 00;
text-align:justify;
}
 
.contentpaneopen li{
padding:030px 0 10px;
background: url(../images/lista.gif)no-repeat0 5px;
list-style:none;
}
 
.createdate, .modifydate{ 
font-size: 0.8em;
color: #5F5F5F;
}
 
.readon, .readon:hover{
color: #497858;
text-decoration:underline;
}
 
.pagenav_next a, .pagenav_prev a{
text-decoration:none;
color:#77C727;
font-weight: bold;
}
 
 
/*Estilos referentes a los módulos*/
.moduletable, .moduletable_menu{
margin-bottom:20px;
}
 
.moduletable h3, .moduletable_menu h3 {
font:  2em/1em  "Times New Roman", Times, Serif;
letter-spacing: -0.09em;
color: #497858;
border-bottom: 1px solid #A7A37E;
margin-bottom:10px;
}
 
.moduletable .search input{
font: 1.1em/1.4em Georgia, "Times New Roman", Times, Serif;
border:1px solid #CCC;
color:#666;
padding:2px 0 2px 5px;
}
 
.moduletable .search input:hover{
background-color:#FFFFF1;
}
 
.moduletable .mainlevel{
text-decoration:none;
color: #235033;
}

   -- En la tercera -y última parte del tutorial--, explicaré como crear el ' TemplateDetails.xml ' y hablar sobre un par de puntos que deje en el tintero.

      * Descargar ejemplo 2                             »» Subir al principio de esta página  ►

    ** Lección 2 de 3

---

Agrega esta pagina a tu favoritos, en alguna "Red Social" de abajo