Mobile

In my last article, I showed how to get setup and started with creating custom stylesheets. After a significant release (1.1.0) and several reader requests, I’m updating the walkthrough with screenshots and instructions for v1.1.0. This version will be strictly business: for discussion about the more interesting points of what’s going on, refer back to the original post

Step 1: Install Ruby

To get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.

Now that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac More >

Ok, let’s recap. So far, we’ve looked at some basic concepts related to how to approach modifying a Sencha Touch app theme, as well as walked through exactly how all the pieces fit together in the SASS magic. With all this behind us, it’s finally time to create a custom .scss file–let’s get started!

Setting Things Up

In the following example, we’ll be doing some minor riffs on the standard sencha-touch.css file. If you’re in the mood for a super-customized theme of your own, well, you’ve got a lot of work ahead of you. Instead of jumping headfirst into something like that, why not start with some small changes, and build from there?

First things first, we need to decide where we want our new .scss file to live. While we can put it in the /resources/sass/ folder where the other core ones are, for this example we’ll create a new folder at the same level…just to keep things straight. I’m going to call mine “custom” (pretty creative, eh?).

Now, in order for us to let Compass know where our .scss file lives, we need to create our own config.rb file (check out the last post for more info about this). I’ll create that file, and here’s More >

If you followed the steps in the last post on setting up your development environment to leverage SASS, you should be all set to start rocking some seriously awesome custom themes for your Sencha Touch app. But before you dive in, you might take a few moments to take a deep breath and survey all that’s going on to build out the default Sencha Touch theme.

It’s not that you couldn’t immediately jump in and produce something awesome–you definitely could, and it would be pretty simple. I suggest browsing the default theme, however, because despite how easy it is to being customizing your own .scss file with new colors, icon masks, and whatever else strikes your fancy, actually understanding (if even in a very preliminary sort of way) what’s going on will help prevent future frustrations that may dampen your sudden excitement to start theming.

With that thought in mind, let’s take a few moments to peek around the default theme to see how the magic happens.

config.rb

In your Sencha Touch installation, browse to /resources/sass/. In this folder, you’ll see a file named config.rb. This file, written in Ruby, is one of those “setup it up and leave it alone” kind of files. More >

If you’ve worked with Sencha Touch for more than 5 minutes, you have GOT to appreciate the aesthetics which the framework brings out of the box. You literally have to do nothing at all in order to get a slick, polished looking interface that works in webkit browsers and on iPhone and Android devices.

However, if you’re like me, you probably get to the point with your apps where you want to customize the look and feel. I mean, while the Sencha Touch default palette is nice, it’s pretty generic, so before long you’ll need to start developing a custom theme for your app.

An Abortive Start

Initially, this can be a challenge with Sencha Touch apps. The challenge stems not from the fact that anything magical is happening behind the scenes: it’s just JavaScript, CSS3, and HTML after all. Rather, it’s the way that it’s all packaged up.

If you take a look at one of the stylesheets, you’ll notice how crazy complicated they are. Let’s say you wanted to change the color of all the navigation backgrounds, for example. Well, you could use Chrome’s developer tools to inspect each and every interface, grab the selectors, and then try to overwrite them with a More >