Change CSS of GWT tabBar Items

12,435

Solution 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.

Solution 2

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.

Share:
12,435
Organiccat
Author by

Organiccat

I am a cat who programs.

Updated on June 13, 2022

Comments

  • Organiccat
    Organiccat over 1 year

    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?