08/04/2014

El ThemeRoller de SaltOS

ThemeRoller

Josep Sanz

Hace tiempo que uso JQuery-UI para dar aspecto gráfico a mis aplicaciones. Desde los inicios, SaltOS ha incorporado los 24 temas definidos en el ThemeRoller.

Estos temas son prácticos y combinan bien los colores, pero en SaltOS detecté un problema: JQuery-UI define los estilos para las clases Header, Content, Default, Hover, Active, Highlight y Error (entre otros) y al hacer un listado o un menú como en SaltOS, se usan varias clases para hacer las filas pares e impares, para hacer el efecto hover (que yo uso el highlight en lugar de la propia clase hover pues es más visual) o incluso el background de la propia página. Esto hace que algunos temas sean "difíciles" de ver y sólo se acaben usando algunos de los 24 temas.

Este problema no es un problema asociado a JQuery-UI, sino a como SaltOS usa las combinaciones de colores (y hay que ser realista, pues hacer una aplicación con entorno gráfico no es tarea fácil).

La solución ha sido usar un tema como base (Redmond) y programar algo que permita colorizar ese tema (que es con tendencias azules) usando otros colores base y así tener un único tema que sea "bonito" de ver y que el usuario pueda permutar entre varias gamas de colores.

Para ello, investigué como la aplicación ThemeRoller genera los temas (CSS + imágenes) y programé un equivalente del ThemeRoller en SaltOS para colorizar los temas de forma que ahora SaltOS dispone de 18 temas basados en permutaciones de colores del tema Redmond (existen 9 temas sobre blanco y otros 9 temas sobre negro).

Quien quiera ver como funciona el themeRoller de SaltOS, que visite las demos y el que quiera ver como esta programado, que mire en los ficheros themeroller.php y themeroller.xml del código fuente.


Líneas de XML
60,895
Líneas de PHP
18,637
Líneas de JS
11,611
Líneas de XSLT
2,498
Líneas de CSV
1,919
Líneas de CSS
577