jQuery Mobile Data Themes

The jQuery Mobile framework is still relatively new, yet in an attempt to stay current we have been learning how to best implement the jQuery HTML5 platform to build stand-alone touch-enabled mobile websites.  In previous posts I’ve illustrated the coding structure and files needed to create a mobile website, and in this post I wanted to provide some ideas on how to best edit the styling.

If you’re completely new to jQuery Mobile a good place to start is at the main jQuery Mobile website:
https://jquerymobile.com/

The first thing to consider is whether you want your stylesheet and javascript files linked to locally (part of your file structure) or remotely.  The advantage of linking locally is that this will allow you to edit existing styles or scripts which is of course what I’m talking about today.

As you get into the design of your site you will see the query.mobile-1.0a3.min.css stylesheet which provides 5 default data themes with corresponding color options (A, B, C, D, E).

A – Black background with white foreground. This is the default.
B – Blue background with white foreground.
C – Light gray background with a black foreground.
C – Dark gray background with black foreground.
E – Orange background with black foreground.

One option you might want to consider for creating a custom css file is the jQuery Mobile’s “ThemeRoller” at https://jquerymobile.com/themeroller/ The other option is to edit one of the existing data themes, which is what we do.  Of the data themes, the one we use the most often is “B”. So what we do is copy the hex values from the css file for the various parts (bar, body, button) which we’ve illustrated following:

BAR:

#456f9a – border
#5e87b0 – background
#fff – text
#254f7a – text-shadow
#81a8ce, #5e87b0 – moz-linear-gradient
#81a8ce, #5e87b0 – background webkit-gradient
#81a8ce, #5e87b0 – ms-filter
#7cc4e7 – link

BODY:

#c6c6c6 – border
#ccc – background
#333 – text
#fff – text-shadow
#e6e6e6, #ccc – moz-linear-gradient
#e6e6e6, #ccc – background webkit-gradient
#e6e6e6, #cccccc – ms-filter
#333 – link
#2489ce – link
BUTTON:

(button up)

#145072 – border
#2567ab – background
#fff – color
#145072 – text-shadow
#4e89c5, #2567ab – moz-linear-gradient
#5f9cc5, #396b9e – background webkit-gradient
#4e89c5, #2567ab – ms-filter
#fff – text

(button hover)

#00516e – border
#4b88b6 – background
#fff – color
#014d68 – text-shadow
#72b0d4, #4b88b6 – moz-linear-gradient
#72b0d4, #4b88b6 – background webkit-gradient
#72b0d4, #4b88b6 – ms-filter
#fff – text

(button down)

#225377 – border
#4e89c5 – background
#fff – color
#225377 – text-shadow
#396b9e, #4e89c5 – moz-linear-gradient
#396b9e, #4e89c5 – background webkit-gradient
#396b9e, #4e89c5 – ms-filter
#fff – text

(button active)

#155678 – border
#4596ce – background
#fff – color
#145072 – text-shadow
#85bae4, #5393c5 – moz-linear-gradient
#85bae4, #5393c5 – background webkit-gradient
#85bae4, #5393c5 – ms-filter
#fff – text

Once we’ve acquired the hex values we will then create a visual chart and group the values by dark to light.  This allows us to visually estimate how our new values will look in comparison to the existing values.  With a bit of trial and error the end result will be effective.

Finally, after replacing the existing values with your own it is a good practice to delete the other not-used data themes (so remove A, C, D, E) and compress the file to ensure that it loads quickly.  Be careful though not to delete the content that follows the data themes since this is needed and universal with all data themes.