Domingo, 05 Mayo 2013 22:02

Less en Joomla 3

Escrito por 
CMS:  Joomla! |  Versión:  3.x |  Nivel de dificultad:  Medio |  Tiempo estimado de lectura:  10 minutos


jooml3_lessJoomla 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

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. 

compilacion_less_joomla

 

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

codigodropdown

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 

simpleless_

Al aplicar el nuevo archivo template.css generado obtendremos un resultado como el siguiente en la plantilal protostar:

finaldropdown

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop