Basic Q <ExtJS4 Theme> - How to change tab color?

[mayura]

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:
ff.png

See below snapshot in IE8:
ie7.png

[mayura]

Please help guys!

[scottmartin]

IE still uses images. You will need to use slicer.

Scott.

[mayura]

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.

[crysfel]

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 and if you are pixel perfect you will need to fix some of them.

Regards