SERGIOIGLESIAS

Blog sobre Joomla

Cómo crear y usar un sufijo de página en Joomla!

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.

¿Te ha gustado el artículo?

Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

No hay comentarios

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.