Custom jQuery Mobile Themes

Anthony James —  July 7, 2011

Want to stand out from the crowd? Then, you might be wondering how to create your own custom jQuery Mobile theme. Well, this screencast will teach you how to do exactly that. You will learn how to edit a default jQuery Mobile theme and add your css and theme changes in order to customize it to your needs.

Download Source Working Example


Anthony James

Posts Twitter Facebook

Anthony is a Web Software Developer & Linux Systems Engineer. With 11 years of experience in these fields. He is also the founder and main contributor at Pinehead.tv. He is passionate about passing on his technical knowledge through training and educating others.

22 responses to Custom jQuery Mobile Themes

  1. What if there is a new version? Do i need to download the new css file and redo my modifications?

    • Vedran is right, with the point changes you will need to update the css file. In the beta and alpha stages point releases come faster than non point releases.

  2. Hi anthony Thanks for the tutorial…..Could you please clear me onething…Can we Apply themes concept without html5…Because i have developed my screens using Xhtml and css2. If i want to apply themes for my mobile application using xhtml1.0 what will be the best approach ?

    Hope u understood…..
    Thanks in advance

    • Currently we are only editing the current themes that jquery mobile provides. You aren’t taking your themes and porting them into the framework. So you’ll have ot make the custom changes to what is already there. Which includes the css3 and html5. Keep in mind, all modern phones have webkit which supports html5 and css3.

  3. @JackPoint Yes, you do need to download the new css file, with every new version, a new css file is released

    And don’t just change the existing themes. Copy an existing one and rename all “a” to “f” or “n” etc.

  4. Hi Anthony,

    Found your site while looking for more info on jquery mobile. Thanks for the videos!

    Quick couple of questions if that’s ok:

    1) If I created my own custom themes, along the lines of what Vedran said, could I not simply create a new/separate CSS file and include it in the header that had my custom theme CSS?

    This way when jquerymobile gets updated, and I replace/update the css then mine won’t be affected. Is that what you would do?

    I realize if IDs or Classes changed then my own CSS could become ineffective but just trying to think of best practice here.

    2) Slightly off-topic but what about image resizing. Would the require a php(?) script or should I just use small-ish images? I would think a resizing script of some sort would be best but I’m not sure which and I’m not a programmer (but I know html/css).

    Thanks buddy

    Scott

  5. You can most certainly place css inside of the header and reference that css to style your webapp. The custom theme part is to make use of the data-theme option. Makes it easier to keep the main styles from jquery mobile but change colors.

    No need to resize the image with php, just using css to size the image would be fine as long as it’s done proportional.

    Best practice will be how your really suppose to implement new themes. You can predict jquery will eventually come out with a new theme rollers to apply your own data-them. However, until then, then is just another way to do it.

    Let me know if I have answered your questions or if I could help more!.
    Thanks,

  6. Hi Anthony,

    Thanks for the replies.

    In terms of CSS in the header, I was thinking more along the lines of how premium WP themes use CSS, like using a custom.css and link to that external stylesheet. That should cut down on load times, right?

    Also, while trying to learn more about jquerymobile, I’m still thinking that creating a basic html/css site would be best and keep most styling elements CSS-controlled. What I like about jquerymobile (from my 1/2 day of learning about it) is that the html5 seems to be slightly less intensive than traditional html/css and the fact you can use the CDNs is cool. But, when I went to jquerymobile.com in my HTC Android, it loaded quite slowly (maybe its my internet connection?) compared to an html mobile template I bought that loads lightening quick because it’s simple, not reliant on javascript (for the most part) etc.

    Thanks for the info on images. Would I need to consider media queries for images or should I just keep the images relatively small, despite not having the expand/contract feature depending on the orientation of the smart phone handset?

    Anyway, my inclination is toward simple html/css and considering jquerymobile more when it’s out of Beta and I learn more about it.

    Thoughts?

    Thanks again mate

    Scott

    • Well it really depends on which parts your wanting to customize. For example, jquery dynamically adds css classes based off what part your calling. So you have data-role=”navbar” which calls pre-build classes after run time. So to affect native theme setup you currently have to edit the themes in the core css files. Now after beta you can bet the will make it easier to do this. However the team is working more on functionality. BUT like i’ve shown in previous tutorials (watch them if you havn’t) you can add custom css styles in the header. Go check those out and let me know if you have any more questions.

  7. Ya, good one, I gonna use this…
    Actually, though you have used the PHP extension, I don’t like PHP except I use JSP, HTML5, JS. So, after following the code I have just converted it to HTML5… Thanx 4 your share…

  8. Thanks. The tutorial looked interesting but I could not read the text. Have you considered using a black background with white text (larger font)?

  9. Which theme jQuery Mobile takes when no theme is defined?

  10. Great stuff… thanks for the tutorials. My question revolves around changing the button style of the embedded navbar within the header div.

    Basically I would like to create a flat “non-button” look. Currently all the buttons stretch to fit 100% of the viewport (so two buttons would be 50% each taking up the entire header).

    I’m going for more of a standard looking toolbar type of feel such as you would see on Notepad++ tool bar.

    Any suggestion would be greatly appreciated… Thanks!

  11. I’m trying to create my own theme but can’t find the place to change the colour of the button up background. All the standard themes have this as a blue colour.
    I can change everything else but this one thing. When the button is released it always goes blue just before the page transition.
    Can you point me to where please?

  12. Thank you for your tutorials, there really helpful for me, i see i have a lot to learn… now i wish i learned javascript more then PHP lol

    • JavaScript and PHP go together. One is a client side language and one is a server side language. What type of screencasts would be helpful to help you learn?

  13. barry sahagian June 27, 2012 at 10:54 am

    http://tuts.pinehead.tv/jqmobile/custom_themes/

    Anthony,

    Why does the text in this example look blurred with white outline.
    I have seen this with my own work and am struggling with it
    the text gets wierd on the backgrounds either color or image??

    barry

  14. Hey Anthony,
    Great tutorial, thank you! I am trying to put together a list of resources about customizing jQuery Mobile Themes and this is definitely a good one. There is this other article that covers advanced customization of the jQuery Mobile buttons:

    http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

    Cheers,
    -R

Trackbacks and Pingbacks:

  1. Best Jquery Mobile TutorialDesign Freebies - January 31, 2012

    [...] 44. Custom jQueryMobile Themes [...]

  2. 30 Best jQuery Mobile Tutorials - MegaTeacher | Let's start learning MegaTeacher | Let's start learning - May 9, 2012

    [...] 27. Custom jQueryMobile Themes [...]