Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 

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

Aunque hasta la versión 3 no utilizaba las plantillas por defecto, ahora sí. Antes solía hacerme un base propia para mis plantillas , las que utilizaba en nuestros proyecto o de nuestros clientes,

A partir de Joomla 3 empecé tomar como base la propia plantilla que traía por defecto Joomla, en ese caso era Protostar, estudié un poco mas a fondo como funcionaba, lo podéis ver en este post de protostart que puse en esta web.

Aunque queda mucho para que dejen de dar mantenimiento a Joomla 3,  tendremos que ir pensando en como actualizar, así que poco a poco, así que en algún nuevo proyecto lo voy haciendo en Joomla 4 y por consecuencia utilizando Cassiopeia, por lo que me obliga estudiar 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 ?

Duplicar la plantilla (copiar plantilla), no te equivoques con duplicar estilos de la plantilla.

La idea es crear tu propia cassipeia , en la cual puedes cambiar con total tranquilidad, ya que si hay actualizaciones no se ven afectadas en tu plantilla.

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

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

parametros plantilla cassiopeia estilos

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, pero esto suele recargar de código las plantillas, por eso prefiero una plantilla muy poco pesada a una super cargada de opciones, y añadirle yo las opciones que me interesen.

 

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

Creamos el fichero user.css en directorio de la plantilla css. Este va ser el fichero que sobreescriba los estilos de css de la plantilla.

Esto es necesario obligatorio si no vas hace una copia de la plantilla y si la hacer, lo recomiendo igualmente. Este fichero en las actualizaciones no lo va tocar, no va cambiar.

Aunque inicialmente dije que haciendo una copia de la plantilla cassipeia podíamos cambiar todo lo que nos plazca , el fichero sigue siendo util para retoques finales o cambios post publicacion de la web.

Los cambios que hagas en tu Copia de la plantilla lo recomendable es que los organices de forma que el dia de mañana quieras fusionar las actualizacions que traiga la plantilla original de Cassiopeia, no sea un quebradero de cabeza, por eso muchos cambios es recomendable hacerlos sobreescribiendo en el fichero user.css.

Piensa que muchos desarrolladores utilizan esa plantilla por lo que trabajan en ella para dejarla perfecta y corregir los errores, por eso es interesante que lo deje medianamente preparado para aprovecharte de esas actualizaciones. Si tienes poco que cambiar, es mas fácil en el momento que quieres revisar posibles actualizaciones, es decir, poner hacer merge de tu copia  con la plantilla original de cassipeia, tendrás menos conflictos, por consecuencia menos trabajo.

 

¿ 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.

Seleccion menu horizontal Cassiopeia

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

 

 

Solo se permiten comentarios a usuarios registrados.