Цвет кнопки вкладки GWT DecoratedTabPanel

Question

как я могу изменить цвет вкладки в DecoratedTabPanel? Я имею в виду не контент, а кнопку, по которой вы нажимаете, чтобы выбрать вкладку.

Answer 1

То, что вы хотите сделать, это Изменить CSS элементов GWT tabBar . Я думаю, что следующий фрагмент кода CSS подойдет для вашей конкретной ситуации.

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

Кроме того, посмотрите на этот сайт и эту ссылку .

Answer 2

Насколько я могу судить, на самом деле это не простой способ сделать это. Поскольку в декорированных панелях вкладок используются слои вложенных таблиц для получения причудливых закругленных углов, похоже, вам нужно изменить все и для создания собственных закругленных углов для изменения цвета вкладки. *

Вот стили 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;
}