A Simple Themeing Question

[jhoweaa]

I'm just starting to play around with generating a theme for my Ext JS 4.1 (4.2) application. What I want to have as my theme is basically the gray theme, with some customizations. I managed to get this working by moving some image directories around, but when I upgraded to the latest Sencha Cmd (3.0.2) I see to only be able to get the 'default' (or 'theme') images (i.e. the blue ones). Can someone spell out the process by which I can create and use a custom theme in my application which is based on the gray theme?

My initial attempt was to create an app.scss file which sort of looked like this:

$theme-name: 'gray';
$base-color: #ccc;


//panel
$panel-header-background-gradient: color-stops(#F0F0F0, #D7D7D7);
$panel-border-color: #D0D0D0;
$panel-header-color: #333;

... etc, making some tweaks to some of the variables to suit our desired look ...

@import 'compass';
@import 'ext4/default/all';

/* added some additional CSS styles here */

When I do a compass compile (or a sencha cmd build), I get a new app.css file which does most of what I want, except for where the theme uses some image sprites. The images are all based on the bluish default 'theme' not the gray theme. What's the proper way to deal with this?

I noticed after one of my 'builds' that the theme name was changed from "$theme-name: 'gray'" to "$theme-name: 'theme'". I had used the 'gray' name to pick up the gray images (at least that seemed to work).

Still learning.

Thanks!

Jim

[mitchellsimoens]

Did you follow the Cmd theme guide? http://docs.sencha.com/ext-js/4-1/#!.../command_theme It will have some changes as mentioned by Don but for 4.1.3 that guide worked pretty well for me: http://www.sencha.com/forum/showthre...s-in-Cmd-3.0.2

[jhoweaa]

I thought I was following the process described in the guide, but it's possible that I missed something. The problem I'm having is that it seems that no matter what I try I can't get rid of the 'default' images. When I run the build from sencha cmd, it seems that it is hardwired to always copy images from the 'default' theme which isn't what I want. However, it is entirely possible that I'm just doing something stupid.

[jhoweaa]

I've gone over the documentation and there is still something which isn't clear to me. My application will only need one theme, so it doesn't seem like I should have to generate a second theme. However, the look I want for my application is based on the gray theme, not the blue 'default' theme. What is the recommended way to build a theme based on something other than the default?

My biggest question concerns the way the images are dealt with. The build process always copies the Sencha images from the 'default' images directory, which means the blue images. If I want the gray, am I supposed to copy the gray images into my own 'resources/images' directory before building the theme? I could solve this problem by just copying the gray images into the 'default' directory, but that seems heavy handed.

I guess my question could be rephrased, what is the proper way to customize an existing Sencha theme that isn't the default theme?

Thanks!

[Misiu]

+1 from me.
I also would like to know how to remove default theme from my project and instead use gray theme or some custom build theme.
It is possible with current version of CMD Tool (3.0.2.288)?

[Izhaki]

+1

[scottw]

I posted a solution to this at http://www.sencha.com/forum/showthre...ild-!&p=945592