08/04/2014

The ThemeRoller in SaltOS

ThemeRoller

Josep Sanz

Some time ago I use JQuery-UI to do the user interfaces of my applications. From the beginning, SaltOS has incorporated the 24 themes predefined in the ThemeRoller application.

These themes are practical and the colors are well combined, but I detect a problem in SaltOS: JQuery-UI defines styles for the Header, Content, Default, Hover, Active, Highlight and Error classes (among others) and when I make a list or a menu as in SaltOS, using multiple classes to mark the odd and even rows, to program the hover effect (I use the highlight class instead of the hover class because it is more visual) or even the background of the page itself. This causes that some themes are not "pretty" to be used and only end up using some of the 24 themes.

This problem is not a problem of the JQuery-UI. The problem is how SaltOS uses the color combinations (and you have to be realistic, make an application with graphical environment is no easy task).

The solution has been to use a theme as base (Redmond) and program something that allows colorize this theme (which is blue-leaning) using other base colors and so have a unique theme that is "nice" to see and you may swap among several palettes.

To do this, I researched the ThemeRoller application to see how it generates the themes (CSS + images) and program an equivalent ThemeRoller code to colorize the SaltOS themes. Now has 18 themes based on permutations of Redmond theme colors (there are 9 white themes and 9 black themes).

Whoever wants to see the ThemeRoller integrated in SaltOS, visit the demos and whoever wants to see how is programmed, see the contents of the files themeroller.php and themeroller.xml in the source code.


XML lines
60,895
PHP lines
18,657
JS lines
11,620
XSLT lines
2,498
CSV lines
1,919
CSS lines
577