latest version jQuery Mobile broke my custom themes - jquery-mobile

When I use the latest version of jQuery Mobile (referencing http://code.jquery.com/mobile/latest/jquery.mobile.min.js in my index.html page), my custom jQuery Mobile theme no longer works. I created a custom theme named with a swatch named "g". When I load my site, my header changes from ui-bar-g to ui-bar-a. What could be causing my custom themes to be replaced with a different swatch? Thanks.

Related

Which files to use out of the many included in JQuery mobile download

I have not been able to get an explanation of which files are needed in a JQuery Mobile Web site. The stackoverflow documentation on JQuery Mobile shows that there is one file for css and one file for js:
jquery.mobile-1.4.5.min.css
jquery.mobile-1.4.5.min.js
However, downloading the JQuery Mobile 1.4.5 package one ends up with many more. All files that have ".min" appended to the name of the asset, is a minimized version.
The standard download includes one js (the one mentioned above). That is required, as well as JQuery itself. At this date, the latest jQuery that is compatible with jQuery Mobile 1.4.5:
jquery-2.2.4.js
(correct me if that is not true)
For css files standard download includes:
jquery.mobile-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery.mobile.theme-1.4.5.css
jquery.mobile.external-png-1.4.5.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.inline-png-1.4.5.css
jquery.mobile.inline-svg-1.4.5.css
It appears to me that the first file contains all the rest. So that one can choose to include all at once with one file. The others, I guess, would be used if less code is wanted in a streamlined version of JQuery Mobile. However if one does not use jquery.mobile.css, which are needed in HTML at the top of the page?
If one uses ThemeRoller, jquery.mobile.theme.css becomes MySITE.css (whatever name was selected during the export process in ThemeRoller). If one uses a custom theme, then that theme css is needed, along with jquery.mobile.structure.css.
If one includes jquery.mobile.icons.css, does that in turn include in the external-png, external-svg, and inline-png files?
And what is "jquery.mobile-1.4.5.min.map" for and when is it needed?
That would all be good information for the documentation in stackoverflow.
I created a custom theme (mysite.css) in ThemeRoller so I include the following in HTML (in the appropriate link of script tag):
mysite.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery-2.2.4.min.js
jquery.mobile-1.4.5.js
Is that correct?

jQuery UI theme for Zurb Foundation?

I have an excellent jquery-ui based application that I'd like to give the fresh looks of Foundation. Most important part I'm missing is the support properly styled dialogs which currently have the jquery looks.
Is there anything like a foundation-styled jQuery UI theme or project setup to develop one?
My company has used http://jqueryui.com/themeroller/ to create the themes for our clients.
We had a client request a theme that matched the foundation default styling so we created it and uploaded it to out github. Below you can download the style sheets.
https://github.com/cwdgservices/jQuery-UI-Style-for-Zurb-Foundation

jQuery Mobile Default Swatches

Let me start off by saying I'm new to jQuery mobile. I've been asked to change to theme of a website and from looking at the jQuery mobile website here there is 5 default swatches that come with it. The only problem is that when I look at the theme file it only has 2 swatches, labeled A and B, but which look more like A and C. Can someone tell me where I can find the additional default swatches?
Thanks for your help.
The guys from jQuery mobile also created the classic theme for 1.4 although they don't actually support it.
You can find it here: http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css
And view the demo here: http://demos.jquerymobile.com/1.4.0/theme-classic/
jQuery Mobile 1.4 has two themes "a" and "b", unlike previous versions.
To upgrade custom themes previously created by ThemeRoller, at the page's top, click on import to upload old themes and then choose 1.4.0 from drop-down Upgrade to version list.

How can update my custom theme when I update jquery-ui?

I updated jquery and jquery-ui from versions 1.7.2 and 1.8.23 to 1.9.1 and 1.10.3, respectively. Of course, with this my custom rolled theme no longer works.
Is there a way to update my theme to work with the new version without rolling a new one from scratch?
Open the css file that came with your custom theme.
In the top of the file you will find a comment that says:
To view and modify this theme, visit [followed by a really long link to the jqueryUI theme roller].
Here is an example for the start theme.
Navigating to that link will bring you back to the Theme Roller with all your settings preloaded to match your theme.
Simply Re-roll the theme as if you just started from scratch and replace the previous CSS (and image files if necessary) with the ones you just generated.

How to add themeroller custom theme to my website?

I have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?
When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page

Resources