PDA

View Full Version : Change background of tab selector button



Bing Qiao
25 Aug 2010, 12:46 AM
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.

salamo
9 Sep 2010, 12:05 AM
This is an example using css.

22302

You should include the css in the tabCls property.



.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('');
}


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/themes/Love/ext/resources/images/love/tabs/

Bing Qiao
9 Sep 2010, 3:50 AM
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?

salamo
9 Sep 2010, 6:31 AM
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.



.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