Menu
How do I create a jQueryMobile theme?
Is it overriding the CSS the best way?
931
jQuery Mobile provides two different style themes, "a" and "b" - each with different colors for buttons, bars, content blocks, and so on. To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter: <div data-role="page" data-theme="a|b"> Value. Description.
It isn't just for mobile, it's 'mobile-first', NOT 'mobile-only' so it can be used as a base for responsive web design. All those great touch-friendly form inputs and widgets are fully themeable and work great no matter what the device (mobile or desktop).
jQuery Mobile, however, is a full framework. It's intended to be your starting point for a mobile site. It requires jQuery and makes use of features of both jQuery and jQueryUI to provide both UI components and API features for building mobile-friendly sites.
The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions.
The best method for creating a theme is actually modifying the existing one. Just like Jquery Mobile have done with their "Valenica" Theme. Use the standard css as a starting point / reference
http://code.jquery.com/mobile/latest/jquery.mobile.css
Often the best way to work out which elements need the styling tweaks is to inspect them via Firebug
Its also worth noting, its not a great idea to try and create a theme from scratch, as a large part of what makes jquery mobile so great is the cross browser testing and developments they have already made to the css.
Update:
In the near future there will be a jquery mobile theme roller, you can track its development at github.
https://github.com/jquery/jquery-mobile
Update 2
The theme roller is ready!
http://jquerymobile.com/themeroller/
177
Just discovered a neat tool for creating prototypes which includes its own theme-maker/roller. Worth checking out! More for the themes than the prototyping. At least until the official themeroller comes out. http://www.mobjectify.com
Allows you to easily add extra JqueryMobile themes and see it live.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
