Geek Answers Handbook

Override jQuery Mobile CSS

Is it possible to override already created jQuery Mobile elements (buttons, lists, etc.) with a separate user css file?

If so, how can I access the elements.

thanks

+8
javascript jquery html css jquery-mobile
source share
4 answers

I don’t know the official, elegant way to do this, but I look in a non-min css file to find classes, and then add these things to the .css file that is included after 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;}

In addition, firebug and dev. tools (chrome) - your friend - study the elements and their styles.

Libby

+14
source share

Yes, you can override all CSS styles already defined in the jQuery mobile device, but see how to do it in a good way. An overview of topics in the jQuery documentation contains information relevant to your subject. In particular:

Redefinition of topics

Themes are designed as a solid starting point, but are designed to be customizable to add custom design elements that make your site or application unique. Since everything is controlled by CSS, it's easy to use the web inspector tool to determine the style properties you want to change. The set of thematic classes (global) and semantic structural classes (associated with widgets) added to the elements provide a rich set of possible selectors that will target the overriding style. We recommend adding an external style sheet to the head, placed after the structure and linking to the style sheets containing your entire redefinition style. This makes it easy to upgrade to newer versions because overrides are stored separately from the library code.

+21
source share

There is a huge misconception about using your own JQM styles that I found everywhere, including SO. The trick using native CSS with JQM is how you write your own CSS. In general, you must first specify the element that you want to override the JQM CSS with an identifier, and then attach the JQM class to this identifier. For example, to remove a standard JQM link line using an image link, where # img_button_1 is the identifier provided to the image's anchor image, you would encode your CSS like this ...

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 overriding CSS ...

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

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

JQuery Mobile - Using the image as a link - The blue line below the image

You can use the same method to resolve all JQM CSS conflicts. Now you can rethink the use of JQM to achieve your desired results, knowing how easy it is to resolve these conflicts using the CSS specification in your own CSS. Hope this helps!

+5
source share

Be sure to check the release notes for each new version.

Here is some useful information about what changes are in the css hierarchy. Of course, this usually becomes more stable with each release, but you probably need to know something.

1.4 Addition to updating CSS: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css

0
source share

More articles:


All Articles