Howdy friends!
We’ve been busy bees, Max and I, having just returned from an amazing trip down to San Francisco. What a gorgeous city! Perhaps we’ll move down there some day… but more on that later. What I really want to talk about is themes. jQuery Mobile themes built with ThemeRoller and implemented into Codiqa, to be specific. Lately, it’s seemed like there’s been quite a lot of buzz surrounding the ability to create custom themes for HTML5-built apps. So, since everyone is in the theming spirit, I decided to design a couple of iOS-styled jQuery Mobile themes along with some slick custom background images to match. Everything I’ve built is 100% free to use in any way you like.
iOS Default Settings Theme
This first theme is based closely on the iOS Settings page design. I had seen this design used in a ton native apps over the years, such as Flow, Lose It, and Fitness Pro. Characterized by it’s signature striped background and white minimal lists, this is a great theme to use for a settings or dashboard-type interface.
Screen cap of my app's settings page
The background image for this theme uses the custom iOS generic stripes image, set to repeat X and Y values. Download this theme and the custom background image here!
iOS Notification Center Theme
Next up is a really sweet theme based on the famous iOS Notification Center. I’ve always loved this design, ever since it first arrived on iOS 5 (although, let it be known that Android phones already had a notification center for some time). For this theme, the design utilizes the customary iOS “linen” background texture, dark headers, and bold white text. It’s a much more bold design, but nonetheless one that will make an impression on your users.
By uploading the iOS "Linen" background texture to my Codiqa project I was able to achieve the custom look I wanted.
Remember to set the “Linen” texture to repeat on both X and Y values. Get this custom iOS theme here!
Both themes come with the CSS file generated by ThemeRoller, as well as the custom background images associated with each. Getting these themes going in Codiqa is easy as pie. Here’s a quick tutorial on how to do it: First, create a new theme in the Themes tab from the Dashboard, then copy/paste the ThemeRoller CSS into the “new theme” window (see reference). Name it, and hit the “Add” button. Then, simply open up a new project and select that theme from the drop down Theme menu (see reference). Once you have your theme selected you can start building! Here’s a quick preview of the Settings theme and the Notification Center theme.
Happy prototyping!
Pingback: Creating a Twitter App Theme with jQuery Mobile ThemeRoller + Codiqa | Codiqa
Pingback: Edelmira Gorbea