Sufijos de clases en Joomla 1.7

sufijo_clase_joomla17_0Tutorial sobre la utilización de los sufijos de clase en Joomla 1.7. En Joomla existen diferentes clases que se encuentran definidas en los correspondientes archivos CSS. Estas clases son clases predefinidas, por lo que, si las modificamos directamente, el resultado afectará a todo el contenido de nuestra web. Sin embargo, empleando los sufijos de clases, podemos cambiar el aspecto de contenidos concretos sin que esto afecte a otros elementos de nuestra página.

Antes de comenzar a utilizar los sufijos de clase, podemos revisar el código fuente de nuestra web para ver como Joomla emplea las clases. Veremos que existen distintas clases para cada elemento de la página.

sufijo_clase_joomla17_1

 

Los sufijos nos permitirán actuar sobre algunos de estos elementos para modificar su aspecto sin afectar a la clase original.

 

Sufijos de clases de página

Éstos sufijos nos permitirán modificar el aspecto de una o varias páginas.

Para personalizar el aspecto de una página tendremos que ir al gestor de menús y acceder al elemento que queremos personalizar.

sufijo_clase_joomla17_1_1

 

En la sección de opciones, vamos a "Opciones de visionado de la página" y en el campo "Clase CSS de la página" escribimos el nombre de la clase.

sufijo_clase_joomla17_2

 

Podemos escribir el nombre de dos formas:

  • Sin espacio al inicio, con lo que el texto se añadirá al de la clase principal, aplicando una clase que todavía no existe. Esto provoca que nuestra página pierda el estilo de esta clase y podemos definirle un estilo personalizado en la nueva clase definida.

sufijo_clase_joomla17_3

 

  • Con espacio al inicio, creando así una nueva clase independiente que permitirá que siga aplicándose el estilo de la clase principal.

sufijo_clase_joomla17_4

 

Una vez creado el sufijo de clase, tendremos que editar el archivo CSS correspondiente para modificar el estilo. En este caso el archivo se encuentra en "templates/siteground-j16-8/css/template.css".

sufijo_clase_joomla17_5

 

Aquí incluiremos el código para modificar el estilo a nuestro gusto.

sufijo_clase_joomla17_6

 

Al acceder al front-end veremos que el estilo se ha modificado, aplicándose el color elegido al texto de la página.

sufijo_clase_joomla17_7

 

Sufijos de clases de módulo

Los sufijos de clases de los módulos nos permitirán modificar el aspecto de los módulos. Funcionan de la misma forma que los sufijos de página.

Para crear un sufijo de clase para un módulo, iremos al gestor de módulos y accederemos a las propiedades del elemento deseado.

sufijo_clase_joomla17_8

 

Escribiremos el nombre del sufijo en el campo "clase CSS del módulo" de la sección "Opciones avanzadas".

sufijo_clase_joomla17_9

 

En el código de la página veremos que el módulo cuenta ahora con una nueva clase.

sufijo_clase_joomla17_10

 

Si modificamos el archivo CSS correspondiente, cambiaremos el aspecto del módulo.

sufijo_clase_joomla17_11

 

Sufijos de clases de menú

En el caso de los menús, al tratarse también de módulos, cuentan con el atributo "Clase Css del módulo" (explicado previamente), pero además disponen de otras dos propiedades de las que carecen el resto de módulos.

Si vamos al gestor de módulos y accedemos a las propiedades de cualquier elemento del tipo "Menú" (user menu, main menu, menu), veremos que, en la sección "Opciones avanzadas" aparecen los campos "ID de la etiqueta" y "Clase CSS del menú":

  • Clase CSS del menú. Este sufijo esta pensado para modificar el aspecto de las listas que conforman los menús.

sufijo_clase_joomla17_12

 

Si accedemos al código de la página, vemos que el sufijo se aplica al elemento "ul" del menú.

sufijo_clase_joomla17_13

 

  • ID de la etiqueta. Al igual que en el caso anterior, el ID se emplea para modificar el estilo del menu pero precisando todavía mas.

sufijo_clase_joomla17_14

 

Finalmente, al acceder al código fuente de la página, vemos que, igual que antes, el sufijo actúa sobre el elemento "ul"

sufijo_clase_joomla17_15

 

 

Enlace | Sufijos de Clase

Escribir un comentario

Por favor procura que tus comentarios estén relacionados con la entrada, comenta con tu nombre y no pongas enlaces en tu comentario. Intenta también respetar a los demás lectores, los comentarios off topic, promocionales, ofensivos o ilegales serán editados y borrados.


Código de seguridad
Refescar

Sigue este blog por

Suscríbete a Ayuda Joomla y recibe las actualizaciones de forma automática.

RSS Facebook Twitter Youtube Google Plus

Si te suscribes a nuestra newsletter recibirás una recopilación de 25 plantillas para Joomla gratuitas y cupones de descuento para extensiones y servicios premium de Joomla

Pack de plantillas Ayuda Joomla

Mi email es:

Patrocinadores

Axarnet