View Full Version : Basic Q <ExtJS4 Theme> - How to change tab color?

8 Oct 2012, 11:13 PM
I'm using SASS and Compass features to create a custom theme in ExtJS4.
Ive added following parameters in my-theme.scss.

After compass compilation the tab color changes in FireFox but not in IE8.

Please help urgently.
Do I need to change any other attribute also?

$tab-base-color: #472A49;
$tab-base-color-active: #dee2e4;

See below snapshot in FF:

See below snapshot in IE8:

9 Oct 2012, 2:13 AM
Please help guys!

10 Oct 2012, 5:02 AM
IE still uses images. You will need to use slicer.


10 Oct 2012, 5:38 AM
Thanks for the reply...I am also unable to change the Panel Header background color.

Can you please post some sample / reference code? That will be v helpful.:)

10 Oct 2012, 8:38 AM
In order to create a new theme and add support for legacy browsers (IE), you need to use images for gradients, rounded corners and so on.

There's a tool that you can use to generate the images for IE, you need to download and install the sencha sdk tools (http://www.sencha.com/products/sdk-tools/) and then execute the following command on your terminal:

sencha slice theme -d js/ExtJS -c resources/css/your-styles.css -o resources/images -m js/manifest.json -v

That will generate all the needed images for you automatically, if you test your theme on IE you will see the right colors but in my experience (I have developed a lot of themes before for clients) you will have to edit some images because usually are not generated correctly 8-| and if you are pixel perfect you will need to fix some of them.