Apr 25, 2012

JQuery Mobile theme roller in action

JQuery Mobile elegantly approached customizing colors and feel of its UI by enrolling complete online solution through web app named "Theme roller".
Here is url:
http://jquerymobile.com/themeroller/

It looks great but I ran into problem.
I've created custom css, downloaded it and tried to put it as it should as an extending CSS that loads before original JQuery Mobile CSS. Hence it supposed to override existing JQM swatches A,B,C etc.
Something like this:


<link rel="stylesheet" href="themes/mycustomtheme.min.css" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />


It did not work for me. :(
So I end up with copying portions of swatches into original JQM CSS.
Open up CSS you just downloaded from theme roller and find for example swatch C witch should look like this:

/* C
------------------------------------------------------------------------------------
.ui-bar-c {
border: 1px solid #0071bc /*{c-bar-border}*/;
background: #53b9e4 /*{c-bar-background-color}*/;
Copy complete section and copy it to jquery mobile CSS  jquery.mobile-1.0.1.css under the same section.

Yes its wrong, yes I should dig out problem but for now it works.



No comments:

Post a Comment