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를 보라.