Joomla 3 incluye el uso de herramientas para desarrolladores, entre las que destacan , bootstrap, icomoon y less.
En este artículo veremos el uso de less, que es una característica que incluye la plantilla protostar, realizaremos algunas modificaciones, primero utilizando la configuración de la plantilla, pero luego utilizando los archivos Less que nos brindan mayor flexibilidad para los cambios visuales de la plantilla.
Generalidades
Less es una propuesta avanzada de CSS, es decir hace extensivo el estandard CSS a través de características como definición de variables, operaciones aritméticas, funciones, etc , haciendo que CSS se parezca a un lenguaje de programación.
Less y Joomla
Joomla 3, incluye plantillas que hacen uso de archivos less, por ejemplo la plantilla protostar tiene archivos less en la siguiente ruta : /templates/protostar/less/
Sin embargo estos archivos no se utilizan directamente, por temas de optimización y compatibilidad, y es necesario pasar los archivos de LESS a archivos CSS a través de un proceso de compilación.
Modificando y Compilando Less
Podemos modificar varios aspectos de la plantilla haciendo uso de los archivos LESS, específicamente el archivo /templates/protostar/less/variables.less que es el que tiene, a través de variables, los diferentes colores para cada parte de la plantilla, por ejemplo: para el fondo del dropdown de los íconos de imprimir y mail de los artículos se utiliza la variable : dropdownBackground, lo cambiamos a blue, tal como se muestra en la imagen adjunta
Luego que realizamos las modificaciones, será necesario compilar el archivo, podemos usar un servicio en línea como lesstocss.com, Sin embargo debido a que existen dependencias entre los archivos, es mejor usar una aplicación de escritorio como Simpless
Al aplicar el nuevo archivo template.css generado obtendremos un resultado como el siguiente en la plantilal protostar:
En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.