Theming jQuery Mobile the easy way with ThemeRoller

November 23rd, 2011

If you’re considering using jQuery Mobile for the interface of your next mobile project, but are unsure as to the flexibility and customization of the interface, well fear not, ThemeRoller is here to ease your workflow. jQuery’s quick and easy answer to interface customization, this built-in tool offers a rather surprising level of customization from a purely CSS standpoint. This option is going to be preferable if you’re already content with the overall look of jQuery Mobile, but want a slightly more personal touch, but don’t have the time to put into a fully custom user interface.

But enough about the laurels of this customization tool, let’s have a look at it:

When you first load the tool, you’ll have a full set of screens with the default styling, and several “swatches” to work with as well.
One of the benefits of these swatch tabs, is that you can create multiple instances of your design concepts and view them side by side to get a better idea of what theme you’d rather go with. That being said, let’s see what this tool can do, and start applying some changes.

Here we see the primary swatch with some styles applied. Basically what ThemeRoller gives you is a raw CSS sheet that you can edit with a nice, easy to use GUI. Everything from font and background colours, to link styles and how round you want the corners on your elements is covered here.

To get this out of the tool and in reality, all you have to do is hit the “Download Theme” link, and it will compile a .zip of all the necessary theme assets you need to get your custom look implemented into your jQuery Mobile project. From there, you simply extract the .zip into the “themes” folder included in your mobile project, and follow the instructions given to you in the download dialogue about referencing it in the head of your structure file.