jQuery Mobile – Show all header full text

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

jQuery Mobile – Create a custom theme

jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename.

.ui-btn-up-c to .ui-btn-up-z, .ui-body-c to .ui-body-z

and so on.

3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For example:

<div data-role="page" data-theme="z">

Source: http://eisabainyo.net/

jQuery Mobile – Set background color of a page

This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.

.ui-page {
background: #eee;
}