Capítulo X - Usando los estilos propios de Joomla!

Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
Lo que vamos a hacer ahora es darle un poco más de “estilo” a nuestra
plantilla utilizando las clases e identificadores propios de Joomla! Eso
significa que trabajaremos de ahora en más, solamente sobre nuestro
archivo “template.css”.
Para nuestro primer proyecto hemos utilizado CSS con identificadores
propios pero Joomla! tiene los suyos predeterminados de forma
inequívoca y que sirven para darle estilo a cada una de sus partes. La
lista de estilos es muy extensa así que solamente veremos los más
importantes y al final pondré una lista de todos los que incorpora la
versión 1.5 de este genial CMS.
Primeramente pongamos un comentario dentro del archivo CSS para
separar lo que son “nuestros“ estilos de los que son de Joomla!.
Vayamos al final del archivo y pongamos algo como esto:
/* Estilos de Joomla! */ (es un simple comentario en CSS)
Debajo vamos a ir agregando las propiedades de las clases propias de
Joomla explicaciones de la clase y ejemplos.
Dejo para que Uds. ejerciten e investiguen cada una de las
propiedades del código CSS y se diviertan “jugando” con las clases,
dándole colores, bordes, formatos, etc.
Nombre de la Clase: .componentheading
Corresponde a: Formateo del título de la página principal. En una
instalación recién hecha corresponde al primer título “Welcome to
Frontpage”.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.componentheading {
background: #000080;
text-transform: uppercase;
color: #FFFFFF;
padding: 2px 2px 2px 2px;
border-bottom: 1px dotted #000080;
font-weight: bold;
}{/codecitation}
Nombre de la Clase: .contentheading
página 1 / 6
Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
Corresponde a: Formateo del título del artículo.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.contentheading {
font-weight: bold;
background: url(../images/fondonav.gif);
}{/codecitation}
{xtypo_info}Nota: Observen que en este código utilizamos el mismo
fondo que el menú superior pero pueden usar otro.{/xtypo_info}
Nombre de la Clase: .small y .createdate
Corresponde a: La clase “.small” corresponde al autor del artículo y
la clase “.createdate” a la fecha y hora de creación del mismo.
Ejemplo de maquetación CSS:
{codecitation stype="brush:css;"}.small, .createdate {
font-size: smaller;
color: #000000;
}{/codecitation}
{xtypo_info}Nota: Aquí le damos propiedades a las dos clases juntas
(se separa con una coma){/xtypo_info}
Nombre de la Clase: .buttonheading
Corresponde a: Es la clase para formatear los botones
“PDF-Imprimir-Email” que se agregan en cada artículo de Joomla.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.buttonheading a{
color: white;
}{/codecitation}
Nombre de la Clase: .readon
Corresponde a: “Leer más…”, es el formateo del texto del pie del
artículo cuando usamos este corte. Les aconsejo lo utilicen con
frecuencia para darle más profesionalidad al sitio.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.readon {
text-decoration: none;
color: #000099;
página 2 / 6
Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
font-weight: bold;
}
a.readon:hover{
background: #99CCFF;
font-style: italic;
text-decoration: underline;
} {/codecitation}
{xtypo_info}Nota: Noten que aquí también le asignamos propiedades
al enlace (a) de “Leer más…” y a la subclase hover, para darle un
efecto especial.{/xtypo_info}
Nombre de la Clase: .article_separator
Corresponde a: Esta clase corresponde al separador de artículos.
Según configuremos sus propiedades podemos utilizarla para “dividir”
nuestros artículos. No es la única forma, pero es una de las más
usadas.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.article_separator{
display:block;
background:#474747;
height:1px;
margin:10px 60px 10px 10px;
}{/codecitation}
Nombre de la Clase: .contentpaneopen
Corresponde a: Es el cuerpo mismo de los artículos.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}.contentpaneopen {
font-family: Georgia, Verdana;
}{/codecitation}
Codificación de módulos y menús
Esta es una de las partes más complicadas y largas de codificar,
dependiendo del tipo de menú que queramos hacer.
A continuación verán ejemplos de código CSS tanto para el Menú
Principal como para el Menú Superior con comentarios incluídos dentro
del mismo.
página 3 / 6
Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
Nombre de la Clase: .moduletable
Corresponde a: Corresponde a los módulos que aparecerán en
nuestra plantilla.
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}
/* Alineamos el texto a la izquierda y le damos un margen superior
para separarlo del div anterior */
#lateral .moduletable_menu{
text-align:left;
margin-bottom:15px;
}
/* Definimos que tanto el menú como cualquier texto que se encuentre
en el módulo se alínee a la izquierda y también le damos un margen */
#lateral .moduletable_menu, #lateral .moduletable{
text-align:left;
margin-bottom:15px;
}
/* Aquí ya estamos dándole propiedades a la lista del menú */
#lateral .moduletable_menu li{
margin:3px 0 0;
padding:0;
list-style-image:none;
list-style-type:none;
}
/* Enlaces del menú */
#lateral .moduletable_menu a{
text-decoration: none;
}
/* Configuramos la subclase de la lista */
#lateral .moduletable_menu li:hover{
text-decoration: underline;
}
/* Le decimos que nos muestre el carácter » al comienzo de ítem de la
lista a 1 espacio de distancia (leer explicación al pie) */
#lateral .moduletable_menu li:before{
content: "\00BB \0020";
}
/* Formateamos tanto el títulos del menú como de los módules que allí
pongamos */
página 4 / 6
Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
.moduletable_menu h3,
.moduletable h3,
.moduletable_text h3{
margin:5px 0 0;
text-align:center;
background: url(../images/fondonav.gif);
padding:0;
text-transform:uppercase;
}{/codecitation}
{xtypo_info}content: "\ 00BB \ 0020”: Esta línea es una codificación
especial de CSS y corresponde a una pseudo clase llamada “:before”.
La propiedad “content” de esta seudo clase se puede utilizar
convirtiendo caracteres a HTML o bien imágenes con el sistema PHP
base64. En este caso estamos usando lo primero y lo que hacemos es
asignar (before) “antes” a cada uno de los ítems de la lista (li) del
menú, el carácter “ » ”. Y ¿por qué no ponemos directamente el
carácter? Porque en Joomla trabajamos con UTF-8 y de poner el
carácter como es veríamos un signo de pregunta, por eso tenemos que
convertirlo a lenguaje HTML, para que cualquier navegador lo
interprete en HTML.
La codificación se lee así:
- “\” es la entrada de carácter codificado
- 00BB : Esto se lee: decimal 00 (o sea nada), hexadecimal BB que es
el carácter “»” en la codificación HTML.
- 0020 : Esto se lee: decimal 00 (o sea nada) hexadecimal 20 que
equivale a un espacio en la codificación HTML.
Esta técnica es muy útil cuando queremos personalizar al máximo
nuestras listas asignando caracteres especiales. Hay una lista
completa de los mismos y su equivalente en HTML en esta dirección
.{/xtypo_info}
Nombre de la Clase: .moduletable
Corresponde a: tipo de módulo para el menú superior ubicado en la
posición USER3
Ejemplo de maquetación CSS:
{codecitation style="brush:css;"}
#navegador .moduletable-nav{
text-align:center;
página 5 / 6
Capítulo X - Usando los estilos propios de Joomla!
by Tux Merlin - Joomla-gnu.com
www.joomla-gnu.com
}
#navegador .moduletable-nav li{
padding:0;
list-style-image:none;
list-style-type:none;
}
#navegador .moduletable-nav a{
text-decoration: none;
}
#navegador .moduletable-nav a:hover{
text-decoration: underline;
text-transform: uppercase;
color: #3300CC;
}{/codecitation}
Observen que en el ejemplo que vemos le agregamos el sufijo “-nav”.
Como en el menú anterior, supone que Uds. deberán primeramente
acceder al back-end de Joomla, ir al menú correspondiente (en este
caso el Main Menu posicionado en USER3), abrirlo haciendo un click
sobre el nombre y agregando en “Parámetros Avanzados” -> “Sufijo de
la clase del módulo” el texto “-nav” (sin comillas).
Existen muchísimas clases más de Joomla al final de este capítulo
verán un listado completo sacado de Joomlacode, sitio de los creadores
de Joomla.
Como complemento a esta unidad podría ver algunas cuestiones más
respecto al tratamiento CSS y los sufijos de Joomla en esta dirección.
Si quieren profundizar más y entienden el inglés, visiten el sitio de
Joomla Code Developer.
página 6 / 6
Powered by TCPDF (www.tcpdf.org)