Free jQTouch Theme: Easily Customizable, Retina and Tabbar Support
When we started designing our next jQTouch application we needed a simple way to try out different color schemes. We used a customized layout from an earlier app, but we really wanted to try some new colors. Changing each individual color, gradient, shadow, etc... was a time consuming task. So we started looking for a better way.
We decided to make the process easier by defining two base colors, one for text and one for backgrounds, and using RGBA to make variations on the two colors. RGBA stands for Red, Green, Blue and Alpha, which are the main channels plus a transparency channel. Ok, but how does it work? Well, when the base background-color is blue for example, we could make the color of an overlaying element dark blue by setting it to rgba(0,0,0,0.5). For light blue the color would be set to rgba(255,255,255,0.5). The same technique can be applied to borders, gradients and shadows.
See more screens (red, blue and green examples)
Download & Installation
First of all, be sure to download a recent version of jQTouch from Github. The theme doesn't work with the one from jQTouch's homepage.
Download the theme, add it to the themes folder and be sure to link to it in your index file. The default color scheme is "safari green", but you can easily choose another color by editing the first two blocks of code in theme.css.
Features
Did I mention our theme, in contrary to the default jQTouch themes, is optimized for the Retina display, uses a minimum of images and is only ±50KB in size?
- Easily customizable: change two colors, CSS does the rest
- Optimized for Retina display
- Support for DataZombies' bar-extension
- Minimum use of images
- Maximum use of CSS3
Updates
December 10, 2010 - We've updated the theme so it supports the bars-extension by DataZombies. The package now includes an extra CSS file called jqt.bars.artspot.css. The install instructions are in the file itself. Check out the funky video below for a demo.
March 27, 2012 - This theme no longer supports the latest version of jQTouch. We don't have plans to update the theme either.
If you have any suggestions, please don’t hesitate to tell us in the comments below.
Happy styling!