Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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 <em>and</em> make your own rounded corners in order to change the color of a tab.</p> <p>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).</p> <pre><code>.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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload