jquery mobile custom css? [closed]

Question

hi I just finished designing a mobile web app and now want to start the development process. I was reading that it is very hard to use custom css with JQuery Mobile and therefore the design I have just completed cannot be used with such a framework.

Is there a solution or maybe another framework which supports the features of JQM but at the same time allows the developer the freedom to use his own design.

Answer 1

I dont know were you were reading that its hard to use custom css with jquery mobile. Its is designed to be easly customised. Check http://jquerymobile.com/themeroller/

If you are interested in customised content on your site check this part of documentation: http://jquerymobile.com/demos/1.0.1/docs/content/index.html - for example layout grids can help you with your individual design

Other framework I can suggest is yui http://yuilibrary.com/ (for example css grid part in documentation can also help you with your custom design)

Good luck!

Answer 2

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!