JQueryMobile and Themeroller - do I need to update themes when updating jQueryMobile?

Question

I am using jQueryMobile 1.1-rc1 and my pageloading indicator does not display correctly.

I originally made my theme when the themeroller first appeared, and everything went perfectly thanks to the latest jQM updates to the very last.

Now the loading icon does not rotate and is no longer centered in the bubble.

Do themes need to be re-updated in themeroller when updating? I do not see the possibility of choosing the target version in themeroller.

Answer 1

I looked at this again, and the answer is that ThemeRoller for jQueryMobile is only compatible with jQM 1.0.x.

Todd Parker The answer to the question here is in the jQueryMobile tracker.

Tyler Benzinger Answered the question here in the Tracker section of the topic.

It seems we will have to wait until Theme Roller supports the themes of version 1.1.

Update: Solution

In your theme.css comment or delete the .ui-icon-loading section and paste the following (from 1.1-rc1 css)

/* loading screen */ .ui-loading .ui-loader { display: block; } .ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; } .ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; } .ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; } .ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; } .ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; } .ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radiu$ .ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; } .ui-loader-textonly { padding: 15px; margin-left: -115px; } .ui-loader-textonly .ui-icon { display: none; } .ui-loader-fakefix { position: absolute; } /* loading icon */ .ui-icon-loading { background: url(images/ajax-loader.gif); background-size: 46px 46px; } 

Make sure you have a new ajax-loader.gif file in the theme image folder.

Answer 2

I noticed that the old file name was ajax-loader.png. I think this is ajax-loader.gif now, so you can double check this.

Answer 3

The last few platform updates have changed CSS a lot, and this will continue for version 1.1. When you upgrade to a new version of the JS file, you must also repackage your theme from Themeroller.

In the latest update, they slightly changed the CSS structure for fixed headers and footers, transitions, and some other things (for example, the download update was updated). The latest update also gave the boot message more options, so the HTML structure probably changed and the old CSS is not quite right compared to the new JS.

To verify this, you can reference the standard current version of CSS and see if the download message is displayed correctly.