Ask HN: How do you stylize jQuery Mobile? | Hacker News Reader

Ask HN: How do you stylize jQuery Mobile?

10 pointsrfnslyr4 comments

Recently got a job as a front end developer at a big bank. I'm in charge of the UI. We're using jQuery Mobile. I'm a bit in over my head as I have to make this work on over 17 different phones flawlessly. I'm FUCKED.

I need a page that has all the assets of jQuery mobile so when I'm skinning, all I have to do is look at this one page.

Does anyone know where to find one?

What is the proper process when skinning jQuery Mobile?

It never feels right and it feels very hacky skinning it. What I do is create a new stylesheet, view whatever I want to change in Chrome/inspector, then override those classes in that new style sheet. A lot of things tend to break and I have to use a lot of special classes to fix them up.

What is your process?

I had to do this recently, and rather than trying to remove styling from one of the built-in themes, I found it was easier to define my own (by picking any theme name but 'a', 'b', or 'c'), like this:

    <div data-role="page" data-theme="n">
       ...
    </div>

This will retain all the layout styles, but give you a fresh start on the rest, so you aren't trying to undo drop shadows, circular buttons, etc.

You'll need to include `data-theme="n"` on the divs with header, footer, and panel roles also.

My email is in my profile if you'd like to ask any other questions; I'd be happy to help.

The best way to stylize jQuery Mobile is to create a new theme through modifying an existing one - I'd recommend modifying an existing one because of the cross browser testing/developments they have already done to the CSS.

Have you taken a look at their ThemeRoller?

http://jquerymobile.com/themeroller/index.php

Doesn't begin to scratch the surface of the editing I've been doing. This just changes a few colours and CSS properties. However it has a full page of assets I can use, so that solves one tiny problem of mine haha. Thanks.

Reply on news.ycombinator.com