jQuery Mobile comes with a default theme which is really well designed, however, sooner or later you're going to have to modify it if you want to give your design its own unique look.
The default theme is also more cautious in its approach given the wide range of devices it needs to support. You can get a lot more creative by modifying your design to look better on your most common devices while allowing the experience to degrade to the default for those on less capable ones.
If your requirements are limited to customizing the theme as per your own color pallette the jQuery Mobile themeroller tool does a really good job.
However for more advanced designs, you're going to have to modify the CSS to get the look you require.
jQuery Mobile allows you to style almost any component using the data-theme attribute with a swatch value. The swatch values go from 'a' through 'z'.
Any swatch defines the theme attributes at three broad levels.
Which of these classes is applied to your component, depends on the type of component, for example, any list item which is a link is styled as a button.
Now that you know the 3 basic classes, you can easily modify the colors by modifying the css of the relevant class for a particular swatch and then apply that swatch to your component using the data-theme attribute.
.ui-bar-f {
}
.ui-body-f {
}
.ui-btn-up-f {
}
.ui-btn-hover-f {
}
.ui-btn-down-f {
}
For example to change the color of a header for the swatch 'f', you just specify the color values in the class ui-bar-f
To start with, you would probably want to customize the default theme to add a larger selection of color swatches. This allows you to meet any branding guidelines set by a client or simply allow more colors in your pallette which are not included in the default swatches.
When defining a new swatch, it is best to keep the colors for the bars, backgrounds and buttons consistent and then achieve contrast by mixing different swatches amongst the components on a page. The default swatches use dual colored CSS gradients to fill backgrounds, you are ofcourse free to use a single flat color or multiple stops.
Considering that you can have 26 different swatches in your pallette and three types of elements, you can have 2,541,865,828,329 that's over 2.5 trillion, differently styled pages, even if you styled all components of the same type on a page with the same swatch.
Varying colors for elements of the same type within a page would give you even greater variety.
If your customization includes simple color combinations and design similar to what is part of the default swatches you can use the official jQuery Mobile theme roller or our own theme editor for jQuery Mobile swatches
Unlike the jQuery UI themes, jQuery Mobile doesn't have patterns as part of its theme by default, most likely to keep the total download size and number of requests small.
Multiple requests for resources such as images is a valid concern for mobile websites, however if your app is simple and limited to a few pages, you can get away with overlaying your backgrounds with patterns to give them more character.
This can be either using small png files or using CSS3 patterns which render fine on current or upcoming versions of mobile webkit, as long as you include the old webkit format (-webkit-gradient) as a fallback for older browsers.
Because of the ability of CSS gradients to support multiple color stops, you can also use it to specify non-geometric effects such as applying a gloss.
For eg; try our generator below to view CSS gradients for a glossy effect.
This is similar to the blue glossy button used in the previous page and the effect is used extensively by the Glossify theme.
The below generator currently works best with bright saturated colors.
By default the content expands to fill the available width. This is not an issue for mobile devices where the width is not that much to begin with, but if your site is going to be accessed by desktop browsers as well, controls such as buttons can seem stretched out.
You can use the standard approach of using media queries to target different resolutions and adjust widths and style for controls accordingly. If however you do not wish to take the media queries route and would simply like your controls to look similar in a non stretched out way, you can make your design more responsive by specifying a max-width.
The simplest way to achieve this, is to create a new class with a max-width attribute and left and right margins set to auto in css, and then apply this class to your div with data-role="content"
.ui-width-640 {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
...
<div data-role="content" class="ui-width-640">
...
</div>
If you do use this approach, you will however need to inset any lists that you have on the page.
Adding webfonts to your pages would result in the extra request to retrieve them and add size to the overall download size, however, they could be a preferable option in cases where you would have to fallback to images of the text.
Due to the way jQuery Mobile loads pages using AJAX, unless you specifically turn AJAX loading off, the request for the webfont would be made only for the first page; all subsequent pages would in most cases load just as quickly as they would've without the fonts.
The previous example uses the 'Delius Swash Caps' font from Google Webfonts for the text in the buttons.
Webfonts are not fully supported by many of the older mobile browsers, with some supporting only SVG fonts or nothing at all. It is therefore important that you define a font stack with appropriate fonts to fallback on if the webfont cannot be loaded
Fonts from some of the more popular sources such as Google's Webfonts and Typekit support the latest versions of both iOS Safari(4.2+) as well as Android's browser(2.2+)
When enhancing the default design, you need to keep in mind the total size of your site or app and going overboard would simply result in a slow or broken experience for your users.
Considering the wide difference in browser capabilities, you would need to ensure that there are meaningful fallbacks, especially for enhancements such as css gradients which do not render correctly even in IE9, unless used with proprietory extensions, and support on older versions of mobile webkit is limited to the -webkit-gradient css attribute.
Also, the most widely used mobile browser is Opera, and you need to ensure that features enhanced primarily for iOS and Android degrade gracefully when not supported by Opera Mobile