Software Archive
Read-only legacy content
17061 Discussions

Adding a Custome jQuery Mobile Theme

DynamicProgramr
Beginner
644 Views

I've been trying to figure out for hours now how to add a theme I created in jQuery Mobile's Themeroller to a new app I'm creating.  I have found only one tutorial that has an example, but it does not work.

I have successfully added Bootstrap themes.  Surely there is a way to add jQuery themes.

Thanks!

0 Kudos
5 Replies
Swati_S_Intel1
Employee
644 Views

Look at the documentation for jQuery Mobile themeroller and how to include it in the application.

Creating custom themes with ThemeRoller : http://learn.jquery.com/jquery-mobile/theme-roller/

ThemeRoller : http://themeroller.jquerymobile.com/

ThemeRoller basically creates custom css for you so that all the elements you use in your app have certain look and feel. When you use ThemeRoller css in your app, the specific style will be applied to the elements you use.

Swati 

0 Kudos
DynamicProgramr
Beginner
644 Views

Thank you Swati.  I will try that and post back here on my success!

0 Kudos
DynamicProgramr
Beginner
644 Views

I have read the tutorial from the link above.  And, I knew everything there - I've used jQuery Mobile custom themes in other apps that I did not use the XDK to create.

What I'm asking here is, is there a way to get my custom themes to 'show up' in the app design view?  For Bootstrap, I create my theme and drop the file(s) in the "themes" directory for my project, click the refresh icon, and my custom theme become an available item in the themes drop down list.  Once I've chosen my theme, all elements in the app design view reflect my custom changes.

No mater what I do, I cannot get any of my custom jQuery themes to appear in the themes drop down.  The only thing ever available is the "default" theme and "(a) light" or "(b) dark" for the swatches.  And elements that I drag onto my workspace have only the default look.

Is there a way to get the app designer to recognize my custom themes and use them?

Also, a side note: when I open index.html and make the changes to my code for my custom themes, then look at my app in the app design view, all of the default jQuery theme code is added back to the file AFTER my code - basically superseding my custom css.

0 Kudos
wynn_A_
Beginner
644 Views

Is anyone able to get this working? I too have problems getting jquery themes to appear in Xdk. I only see the default light and dark in XDk and not the theme roller custom themes

Please let me know

Thanks

0 Kudos
PaulF_IntelCorp
Employee
644 Views

App Designer only presents to you the jQuery Mobile widgets, on a custom App Designer layout system and with a unique to App Designer styling method. This is probably why things are not working as you had hoped.

You are not required to use App Designer to build your app's UI layout. If you are comfortable using jQuery Mobile (or some other framework) to build your UI by hand, that is perfectly acceptable. The XDK does not require that you use App Designer to build a mobile app.

The XDK is a tool for building Cordova (aka PhoneGap) apps. Use the same techniques here as you would with a Cordova CLI app.

0 Kudos
Reply