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

Answer 1

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