1. #1
    Ext User
    Join Date
    Jun 2008
    Location
    UK
    Posts
    52
    Vote Rating
    0
    Bing Qiao is on a distinguished road

      0  

    Default Change background of tab selector button

    Change background of tab selector button


    Setting property plain on tabpanel to true will render the tab strip without the background image. However I need to set the color to white for the tab selector buttons too.

    It seems the color is controlled by x-tab-right/x-tab-left classes which point to tabs-sprite.gif. What's the best way to change the color then? Is there anywere to use css to change the color of that image when creating the tabpanel?

    Your advice is much appreciated.

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    salamo is on a distinguished road

      0  

    Default


    This is an example using css.

    tabs-example.jpg

    You should include the css in the tabCls property.

    Code:
    .x-tab-strip-top .x-gray-tab .x-tab-right, 
    .x-tab-strip-top .x-gray-tab .x-tab-left, 
    .x-tab-strip-top .x-gray-tab .x-tab-strip-inner {
        background-image: url("../images/themes/gray/tabs/tabs-sprite.gif")    !important;
    }
    
    .x-tab-strip-top .x-love-tab .x-tab-right, 
    .x-tab-strip-top .x-love-tab .x-tab-left, 
    .x-tab-strip-top .x-love-tab .x-tab-strip-inner {
        background-image: url("../images/themes/love/tabs/tabs-sprite.gif")    !important;
    }
    
    .x-tab-strip-text{
        color: green !important;
    }
    
    .x-tab-strip-active .x-tab-strip-text{
        color: red !important;
    }
        
    .x-item-disabled  .x-tab-strip-text {
        color: gray !important;
    }
    
    
    ul.x-tab-strip-top {
        background-color: #ddcc66;
        background-image: url('');
    }
    Code:
        var tabs = new Ext.TabPanel({
            activeTab: 0,
            width:600,
            height:250,
            defaults:{autoScroll: true},
            items:[{
                    id: 'Tab1',
                    title: 'Normal Tab',
                    html: "My content was added during construction.",
                    bodyStyle: 'background-color:#ccaacc;color:white;'
                },{
                    title: 'Tab 1',
                    html: 'Tab 1',
                    tabCls: 'x-gray-tab'
                },{
                    title: 'Tab 2',
                    html: 'Tab 2',
                    tabCls: 'x-love-tab'
                },{
                    title: 'Tab 3',
                    html: 'Tab 3',
                    tabCls: 'x-gray-tab'
                },{
                    title: 'Disabled Tab',
                    disabled:true,
                    html: "Can't see me cause I'm disabled"
                }
            ]
        });
    A theme example (tabs-sprite.gif) can be found here:

    http://ethny.net/SugarCE-Full-5.2.0i...ges/love/tabs/

  3. #3
    Ext User
    Join Date
    Jun 2008
    Location
    UK
    Posts
    52
    Vote Rating
    0
    Bing Qiao is on a distinguished road

      0  

    Default


    Thanks for the reply!

    However I was expecting some kind of css trick that can grey out the sprite gif to make it close to white but keep the gradient so I don't have to make or use a different image.

    Is that even possible?

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    salamo is on a distinguished road

      0  

    Default


    You can modify the CSS removing the background-image and using a background-color. Although the easiest way to show a gradient is with an image.

    Code:
    .x-tab-strip-top .x-gray-tab .x-tab-right, 
    .x-tab-strip-top .x-gray-tab .x-tab-left, 
    .x-tab-strip-top .x-gray-tab .x-tab-strip-inner {
     
        background-color: #dd33dd;
        background-image: url("");
    }
     
    .x-tab-strip-top .x-love-tab .x-tab-right, 
    .x-tab-strip-top .x-love-tab .x-tab-left, 
    .x-tab-strip-top .x-love-tab .x-tab-strip-inner {
        background-color: #ccddcc;
        background-image: url("");
    }
    For CSS gradients without images you could check these URL's:

    http://webkit.org/blog/175/introducing-css-gradients/
    http://www.felgall.com/gradient.htm

Similar Threads

  1. How to change button background color
    By babyblue in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 20 Jul 2010, 10:36 PM
  2. How can i change the height of tab selector buttons
    By yeshrb in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 Feb 2010, 1:34 AM
  3. How can i change the height of tab selector buttons
    By yeshrb in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 31 Jan 2010, 6:05 PM
  4. change button background color on click
    By huhulucy90 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 26 Oct 2009, 5:01 PM

Thread Participants: 1

Tags for this Thread