Plantilla Cassiopeia de Joomla 4 : Micassiopeia

Cassipeia es el nombre que le pusieron los programadores del core Joomla a la plantilla que trae por defecto Joomla 4 para el front-end de tu web en esté maravilloso CMS, es ya tradición que la Comunidad de Joomla le ponga nombres a las plantillas en cada versión:

• Joomla 1.0 -> Solarflare
• Joomla 1.5 -> Milkyway ( pienso que traía alguna mas.. )
• Joomla 2.5 -> Atomic ( Aunque trae dos mas Beez2 y beez5
• Joomla 3.0 -> Protostar

Hasta la version 3 , hacia mis propia base de plantilla para utilizar en mis proyectos, a partir 3.5 utilice como base protostar, ahora en Joomla 4 pienso hacer lo lo mismo con Cassiopedia.

Cuando empece a utiliar PROTOSTART como base para mis proyectos, estudié un poco mas a fondo como funcionaba, lo podéis ver en este post de protostart de esta web.

Buscando información de cassiopeia, encuentro el modulo Kickstart Casiopeia, es impresionante lo que consiguio hacer con un modulo, sin afectar para nada en plantilla, espero poder utilizarlos algun día y os contaré. De momento seguiré estudiando a fondo el funcionamiento de está plantilla que será la base de mis proyectos que realice en Joomla 4.

En este post iré poniendo anotaciones, y todo aquello voy utilizando para personalizar Cassiopeia en esos y futuros proyectos web.

¿ En que se basaron los creadores Cassiopeia ?

Cassiopeia está basado en el framework Bootstrap 5 , utiliza los iconos propios de Joomla (icomoon) además de iconos de Font Awesome .

Está plantilla también utiliza su Grid CSS. En este post en aleman, lo explica muy bien.

Aunque estoy seguro que utilizar Grid CSS es una ventaja, de momento me voy basar en bootstrap 5, ya que lo conocemos mejor. :-)

En principio hay que tener en cuenta que Cassiopeia no utiliza JQuery, como podemos ver en este otro post en aleman del blog.novatrend.ch

¿ Lo primero de todo ?

Hasta ahora era duplicar la plantilla (copiar plantilla),  erá lo que haciamos con protostrat.

Ahora creamos una plantilla secundaría de cassiopeia (plantilla hija) , que nos crea la estructura de una plantilla pero con el ficheron template.xml, esta plantilla depende la plantilla padre, en este caso cassiopeia. La plantilla hija puedes cambiar  cualquier funcionalidad del padre con total tranquilidad , que no se va ver influida con las actualizaciones, y con la ventaja los ficheroa que no creas, que no cambias, se van actualizar, sin influir en principio en tus cambios y podiendote aprovechar de esos cambios.

¿ Conocer las opciones configuraciones que nos permite la plantillas en estilos?

Si entramos en estilo de nuestra plantilla cassiopeia podremos ver las siguientes opciones:

Las opciones siguientes:

• Marca : Si quieres añadir tu logotipo, título y eslogan, seleccione la opción ' Si '.  No muestra los elementos a todo lo ancho, si no te vale, tendrás que currar un poco index.php
• Logotipo : Puede cargar la imagen de su propio logotipo desde su computadora. Después de eso, Joomla lo ayudará a mostrar el logotipo en la posición designada para el logotipo automáticamente. Además de eso, también le crear un enlace a la página de inicio de su logotipo.
• Título (alternativa al logotipo) : En caso de que no pongas logotipo o no desee utilizar un logotipo, puede escribir un título. El título aparecerá en la posición del logotipo. Además, si no usa un logotipo y un título, Cassiopeia utilizará automáticamente el texto predeterminado 'Cassiopeia' del núcleo.
• Eslogan : Escribir una descripción de su sitio aquí. Entonces, Cassiopeia lo mostrará bajo el logo o el título alternativo.
• Esquema de fuentes : Las opciones que te da son: Ninguna, Fuentes de la carpeta o Fuentes de la Web.
• Tema de color : Las opciones que te da son color estándar y alternativos . Con la opcion de color estándar, el color ya se ha configurado y optimizado. Por el contrario, si elige esquemas de color alternativos, es posible que se sobrescriban los colores preestablecidos.
• Diseño : Puede seleccionar entre dos opciones: Estático y Fluido.
• Encabezado fijo :  Si habilitas esta opción, cuando se desplace hacia abajo en la página de su sitio, el área del encabezado permanecerá visible en la parte superior de la pantalla.
• Enlace "Volver al principio" : Si desea utilizar esta función,  agregar un vínculo en la parte inferior de su página. Cuando los visitantes hagan clic en él, la página se desplazará a la parte superior.

 No hay mas opciones, por lo que se queda un poco cojo para aquellos están acostumbrados a megas configuraciones en las plantillas que hacen de todo, puede ver el modulo Kickstart Casiopeia , yo hasta el momento no lo he probado. Aunque por defecto escamo de las macro configuraciones.

¿Donde poner nuestro css para sobrescribir la plantilla (overide)?

Desde la version 4.1 los ficheros css y js estan media/templates/sites/micassiopeia. De todas formas tiene crear el fichero user.css en directorio css , que va ser el fichero que sobreescriba los estilos de css de la plantilla padre.

Los ideal que las sobreescritura (anulaciones) de la plantilla es que los organices de forma, para tocar los minimos ficheros posibles, asi al actualizacions plantilla padres en mi caso Cassiopeia, solo tengas que revisar los minimos ficheros. Es el motivo por el que utilizo el fichero user.css y no toco css original en este caso bootstrap.

Piensa que en la cantidad desarrolladores utilizan esa plantilla  y  lo que trabajan en ella para dejarla perfecta , corregiendo errores, por eso es interesante poder aprovechar esa ventaja y actualizaciones. Si tienes poco que cambiar, es mas fácil en el momento que quieres revisar posibles actualizaciones y podras hacer merge sin conflitos.

Posiciones Cassiopeia

En este articulo de Magazin de Joomla: Trucos y consejos de cassiopeia en ingles encontre esta imagen, pero en el puedes encontrar mucha información y donde buscarla sobre cassiopeia hay esta imagen, donde nos explica perfectamente que posiciones tiene, mas suficiente para la mayoria de las webs.

Impresionante verdad.

¿ Donde cambiar los colores por defecto  de Cassipeia?

Aunque en las opciones de la plantilla nos da 2 configuraciones de colores, estoy seguro que no te seŕan suficientes, que tendrás que cambiarlas o adaptarlos.

Se puede sobrescribir estilos de css en el fichero user.css, pero queremos aprovechar las variables de las  reglas de css de la plantilla utiliza, por ellos es fundamental entender donde poner esos valores. Las variables de CSS que carga la plantilla son ideales para utilizar siempre esos mismo valores.

Estas variables las puedes encontrar en el fichero css/global/colors_standars.css:

// Variables, Functions and Mixins
@import "../tools/tools";
:root {
 --cassiopeia-color-primary: #{$standard-color-primary};
 --cassiopeia-color-link: #{$standard-color-link};
 --cassiopeia-color-hover: #{$standard-color-hover};
}

  En las versiones de Joomla  4.1.X y superiores el  css ya no esta en la plantilla, esta en la carpeta media 

Los valores de esa variables CSS podemos encontrar variables como está  {$standard-color-primary} que su valor viene del fichero css/tools/variables/_variables.scss. Si no quieres cambiar ese fichero, siempre te queda añadirlo directamente en tu fichero user.css  tal como te comento:

:root {
 --cassiopeia-color-primary : tu color;
 --cassiopeia-color-link : tu color;
 --cassiopeia-color-hover : tu color;
}

Menu horizontal y responsive en Cassiopeia

El poner el menu horizontal y responsive en Joomla, siempre fue un poco complejo en todas las versiones anteriores, asi es que incluso había modulos en las primeras versiones que utilizaba para ello, sin embargo en este template por defecto que trae Joomla 4 es muy sencillo.

Solo tenemos selecciona la opcion de presentacion collapse de cassiopeia y listo, ya funciona.

Lo normal es que selecciones la posicion de menu que trae cassiopeia