Usando los estilos propios de Joomla! – Capítulo 11

Nombre de la Clase

.componentheading

Corresponde a:

Ejemplo de maquetación CSS

Formateo del título de la página principal. En una instalación recién hecha corresponde al primer título “Welcome to Frontpage”.

.componentheading   {

       background: #000080;

       text-transform: uppercase;

       color: #FFFFFF;

       padding: 2px 2px 2px 2px;

       border-bottom: 1px dotted #000080;

       font-weight: bold;

}

Nombre de la Clase

.contentheading

Corresponde a:

Ejemplo de maquetación CSS

Formateo del título del artículo.

.contentheading {

    font-weight: bold;

    background: url(../images/fondonav.gif);

}

Nota:

Observen que en este código utilizamos el mismo fondo que el menú superior pero pueden usar otro.

Nombre de la Clase

.small y .createdate

Corresponde a:

Ejemplo de maquetación CSS

La clase “.small” corresponde al autor del artículo y la clase “.createdate” a la fecha y hora de creación del mismo.

.small, .createdate {

    font-size: smaller;

    color: #000000;

}

Nota:

Aquí le damos propiedades a las dos clases juntas (se separa con una coma)

Nombre de la Clase

.buttonheading

Corresponde a:

Ejemplo de maquetación CSS

Es la clase para formatear los botones “PDF-Imprimir-Email” que se agregan en cada artículo de Joomla.

.buttonheading a{

    color: white;

}

Nombre de la Clase

.readon

Corresponde a:

Ejemplo de maquetación CSS

“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.

.readon {

    text-decoration: none;

    color: #000099;

    font-weight: bold;

}

a.readon:hover{

    background: #99CCFF;

    font-style: italic;

    text-decoration: underline;

}

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.

Nombre de la Clase

.article_separator

Corresponde a:

Ejemplo de maquetación CSS

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.

.article_separator{

    display:block;

    background:#474747;

    height:1px;

    margin:10px 60px 10px 10px;

}

Nombre de la Clase

.contentpaneopen

Corresponde a:

Ejemplo de maquetación CSS

Es el cuerpo mismo de los artículos.

.contentpaneopen {

     font-family: Georgia, Verdana;

}

Nombre de la Clase

.moduletable

Corresponde a:

Ejemplo de maquetación CSS

Corresponde a los módulos que aparecerán en nuestra plantilla.

Observen que en el ejemplo que vemos utilizamos el sufijo “_menu” porque es lo que vamos a configurar .

Esto supone que Uds. deberán primeramente acceder al back-end de Joomla, ir al menú correspondiente (en este caso el Main Menu posicionado a la derecha “right”), abrirlo haciendo un click sobre el nombre y agregando en “Parámetros Avanzados” -> “Sufijo de la clase del módulo” el texto “_menu” (sin comillas).

Como otra observación, vean que además le agregamos adelante de la clase el nombre del identificador del div correspondiente a su ubicación dentro del index.php.

/* 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: “�0BB �020”;

}

/* Formateamos tanto el títulos del menú como de los módules que allí pongamos */

.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;

}

Nombre de la Clase

.moduletable (para el menú superior ubicado en la posición USER3)

Corresponde a:

Ejemplo de maquetación CSS

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).

#navegador .moduletable-nav{

    text-align:center;

}

#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;

}