Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Clone this wiki locally
jQTouch ships with two themes by default, jqtouch.css and apple.css. While the themes are generally just CSS files you include, they are created using Sass and Compass — Ruby gems which precompile CSS, adding useful features like variables and functions. Additionally, the theming system is augmented with Compass Recipes, another open source project David Kaneda works on. Recipes includes a "layer effect"-like system, making advanced CSS styling super-easy.
If you're on a Mac, just run:
sudo gem install compass
And you'll have everything you need. Windows users will need Ruby, which is fairly easy to install at http://rubyinstaller.org/
If you are using the GitHub repo to stay up to date, you will also need the Compass Recipes submodule, which you can get by running
git submodule init from the root jQTouch directory.
Creating a Custom Theme with Sass
Although jQTouch comes with two separate themes, both are powered by the same SCSS file (_skeleton.scss), and therefore both use the same set of variables and rules which create their look. The easiest way to adjust your apps style is to alter a default variable:
Here are the default variables which apply to both the jQTouch and Apple themes:
- $base-color: #555658; The default base which is later used for toolbar, list, and button backgrounds.
- $highlight-color: #53b401; - For highlights, active list items, etc. Default is a bright green.
- $toolbar-background-color: darken($base-color, 15%); - Specific color for the toolbar.
- $toolbar-button-color: darken($toolbar-background-color, 15%); - Specific color for toolbar buttons.
- $toolbar-button-active-color: darken($toolbar-button-color, 5%); - Specific color for tapped/active toolbar buttons.
- $page-background-color: $base-color; - Specific background for pages/views.
- $list-background-color: $page-background-color; - Specific background for lists.
- $include-metal-lists: true; - Set to false to not include the .metal list style (optimization)
- $include-plastic-lists: true; - Set to false to not include the .plastic list style (optimization)
- $include-forms: true; - Set to false to not include the form styles (optimization)
- $include-edge-lists: true; - Set to false to not include the .edgetoedge list style (optimization)
- $include-animations: true; - Set to false to not include the animations (optimization)
- $include-3d-animations: true; - Set to false to not include the 3d animations (optimization)
Note on iOS5
If you are intentionally supporting iOS5 (if you're wrapping in PhoneGap, for example), you can further optimize your stylesheet by setting
$support-for-original-webkit-gradients to false.
Creating a Custom Theme
Create a new file in the themes/scss directory (let's say
customstyle.scss). In that file, you can simply override some of the variables (described above), import either the jQTouch or Apple theme, write some custom styles, and compile it . It's wacky easy. Here's a sample of what customstyle.scss could look like:
// Override variables $base-color: #B8B282; $toolbar-background-color: #709500; // Use a starter theme (will inherit colors from above) @import 'jqtouch'; // Write your custom CSS/SCSS here