jQuery Mobile Themes & Swatches

Posted May 4, 2011, 6:56 pm in jQuery Mobile, Mobile Themes

JQM Includes 5 Themes

As of JQM alpha release 4.1, there are 5 themes included with the library. Currently there is no ThemeRoller for JQM, so in order to create additional themes you have to edit the jQuery Mobile CSS.

The easiest way to do this is to copy all the styling from the theme that has the most similar style to what you’re trying to create and then change the letter that signifies the style.

Currently JQM uses letter notation. Theme “a”, “b”, “c”, “d”, and “e”. As of writing this article, you must use single letter annotation.

So for example, if you copy Theme “a” styles, you would have to change all of the references to a to the letter of your choice, for example, “f”.

.ui-bar-a {

would become

.ui-bar-f {

Luckily the CSS contains comments that lets you easily see the block of CSS that is for each theme, so it is easy to copy and paste. There is no easy way such as search and replace to create a new theme with a new letter, you’ll have to manually perform the change.

Additional JQM Themes

Since JQM is relatively new, there are very few custom themes out there. Here I will give you a list of the current available themes, if you have any more, leave a comment and I will update the post.

• http://www.emeraldcpu.com/zman3/jqm/mobileindextheme.php
• http://www.stabinger.us/test/jqm.html

Helpful Posts On WordPress jQuery Mobile Themes

• http://www.ifadey.com/2011/01/wordpress-theme-using-jquery-mobile/
• http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile
• jQuery Mobile – Websitez

WordPress jQuery Mobile Themes

• WP Mobile Detector contains 5 JQM Themes
• http://www.webdevcat.com/themes
• http://frobert.com/en/2011/03/30/generic-jquery-mobile-wordpress-theme/