1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    India
    Posts
    57
    Vote Rating
    1
    mayura is on a distinguished road

      0  

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

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


    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?


    Code:
    $tab-base-color: #472A49;
    $tab-base-color-active: #dee2e4;
    See below snapshot in FF:
    ff.png

    See below snapshot in IE8:
    ie7.png

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    India
    Posts
    57
    Vote Rating
    1
    mayura is on a distinguished road

      0  

    Default


    Please help guys!

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,084
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Location
    India
    Posts
    57
    Vote Rating
    1
    mayura is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Answers
    7
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    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:

    Code:
    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

Thread Participants: 2

Tags for this Thread