Changing Sencha Touch App Theme
After spending a couple of days I’ve decided it’s time to
start using a CSS preprocessor. I chose SASS
and I tried to install it. And as it seems – I went through most of the
problems that may show up during the installation. I was pretty frustrated for
a while but then I realized there is an easy way for everything.
So in this description I will show you two things:
- How to
install Ruby, SASS and Compass
- Create New theme and compile .scss
Go to the Ruby Installer for Windows website and
download the latest Ruby version – usually the fist file at the top of the list.
Open the file, choose your language, and accept
the license agreement, nothing special.
On the next screen check the second box – Add
Ruby executables to your PATH (this is important). Click next and finalize your
- Open your cmd command prompt with Administrator
Here you can check if everything is okay
with your Ruby installation. Type in
You should now see a line saying “ruby x.x.x….” where xxx are your
version’s numbers. This means that your Ruby installation is working.
If you get an error message saying ruby
is not recognized as an internal or external command, operable or batch
file. You’ve probably forgotten to check that box from Step3. Just uninstall Ruby, run the installation again and this
time – make sure you’ve checked the Add
Ruby executables to your PATH (Reinstalling is the simplest way to fix that
problem. However, if for some reason you don’t want to do that, check out how
to add ruby executables to your PATH manually.
5. It is time to install your preprocessor now. Go
back to the Command Prompt window and type in
gem install sass
cursor will start blinking on a new line for a couple of moments and then a few
messages will appear. In not more than 30 seconds you will be good to go.
6. Check if the SASS installation is working. Type
You should see a line stating your SASS
7. Installing Compass is a lot like installing
SASS. In your Command Prompt window type in
gem install compass
And wait a bit again.
8. Check if the Compass installation is working.
If you had no problems until now – you have
completed SASS with Compass installation.
Now it’s time to create your custom theme. There are two ways through which you can
create your custom theme:
Way 1: If you’re using Sencha Architect then you have to
create two file config.rb and app.scss at the path of project_name/resources/sass/, file
config.rb (ruby file) and app.scss containing following structure:.
Step 1: Config.rb
Step 2: App.scss
Step 3: Now open your command prompt and set the sass
directory path of your project. And write down the following line of code in
compass compile app.scss
But in that case you could be face some
problem during running this command because of Sencha Architect does not
provide all required files to changing theme. So to solve this problem you have
to copy all the files with same directory structure from downloaded sencha touch 2.2.
After waiting a little bit second your
custom theme (i.e css file) file has been created at the path of project_name/resources/css
with name app.scss.
Basically in first way; mostly things you
have to perform by yourself like creating config.rb
file, app.scss file etc. so it is
little bit typical.
But if you don’t want to perform such thing,
then you have a simple and sweet way and that is Way 2:
Step 1: Open your
command prompt and set sass path directory in your downloaded sencha touch
file. And just follow the 3rd
step of Way 1.
After successfully compilation a CSS file
with same name has been created at path touch-2.2.0/resources/css/yourFileName.
You can simply add this file in your
project at the same path from where you’ve picked that.
Adding Custom font and custom Icons in Sencha Touch
In Sencha Touch 2.2 instead of using icons with the
-webkit-mask trick, Touch is moving to a more cross-browser solution
with icon fonts. As you know Touch SDK
ships with the Pictos Font, and it
already loads some basic icons for you to use directly on buttons with iconCls.
If you want to define more icons from the same Pictos fonts, you just have to use the mixin icon(): like
Touch Theme Layer already has a big object on SASS mapping
keys into characters. So when you inform the key “network”, the theme knows that it has to use the key “J”.
You can find all icon description in file _Class.scss at path:
Here, $name refers the iconCls
name. So you can use all icons in project which are defined above. You can use
these icons via mixin like:
Now compile your sencha theme file ( .scss) and css has been
generated in css folder. But
to add more icons you’ll need to generate your own font! You might be question
yourself – How do I create a new font? Sounds complicated but it’s fairly easy.
There are a few tools, but my favorite is IcoMoon.
With this tool you can select from dozens of fonts and create your own font
package, or even import your own SVG vectors. All you need to do is select your
icons, click generate font, and download!
Open http://icomoon.io/ and
click on App which beside of Home
You have to wait for little bit second.
Now select your icon and convert into font.
Select your Basic Latin through which your icon will call.
You can change this text by simple clicking on that place
and edit the text. Now download the font and put at the path touch-2.2.0/resources/themes/fonts/pictos/. Now open sencha-touch.scss (App themes file) and include downloaded font
Now compile your file as you have done above and replace
your css file with recently created css file.