Change color of List Divider in mobile APEX Applications

This is a quick one, if you have followed my other mobile blog posts.

When creating the mobile guide to the AOUG Conference 2013 (taking place June 17 and 18 in a historic Brewery in Vienna, Austria), i found myself creating a new theme using the themeroller, but still not getting the perfect result i wanted.

Every component got exactly the required color, except list-dividers in the Listview-Component looked a bit ugly.

Why?

Because APEX gives the list-divider the swatch “b” by default, and that just didn’t fit with my nice oracle-red-color-scheme. As there is no setting or template to change that behaviour, i had to create a dynamic action on page load of the global mobile page executing JS Code:

jQuery(".ui-li-divider").removeClass("ui-bar-b").addClass("ui-bar-d");

This one-liner simply swaps swatch “b” with “d” on the list-divider-bar. That is exactly what i wanted and does look nice:

Don’t forget to come to the AOUG conference, if you can. There will be an awesome 25 year anniversary party !

Leave a Reply

Your email address will not be published. Required fields are marked *