A couple of months ago, we designed and released two custom iOS themes for jQuery Mobile. They were a big hit in the mobile web community, and hopefully still getting some good usage. I thought it would be fun to follow up with a ‘how-to’ on creating themes using jQuery Mobile ThemeRoller. This time around, I created a custom theme based on Twitter’s mobile app. Like before, this theme is 100% free to use (personal or commercial), packaged with ThemeRoller generated CSS and a custom background image. Let’s get started!
Step 1: Creating a Theme
To begin, go to jQuery Mobile ThemeRoller. Although there are a ton of useful controls and features to explore, I primarily used the options in the left control panel. Here, I was able to set the “Global” overarching settings of my theme, such as Font Family, Active State, Border Radii, Icon, and Box Shadow. Pro-tip: you can save yourself a ton of time by already having an idea of what kind of theme you want to build – I had taken a few screen shots of Twitter’s app to gather relevant information (colors, fonts, sizes, etc.) prior to starting. In addition to the Global settings, I also utilized several “Swatches.” Having different Swatches allowed me to create different UI settings for unique components, such as the header bar, navbar, and list view:
Step 2: Download the Zip
Once I had my theme completely fleshed out and ready to go, I named it (“twitter_theme”) and downloaded the theme zip file (located on the top panel) to my computer:
You’ll notice the downloaded ThemeRoller folder houses several relevant files. In this case, all I needed to do was open the “twitter_theme.css” file and copy its contents…
Step 3: Import into Codiqa
After copying the CSS inside my downloaded ThemeRoller file, I logged into my Codiqa dashboard and opened the Themes tab. I created a new theme, gave it a name, and pasted the theme CSS. Simple!
Step 4: Select the New Theme
Create a new Codiqa project (or just open up a pre-existing one). I created a new one just for this theme so I could show it off nicely. In the toolbar at the top of the builder, click the Theme drop down button and select the theme you wish to preview! I took things one step further and designed a custom background texture similar the Twitter’s app and set it as the background image (repeating x and y).
And that’s all! Here’s a quick preview of the Twitter theme I designed using ThemeRoller. If you’d like to try it out yourself you can grab the files here! Again, feel free to use this theme in any way you like. It comes with the CSS file and custom background texture. If you use it in one of your projects let me know!