--- title: "Changing Sencha Touch App Theme" description: "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" author: "Anonymous User" published: 2013-12-29 updated: 2014-09-18 canonical: https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme category: "sencha touch" tags: ["sencha touch"] reading_time: 6 minutes --- # Changing Sencha Touch App Theme After [spending](https://answers.mindstick.com/qa/97481/what-is-double-spending-is-it-possible-to-double-spend-in-a-blockchain-system) 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](https://www.mindstick.com/articles/711/php-installation-on-windows). 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: 1. How to install **Ruby, SASS and Compass** 2. Create New theme and compile **.scss** file ##### Installing Ruby: 1. Go to the Ruby Installer for Windows [website](https://www.mindstick.com/articles/13110/why-copywriting-is-crucial-for-new-website-build) and [download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) the latest Ruby version – usually the fist file at the top of the list. 2. Open the file, [choose your](https://www.mindstick.com/articles/23258/choose-your-business-structure-wisely) [language](https://www.mindstick.com/startup/28/preply-the-fast-growing-platform-transforming-language-learning), and accept the license [agreement](https://yourviews.mindstick.com/view/88513/what-to-look-for-in-a-retainer-agreement-with-defence-lawyers-in-dubai), nothing special. 3. On the next screen check the second box – Add Ruby executables to your PATH (this is important). Click next and [finalize](https://www.mindstick.com/forum/101/what-is-the-difference-between-finalize-and-dispose) your installation. 4. Open your cmd [command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt) with Administrator rights. ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/c8b684d7-1894-4bdf-845f-9f7d1db585b4.jpg) ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/aa6eaefb-6848-46c4-b1ff-42af26c2cce6.jpg) Here you can [check if](https://www.mindstick.com/forum/12878/how-to-check-if-an-asp-dot-net-file-upload-control-has-a-file-in-jquery) everything is okay with your Ruby installation. Type in ## ruby –v 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. ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/40c95b34-8a92-4380-8d4d-fbf4fe3a0c23.jpg) 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. ##### Installing SASS: 5. It is time to install your preprocessor now. Go back to the Command Prompt window and type in **gem install sass** Your 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 in **sass -v** You should see a line stating your SASS version. 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. Type in ## compass -v 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 command prompt: ## 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 application 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 @include icon('network'); ##### Code: ``` { xtype: 'button', iconCls: 'network', iconAlign: 'top', text: 'Net'} ``` 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: ## touch-2.2.0/resources/themes/stylesheets/sencha-touch/base/mixins 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 tab. ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/f219a374-32bb-4041-a163-ec8772c16d99.jpg) ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/164e4cb0-e2a5-4791-abc1-d78e3ed76963.jpg) You have to wait for little bit second. ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/fab9c91b-5204-45ed-8127-6e98ea84cc8e.jpg) ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/cb47a3be-70ab-40c6-a3c2-89716ce95c4d.jpg)\ \ Now select your icon and convert into font.\ ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/cebb01aa-5473-4945-b84a-5a84d149b055.jpg)\ \ Select your Basic Latin through which your icon will call.\ ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/2fd3a147-2413-4bc5-8030-afdf3c7f6733.jpg) 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 file.\ ![Changing Sencha Touch App Theme](https://www.mindstick.com/blogs/9c0d7c17-9f5b-4b2d-8b44-2f1a827978ea/images/850c0803-a3d2-4cbd-bf16-ec47c0b440ab.jpg) ##### sencha-touch.scss: Now compile your file as you have done above and replace your css file with recently created css file. \ --- Original Source: https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.