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

Lo que vamos a hacer ahora, los estilos propios de Joomla, 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 – 2.5 – 3.x de este genial CMS. (nota del autor:  la lista ya publicada en otro post)

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:

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;

}

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.

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;

}

content: “�0BB �020”: 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í:{xtypo_code}- “” 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.{/xtypo_code}

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: http://ascii.cl/es/codigos-html.htm

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;

}


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 de Joomla en esta dirección (Enlace actualizado el 06-01-2014):

http://docs.joomla.org/Using_Class_Suffixes
Si quieren profundizar más y entienden el inglés, visiten el sitio de Joomla code developer en
http://developer.joomla.org

Final Version 1 – Capitulo XIIMaquetando con Tamaños Variables

4 comentarios en «Usando los estilos propios de Joomla! – Capítulo 11»

  1. Gran trabajo
    Te felicito por todos estos capitulos que nos han ayudado a entender mucho mejor cómo funcionan las plantillas.

    ¿Podrías incluir un nuevo capitulo que hable de la carpeta html que incluyen muchas de las templates? En qué afectan al diseño/funcionamiento de joomla. Si no se incluyen ¿qué ocurre?

    Gracias de antemano.

  2. Carpeta HTML
    Con respecto a los archivos “index.html” que hay dentro de las carpetas ya escribí un artículo que acabo de publicar – http://solojoomla.com/index-en-las-plantillas.html -. Con respecto a la carpeta “html” la misma se utiliza para personalizar el aspecto y comportamiento de módulos y/o componentes, generalmente los comunes de Joomla: articulos, polls o encuestas, el frontpage, las secciones, etc. Dentro de esa carpeta verás que hay archivos PHP y si miras un poco los códigos te darás cuenta que “agregan” funcionalidad a la plantilla o personalizan su presentación. Es una caracterísitica de Joomla para aprovechar cuando hacemos plantillas. La contra: tenes que saber PHP si o sí. 😉 (de última “copiar” de otras)

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad