Plantillas
Una de las características más sobresalientes de Joomla es la gran facilidad que tiene para cambiar su aspecto estético. Tiene perfectamente separada la parte visual de la parte de lógica, algo que en wordpress no es del todo así. En Joomla es mucho mas facil de cambiar de plantilla que wordpress, porque este en la plantilla siempre incluyen funcionalidades que deberían estar fuera ella.
Existe muchas plantillas de Joomla, no tantas como en wordpress, pero abelas ailas :-)
En este apartado podrás encontrar plantillas comerciales y plantillas propias realizadas por nosotros. Inicialmente no estoy muy a favor de utilizar plantillas comerciales, por lo que implica: actualizaciones, mantenimiento y requisitos.
Cambiar el favicon de la plantilla cassiopeia debería ser un parametro, esto lo comento para el proyecto de Pablo Arias que quiere montar una plantilla básica con cassiopeia pero con mas opciones. :-)
Al tajo, busco informacion y como siempre voy a las webs conocidad:
"Como cambiar el favicon en la plantilla de cassiopeia de Joomla 4" de Sergio Iglesias
En esta entrada lo explica super bien , donde poner el favicon , para las versiones anteriores 4.1.1 y para las superiores.
Lo unico que yo añadiría a esa entrada es explicar como carga el favicon , me explico:
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
Como bien dice en la entrada Sergio, esas son la lineas que cargan el favicon y se pone las tres por los distintos navegadores.
La cuestion es que si tu en la ruta que indica que pongas tu favicon.
media/templates/site/cassiopeia/images/tufavicon.ico
Si haces como yo que solo pongo un favicon ( ico), como mi navegador admite los favicon svg, la primera linea carga el svg, pues entonces muestra ese favicon y no el que acabo de poner.
Mi solucion rápida es comentar la primera linea, aunque lo mejor sería conseguir el favico en ese formato. :-)
Me imagino que lo navegadores que solo admitan los mask-icon, cargaran la segunda linea no la primera.
En la version 4.1.0 sacan la opcion de duplicar plantilla y la sustituyen por crear subplantilla de Joomla (plantillas hijas).
Duplicar plantilla, lo hacia es copiar los ficheros tal cual en el directorio de template, de esa plantilla.
La nueva opcion ( subplantilla) lo que hace copiar la estructura directorios en template y añaden el archivo templateDetails.xml.
En esa versión hay otro cambio bastante relevante, que es cambio la ubicacion de los ficheros css,sass y js de las plantillas pasandolos para el directorio media/templates/nombrePlantilla/, esto en principio para mi es un cambio bastante importante.
Creando una subplantilla de cassiopeia
Entró la plantilla cassiopeia y pulso crear subplantilla, no abre un popup que nos puede un nombre, yo pongo cassiopeia_minombre. A continuación reviso en el codigo que me creo y veo:
Cambios en directorio templates
Podemos ver crea un directorio en plantillas con el nombre que le pusimos, dentro del directorio añade el fichero templateDetails.xml
El objetivo de está entrada es explicar paso a paso como hacer una nueva presentación en una categoría y una nueva opción en item de menú del componente content. Como no podría ser de otra forma , va ser una web en Joomla 4. Inicialmente empezó con el vídeo que pondré continuación y está pregunta en el foro de Joomla
La intención es crear una presentación para utilizar una categoría que va ser un directorio de empresa para una web, lo voy hacer sin necesidad de utilizar ninguna extensión externa. Para poder realizar lo tendré que hacer override de mi plantilla actual, que es una copia de Cassiopedia, como explico en esta otra entrada.
En principio en ese override de la plantilla vamos utilizar del content la view de:
- category
- categories
En ella copio los fichero:
- default.php y default_items.php en directorio categories poniendo los ficheros colaborador.php y colaborador_items.php
- default.php, default_articles.php y default_children.php en directorio category poniendo el nombre los ficheros colaborador.php , colaborador_articles.php y colaborador_children.php.
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.
El mundo de las plantillas en Joomla es impresionante, las plantillas son las encargadas de mostrar algo de una forma u otra. En Joomla tiene muy bien separado la parte visual de la operativa, tanto en parte front-end como en la administrativa, así es que podemos utilizar plantillas para la parte administrativa y front-end.
Saber que tiene mas importancia en nuestra web, si la plantilla o el componente, lleva años debatiendose entre cafes de desarrolladores, un ejemplo claro es esté debate abierto en Podcast de Mastermind Joomla:¿ Quién pinta en Joomla ?
:-) buenisímo
Hay un sinfín de sitios para descargar plantilla e incluso frameworks que son extensiones que nos confeccionan la plantilla de una forma más interactiva.
Algunos proveedores de plantillas y creadores frameworks:
- Theme de ThemeForest
- RocketTheme
- Joomlart
- Gantry framework
- Helix Ultimate de Joomshaper
- Wright v3 de Joomlashack
- JA T3 de joomlart
- Warp7 de Yootheme
- Meet Gavern de Gavick
Yo personalmente los frameworks de plantillas los descarto, ya que generan código innecesario y hacen la web a veces muy pesadas.
Estos seguro ya os paso alguna vez:
Te pones a buscar plantillas o framework y encuentras alguna interensante y que te gusta, luego la instalas, te pone hacer cambios y pruebas, pero al poco o mucho tiempo te das cuenta que no es exactamente lo que buscas y da mucho trabajo cambiar las cosas, la descartas.
La rueda vuelve a empezar. vuelves a buscar plantilla para ese proyecto web.
Nosotros ya dejamos esa rueda, por ello optamos por modificar plantillas básica y sencillas , que suelen ser la menos complejas de añadir o quitar funcionalidades, de realizar cambios para adaptarlas a nuestras necesidades.
Modificar una plantilla de Joomla
Modificar una plantilla Joomla suele ser una tarea bastante sencilla. Lo primero que debemos hacer es conocer a fondo todas las posibilidades que nos da esa plantilla, opciones y configuraciones, si estas no llegan entonces con un poco de conocimiento php, html y css, nos ponemos a cambiarla y asi la ponemos a nuestro gusto.
Si te va introducir en cambiar plantillas te recomiendo principalmente la lectura de los documentos oficiales de Joomla:
- Magazine Joomla - Como modificar una plantilla HTML/CSS
- Joomla Documentación - Modificar una plantilla de Joomla !
Muchas veces nos puede hacer falta cambiar el formulario de contacto del componente que no facilita Joomla ( Contact ).
Recordar que es hacer overwrite de este componente en nuestra plantilla, los ficheros que encontramos Nuestrotemplate/html/com_contact/contact/default_form.php
Crear una vista distinta de un articulo en Joomla.
Simplemente creado la vista en nuestra plantilla en html/com_content/article/nuevavista.php
Y seleccionando en la opciones del articulo :
Presentacion alternativa -> Seleccionamos la nueva vista creada.
Protostar es una de las plantillas que trae por defecto Joomla 3.x , esta plantilla permite configurar en parte administrador varias cosas:
- Ancho fijo o fluido (Fluid Layout): El ancho predeterminado (contenedor) de la plantilla protostar está configurado para 960 px, esta se puede cambiar, en hay post de foro de joomla donde explican como hacerlo paso a paso.(link foro joomla)
- Permite añadir Logo , texto o ambos en cabecera.
Aunque se nos hace corto esta modificacion por ello empezamos a poder copiar y modificar nuestra plantilla protostar.
Empezamos a modificar nuestra plantilla protostar
Lo ideal inicialmente antes de empezar a cambiar nuestra plantilla protostar es realizar copia, creando asi vuestra plantilla para poder realizar todos los cambios sin miedo y evitando problemas, como que actualices y te cambie esos cambios que hiciste, dale un vistazo este otro post donde explico como copiar plantillas de Joomla.
Una vez copiada nuestra plantilla podemos entra a modificar sin miendo.
Menu horizontal
Para poner un menu horizontal en la plantilla protostar tenemos que poner el modulo del menu en la posicion 1 y ademas :
En el Módulo Menú debemos ir a la pestaña avanzado y modificar los valores de las cajas
Sufijo de clase CSS : nav-pills
Sufijo de clase CSS del Modulo: _menu
Cuando creamos nuestras plantillas lo que pretendemos es poder cambiar de plantilla sin tocar nada más. por eso necesitamos hacer plantillas para Joomla 3.X con unas posiciones estándares, basándonos en las plantillas que trae por defecto Joomla 3.X y sus posiciones.
Explicación basica de lo que son plantillas (temas) de Joomla
Las posiciones de las plantillas en Joomla son donde van los módulos y el contenido de nuestra web, donde se definen estas posiciones son la propia plantilla, hasta el momento, JOOMLA no tiene un estándar para nombra esas posiciones, por lo que cada creador de plantillas puede nombrar está posiciones como quiere.
Lo que pretendemos con esté articulo es crear un estándar de posiciones para nosotros, para todas las plantillas que creemos para Joomla 3.*, basándonos en las posiciones que utiliza alguna de las plantillas que trae por defecto Joomla.
Con esto conseguimos que si en algún momento queremos probar el funcionamiento de esta plantillas estándares podemos hacerlo sin cambiar las posiciones en cada modulo.
Ver cuales son las posiciones que tienes creado en tu plantilla.
La opción de ver forma interactiva las posiciones de una plantilla , una previsualización. Joomla por defecto lo trae desactivado, se comenta los foros oficiales que es por seguridad. Si quieres activar la previsualización en el "Gestor Plantilla" en opciones puedes activarlo. Recuerda desactivarlo después de utilizarlo.
Un poco mas afondo sobre plantillas.
Las plantillas son realmente los que manda a la hora mostrar y visualizar nuestra web, las posiciones de tu plantilla principalmente se utilizan en los módulos, ya que en estos es donde se les indica en que posición se va mostrar cada uno ellos.
Hay unas posición que son fijas para todas las plantilla que son component y message.
El código que se utiliza en index.php de tu plantilla para mostrarlas son:
<jdoc:include type="message" /><jdoc:include type="component" />
Esta posiciones son fijas, ya que no se pueden definir por el usuario.
Estilos de posiciones de módulos
Los estilos de posiciones de módulos se define normalmente index.php, pero se puede cambiar por el usuario, estos estilos son los que puede hacer que vista de un modulo en una misma posición con un estilo distinto , se vea distinto.
Si existe un estándar predeterminado por Joomla, los cuales es interesante conocer y saber su utilidad.
No encuentro información detallada de estos estilos por lo que poco a poco iré ampliando.
Las plantillas que trae joomla por defecto la beez5 y la protostar tiene varios tipos estilos de posiciones, unas son ya estándar de Joomla y otras no.
TIPOS DE POSICIONES ESTANDAR DE JOOMLA
- none ( Que no pone titulo modulo)
- xhtml (En la opción de modulos tenemos marcado mostrar titulo, pues lo muestra)
- table ( Crea una tabla html con el contenido del modulo)
En las plantillas que trae joomla hay varios tipos más, que ya son particulares de ellas. TIPOS DE POSICIONES DE LAS PLANTILLAS POR DEFECTO DE JOOMLA
BEEZ5
- style beezDivision
- sytle beezTabs
PROTOSTAR
- well
Estos estilos y algunos más de sistema podremos seleccionarlos en el "Gestor de Módulos", pero no es necesario, ya que la plantilla tendrá uno por defecto para esa posición que se define en el fichero index.php de la plantilla.
A los creadores de plantillas, normalmente definen los suyos en la plantilla en el fichero /template/nombretemplate/html/modules.php , donde crean una función para cada estilo llamada modCrome_NOMBRESTYLE
En este link de la web documentación oficial de joomla puedes ver más información sobre esto.