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

Solution 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

Solution 2

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.

Solution 3

There is a huge misconception about using your own styles with JQM that I have found everywhere, including SO. The trick to using your own CSS with JQM is in how you write your own CSS. In general, you must first specify the element you wish to overide the JQM CSS with an id, and then attach the JQM class to that ID. For example, to remove the JQM standard link border CSS from an image link, where #img_button_1 is the ID given to the anchor parent of the image, you would code your CSS like so...

The HTML...

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
   href="http://www.google.com" target="_blank">
    <img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>

Your override CSS...

#img_button_1 .ui-btn-inner { border: 0 }

I answered this before with some working examples that can be found here

Jquery Mobile - Using image as link - Blue line below image

You can use the same technique for resolving all your JQM CSS conflicts. Now you can reconsider using JQM to achieve your desired results knowing how simple it is to resolve these conflicts by using CSS specicivity in your own CSS. Hope this helps!

Comments

[Vitaly Sazanovich]

I tried using the class approach but even though my css was loaded after jquery mobile css it was overriden. Using id fixed that. Thanks.