(Tiempo estimado: 2 - 4 minutos)

Son varios ya los artículos que he escrito sobre desarrollo de plantillas Joomla y hoy te traigo uno más en donde te explico Cómo crear y usar un sufijo de página en Joomla.

Qué es una clase (o sufijo) en una página Joomla!

Cómo crear y usar un sufijo de página en #Joomla para cambiar los estilos de #plantilla - #TipJoomla por @sergiois Tuitéalo

Vamos a seguir lo aprendido en el artículo de Cómo crear una clase para dar estilo a los módulos en una plantilla Joomla!

Aquí ya te explicaba qué es una clase en CSS para un módulo. Para una página es más o menos similar: se trata de una "palabra clave" que nos permite dar un estilo u otro, o cambiar los ya existentes, en una determinada página.

Esta clase se pone a través del campo "Clase CSS de la página" que tenemos en la pestaña "Visualización de la página" en un ítem de menú.

campo clase css pagina

Puede que alguna plantilla utilice ya esta forma de maquetar y, por tanto, haya que tenerlo en cuenta.

También, y esto es peor, puede que hayan modificado la vista y no funcione esta clase.

Mi consejo es que antes de utilizarlo lo pruebes en un entorno que no sea de producción.

Te recuerdo que puedes probar Joomla de varias formas de manera gratuita.

Cómo utilizar una clase en una página de Joomla

Una vez has introducido un nombre de una clase, por ejemplo " pagina-intermedia" en el campo que tienes más arriba, en la etiqueta body de esa página, o en otra en función de la plantilla, debería ponerse, quedando algo como:

<body clase="pagina-intermedia">

Con esto ya podemos irnos a nuestra hoja de estilos (CSS) y añadir todas las clases necesitemos o modificar las existes.

Vamos a suponer que estamos con la Plantilla protostar de Joomla (que es la que viene por defecto en Joomla).

Hay que tener en cuenta que en esta plantilla no se usa el sufijo en la etiqueta body sino en un div interno que dependerá del tipo de ítem de menú.

Ejemplo de sufijo de página

Para este ejemplo, trabajamos con un ítem de menú de tipo "Mostrar un solo artículo". Aquí, el div incialmente es así:

<div class="item-page" itemscope itemtype="https://schema.org/Article">

El artículo de este ejemplo muestra un párrafo con una clase alert alert-info que es propia del Framework Bootstrap 2.3.2 en el que está basado la plantilla.

item menu inicial

Puedes ver cómo ese párrafo se ve con un fondo en color azul.

Al añadir el sufijo de página, pasaría a ser de esta otra forma:

<div class="item-page pagina-intermedia" itemscope itemtype="https://schema.org/Article"">

Si no hacemos nada más que esto, la visualización de la página será la misma.

Pero si añadimos el siguiente código en nuestra hoja de estilos:

.pagina-intermedia .alert-info{background-color: red; border-color: red; color: #fff;}

Al cargar de nuevo esta página veremos como el fondo que antes era de color azul, pasa a color rojo (y el texto en color blanco en lugar de azul).

item menu despues

A partir de este momento, en todas los ítem de menú en los que añadamos este sufijo de página todos los estilos que tengan alert-info se verán de esta forma.


Espero que este mini-tutorial Joomla! sobre cómo utilizar los sufijos de página en un ítem de menú de Joomla! te haya resultado de interés.

Si quieres ayudarme, y te ha gustado, comparte el artículo con tus amigos a través de las redes sociales.

¿Quieres saber cómo crear y usar un sufijo de página en #Joomla para cambiar los estilos de #plantilla? Tuitéalo

Y si quieres aprender más sobre Desarrollo de Plantillas Joomla! regístrate en mi newsletter y recibe un curso gratis.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.



Código de seguridad
Refescar

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo