change colors and layout in mobile APEX Applications

So you just created your first mobile Application with APEX 4.2 and now wonder how to get your company colors in?

Thanks to jQuery mobile this is a pretty easy task as they provide a tool for that: the ThemeRoller.

Read a german Version of this post at click-click IT Solutions.

Carsten Czarski wrote a good posting on how to use the ThemeRoller and get the new Layout into APEX. Unfortunately it is in german, but the pictures should be pretty self-explaining.

There is just one problem you need to solve before you can start with the ThemeRoller. You have to find out, which “Swatch” (or “data-theme”) you will have to modify.

With JQM’s model you can have up to 26 swatches per Layout. Each swatch is identified by a letter from a to z and can be specified directly in the HTML Code or through a CSS class or using Javascript. And then there are some defaults…

The Layout delivered with APEX has 5 swatches in it and all of them are used :-)

The Documentation of JQM tells us that it uses “a” by default, sometimes this is overriden for sub-elements to “c”.

An easy method to find out which swatches are used is searching your application with the application builder search.

At first we search for “data-theme”  and then for  “ui-bar”. See the result in these two screenshots.

Now you got all the information you need. Either adapt all 5 Swatches with the ThemeRoller, or change the APEX Templates to use fewer Swatches…

Have fun!



  1. Damir Vadas on February 23, 2013

    Peter,

    Nice posts especially part wiith theme letters. This was not included in Carsten’s blog topic …

    Rg
    Damir