Today I am transforming the default jQuery mobile template into the Absolute Radio Native application which is very striking with its bold purples and unique looking design.

Luckily the actual layout does not move too far from the old default jQuery mobile. This is a good opportunity to show how you can change the style using css – without creating a whole new theme via the jQuery mobile Theme Roller website.

First Up Is the top navigation, Unlike a lot of App’s Absolute Radio have their sub navigation in tabs at the top instead of the bottom, this means adding a sub-header after the usual header that contains a navbar widget.

Now to style the sub headers navigation bar, the titles are in uppercase so we add the text-transform: uppercase attribute, make the text a little bigger then usual and add a text-shadow so they stand out. A Shadow is also added to give the appearance of an inner shadow in the navbar tabs.

/*Style the navigation buttons text */
.abs-radio .ui-navbar .ui-btn-text {
text-transform: uppercase; font-size: 14px; text-shadow: 1px 1px #000;
}
.abs-radio .ui-navbar .ui-btn-inner {
border-top-width: 0px; height: 14px !important;
}
.abs-radio .ui-navbar li .ui-btn .ui-btn-inner {
padding: 14px;
}

/*Add shadow to header and to navigation */
.abs-radio .ui-header {
border-bottom: none;
}
.abs-radio #myheader, .ui-grid-c .ui-btn-inner {
-webkit-box-shadow: -1px 1px 4px 1px #222;
-moz-box-shadow: -1px 1px 4px 1px #222;
box-shadow: -1px 1px 4px 1px #222;
}

The shadow is not needed on the active tab so we override that by adding a shadow with all parameters set to 0px to the .ui-btn-active .ui-btn-inner box-shadow attribute.

The active tab and filter are given the background color #990099, which is the vibrant purple associated with Absolute Radio and their App.

/* Override that for the active navigation link... */
.abs-radio .ui-btn-active .ui-btn-inner {
-webkit-box-shadow: 0 0px 0px 0px black;
-moz-box-shadow: 0 0px 0px 0px black;
box-shadow: 0 0px 0px 0px black;
}

/* Change the active navigation links and search filters color */
.abs-radio .ui-btn-active, .ui-listview-filter {
background-color: #990099;
border-color: #990099;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#991590), to(#66415C));
}

Next up we slimline the search filter and add some nips and tucks

/* Slimline the search filter */
.abs-radio .ui-input-search input.ui-input-text {
line-height: 18px; padding-top: 4px; padding-bottom: 4px;
}
.abs-radio .ui-listview-filter .ui-input-search {
margin: 10px 14px;
}

/* Move liists up slightly so there is no gap after navigation */
.abs-radio .ui-content .ui-listview {
margin-top: -16px; overflow: hidden;
}

There are lots of shadows in this theme and we need to add one to the thumbnails that appear in the lists .ui-li-thumb has a box-shadow element added to it and the description text has its color adjusted to match the purple of the active navbar.

/* Add a shadow to the thumbnails */
.abs-radio .ui-li-thumb {
box-shadow: 2px 0px 2px #999;
-webkit-box-shadow: 2px 0px 2px #999;
-moz-box-shadow: 2px 0px 2px #999;
}

/* Change genre text color */
.abs-radio .ui-li-desc {
color: #990099; font-weight: 800;
}

Usually the heading of a jQuery element is eclipsed and cut off after a certain amount of characters to ensure it only takes up one line, we want to change that, setting the white-space attribute to normal will do the trick. Then we mustn’t forget to adjust the padding so our newly un-eclipsed text and description fit nicely into the list element, which is also given a darker border-color.

/* Override Eclipse setting for list titles */
.abs-radio .ui-li-heading {
min-height: 2.4em; line-height: 1.2 em; white-space: normal;
}

/* Adjust padding to fit all text */
.abs-radio .ui-li .ui-btn-inner {
border-color: #666;
}
.abs-radio .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding: 2px 15px 3px 92px;
}

Finally we need to adjust the default list headers to mimic that of iPhone native Apps this includes giving the element a gradient background using the -webkit-gradient attribute and add a text-shadow

/* Changing List divider to look like iphone apps headers */
.abs-radio .ui-li-divider {
background-image: -webkit-gradient(linear, 0% 0%, 0% 93%, from(#333333), to(#666666), color-stop(.1,#292929));
padding-top:4px;
padding-bottom:4px;
padding-left:8px;
color:#fff;
font-size:14px;
font-weight:700;
text-shadow:1px 1px 1px #000;
border-top-color:#666;
border-bottom-color: #000;
}

Thats it the jQuery Mobile pages now look absolutely fabulous!

Screenshots taken on my 5C

For a tutorial on creating a back button similar to that of the Absolute Radio App visit: http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/