GWT DecoratedTabPanel tab button color

Question

how can I change the color of a tab in a DecoratedTabPanel? I don't mean the content but the button you click on to select a tab.

Answer 1

What you want to do is Change the CSS of GWT tabBar Items. I think the following piece of CSS code will do in your specific situation.

.gwt-DecoratedTab*Bar* .gwt-TabBarItem  { background:#FF0; }

Also, have a look at this site and this reference.

Answer 2

As far as I can tell there really isn't an easy way to do this. Because decorated tab panels use layers of nested tables to get the fancy rounded corners, it looks like you'll need to change everything and make your own rounded corners in order to change the color of a tab.

Here's the GWT default styles for tabs. It should be pretty obvious what you need to override in your style sheet to obtain the desired effect (look for the bg colors).

.gwt-TabBar {
}
.gwt-TabBar .gwt-TabBarFirst {
 width: 5px; /* first tab distance from the left */
}
.gwt-TabBar .gwt-TabBarRest {
}
.gwt-TabBar .gwt-TabBarItem {
 margin-left: 6px;
 padding: 3px 6px 3px 6px;
 cursor: pointer;
 cursor: hand;
 color: black;
 font-weight: bold;
 text-align: center;
 background: #d0e4f6;
}
.gwt-TabBar .gwt-TabBarItem-selected {
 cursor: default;
 background: #92c1f0;
}
.gwt-TabBar .gwt-TabBarItem-disabled {
 cursor: default;
 color: #999999;
}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
 border-color: #92c1f0;
 border-style: solid;
 border-width: 3px 2px 2px;
 overflow: hidden;
 padding: 6px;
}

.gwt-DecoratedTabBar {
}
.gwt-DecoratedTabBar .gwt-TabBarFirst {
 width: 5px; /* first tab distance from the left */
}
.gwt-DecoratedTabBar .gwt-TabBarRest {
}
.gwt-DecoratedTabBar .gwt-TabBarItem {
 border-collapse: collapse;
 margin-left: 6px;
}
.gwt-DecoratedTabBar .tabTopCenter {
 padding: 0px;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .tabTopLeft,
.gwt-DecoratedTabBar .tabTopRight {
 padding: 0px;
 zoom: 1;
}
.gwt-DecoratedTabBar .tabTopLeftInner,
.gwt-DecoratedTabBar .tabTopRightInner {
 width: 6px;
 height: 6px;
}
.gwt-DecoratedTabBar .tabTopLeft {
 background: url(images/corner.png) no-repeat 0px -55px;
 -background: url(images/corner_ie6.png) no-repeat 0px -55px;
}
.gwt-DecoratedTabBar .tabTopRight {
 background: url(images/corner.png) no-repeat -6px -55px;
 -background: url(images/corner_ie6.png) no-repeat -6px -55px;
}
* html .gwt-DecoratedTabBar .tabTopLeftInner,
* html .gwt-DecoratedTabBar .tabTopRightInner {
 width: 6px;
 height: 6px;
 overflow: hidden;
}
.gwt-DecoratedTabBar .tabMiddleLeft,
.gwt-DecoratedTabBar .tabMiddleRight {
 width: 6px;
 padding: 0px;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .tabMiddleLeftInner,
.gwt-DecoratedTabBar .tabMiddleRightInner {
 width: 1px;
 height: 1px;
}
.gwt-DecoratedTabBar .tabMiddleCenter {
 padding: 0px 4px 2px 4px;
 cursor: pointer;
 cursor: hand;
 color: black;
 font-weight: bold;
 text-align: center;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
 background-position: 0px -61px;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
 background-position: -6px -61px;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft,
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter {
 cursor: default;
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
 cursor: default;
 color: #999999;
}