Question
· Jan 14, 2016

Override JQuery Mobile Theme

Is it possible to override JQuery Mobile elements´styles (buttons, lists, font size, color, etc) or an existing  theme with a separate custom css file?

I am really interested in an official or elegant way to do it.

Thanks.

Discussion (2)0
Log in or sign up to continue

Sure. The best way to achieve this is to build your own custom theme using the jQM ThemeRoller application:

https://themeroller.jquerymobile.com

Add a swatch with a custom letter (e.g. "f") and define your theme by setting colors, fonts and so on for all elements. When you are done you can download the theme zip file and extract it in the directory where you serve your static files from.

Include your CSS file, instead of the default jQM CSS file and finally just set the defaultTheme of your jQMPageManager to the swatch you designed (e.g. "f") and you are done.