Skip to content

Theming

Jump to bottom Edit New page
David Kaneda edited this page Dec 21, 2011 · 1 revision

Included Themes

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.

Installation

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:

Default Variables

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

Additional Resources

joel@

Add a custom sidebar
Clone this wiki locally