GWT DecoratedTabPanelタブボタンの色

Question

DecoratedTabPanelのタブの色を変更するにはどうすればよいですか？私はコンテンツを意味するのではなく、あなたがタブを選択するためにクリックしたボタンを意味します。

Answer 1

私が言う限り、これを行う簡単な方法は実際にはありません。装飾されたタブパネルでは、ネストした表のレイヤーを使用して角を丸くしているので、タブの色を変更するために、すべてを変更する必要があります。とは丸いコーナーになります。

タブのGWTデフォルトスタイルは次のとおりです。希望の効果を得るためにスタイルシートでオーバーライドする必要があるのはかなり明白です（bgの色を探してください）。

.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; 
} 

Answer 2

あなたがしたいのはChange the CSS of GWT tabBar Itemsです。私は次のCSSコードがあなたの特定の状況でやると思います。また

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

は、 this siteと this referenceを見てみましょう。