Change CSS of GWT tabBar Items

Question

Update: I got the first part working, but the corners are not. See part 2 below.

How do you apply a style to a tabBar (in GWT) so that you can a single tabBar at a time? I have a few different tabPanels that need to have different styles but I can't figure out how to correctly apply the style to the bar and then how to add that style to my CSS.

When I do something like:

tabBar.addstyle("thisisastyle");

It adds the style for the whole bar, I want to apply it to a set of items, specifically changing the background colors for individual tabs. I am using a DecoratedTabPanel and I have my own set of images for rounded corners and such that I would like to use. Also, once the style is correctly applied, how do I call it in the CSS? My current attempt is like so:

.topTabs .gwt-DecoratedTabBar .tabMiddleCenter {

Part 2

All the other CSS styles are easily applied after setting a style name to the tab bar and addressing them as follows:

.customizedStyleName .tabTopCenter {
    background-image: url('images/centerTopImage.gif');
}

but this doesn't appear to work for the two corners, the base GWT overrides my CSS. The CSS for the right corner looks like this:

html > body .gwt-DecoratedTabBar .tabTopRight {

when inspecting it in Firebug (yah Firefox). Can anyone tell me how to override this?

Answer 1

You should load your own CSS styles after loading the standard GWT CSS, or other library support CSS.

Then, you are free to re-define any "base" CSS... last CSS wins. In Firebug, you will see overridden CSS styles with a "strike through" font.

I've done this to override std. GWT, GWT-Ext, and Ext-GWT CSS.

If you are trying to overload a CSS class which is "built in" and you don't have the style details, use Firebug to inspect it... after looking again in the Javadoc.

The "GWT incubator" had info on new CSS machinery similar to ImageBundle... ResourceBundle. And new methods for defining style rules dynamically.

Answer 2

You can change the style primary name and write your own style for the whole.

I think your problem is not reproducible in mozilla.. it should be reproducible only in IE. So what you can do is that, you can copy the whole style from the standard.css file and replace the base gwt-DecoratedTabBar with say customizedStyleName. Then in ur .java file, set the style primary name to customizedStyleName. Then edit the differnt styles by removing unwanted images etc. Hope this helps. If u want any more information, please tell. I wil post the requiried source code and the css file.

Answer 3

The general problem is that standard.css is linked as last stylesheet dynamically to your page. By this, some of your settings (even very basic ones, e.g. for body) may be partially overruled by standard.css. Uncommenting it from the .gwt.xml file does not help as you loose a bunch of wanted styles and also the standard graphics used to render decorated panels, etc.

I described my way of dealing with it in my blog: http://IlIlIIlIlIlIlII.blog.de/2010/05/12/gwt-s-standard-css-killed-my-page-layout-8574576/

If you have any other suggestions how to deal with this issue in an easier, I would appreciate if you leave a comment.