Override Jquery Mobile CSS

Question

Is it possible to override the already styled JQuery Mobile elements (buttons, lists etc) with a separate custom css file?

If so how would I go about referencing the elements.

Thanks

Answer 1

Yes you can override all the css styles already defined in the jQuery mobile, but take a look on how to do it in a good way. Theming overview in jQuery documentation has the information referred to your question. In particular:

Overriding themes

The themes are meant as a solid starting point, but are meant to be customized to add the custom design elements that make your site or app unique. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the head, placed after the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.

Answer 2

I don't know of an official, elegant way to do it, but I look in non-min css file to find classes, then add things like this to a .css file included after the jquery mobile one:

.ui-header .ui-title {margin-right:20px;margin-left:20px;}

.ui-footer .ui-title {margin-right:20px;margin-left:20px;white-space:normal;}

Also, firebug and dev. tools (chrome) are your friend - examine elements and their styles.

Libby