GXT: BorderLayout style split bar

Question

How can I style the split bar? I want to apply a different color for the split bar of a border layout. I'm using gxt-3.x

Answer 1

I think that you could look at this CSS rules:

.x-layout-split { ... }
.ext-strict .ext-ie6 .x-layout-split { ... }
.x-layout-split-h { ... }
.x-layout-split-v { ... }
.x-layout-split-west .x-layout-mini { ... }
.x-layout-split-east .x-layout-mini { ... }
.x-layout-split-north .x-layout-mini { ... }
.x-layout-split-south .x-layout-mini { ... }

---

[updated]

One of the options is add your own styles and override the defaults rules.

SplitLayoutPanel splitLayoutPanel = new SplitLayoutPanel();
splitLayoutPanel.setStyleName("x-layout-split-v-override", true);

In the CSS file, add:

.x-layout-split-v-override.x-layout-split-v-override {
   ...
}

And so on.

Another option: write your interface that extends ClientBundle, for example:

public interface CommonCssBundle extends ClientBundle {
    public static final CommonCssBundle INSTANCE = GWT.create(CommonCssBundle.class);

    @Source("path/to/your/css/file/here/split-css-override.css")
    public CssResource css();
}

In the entry point make this call:

public void onModuleLoad() {
    ...
    CommonCssBundle.INSTANCE.css().ensureInjected();
    ...
}

Note, that you can always find out the names of the CSS rules by using Google Chrome or Firefox with Firebug.

What yet - highly recommend reading this topic: Override GWT Styling