1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Unanswered: Having difficulty setting active icon colour in tabpanel v2.2

    Unanswered: Having difficulty setting active icon colour in tabpanel v2.2


    Hi,

    I've been getting my head around the new changes required for theming in touch 2.2, however I'm having difficulty changing the colour of an active item in a tabpanel....it seems with the new picto font it is impossible to change the active colour! I've tried many variations. I can change the picto font color of non active items in a tab using this CSS:

    Code:
    .x-tabbar.x-docked-bottom .x-tab .x-button-icon.x-shown {
    color: #000;
    }
    I can't seem to change the active icon color, I've tried lots of different combinations, including:

    Code:
    .x-tabbar-light .x-tab-active {
      color: black;
      background-color: black;
    }
    
    .x-tabbar-dark .x-tab-active {
      color: black;
      background-color: black;
    }
    
    .x-tabbar-light.x-docked-bottom .x-tab-active {
      color: black;
      background-color: black;
    }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I did something like this:

    Code:
    .x-tabbar-dark .x-tab-active .x-button-icon:before {
        color : #f00;
    }
    to change the color of the icon for

    Code:
    Ext.Viewport.add({
        xtype : 'tabpanel',
        items : [
            {
                title   : 'Foo',
                iconCls : 'home'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread