Difficulties in styling GWT interfaces

I am getting in styling gwt existing widgets such as decorated panel, how to change the colors of the borders from blue to another color or the stack panel, how to change the color of the header. Does someone know how to fully customise the widgets or pane开发者_如何学Pythonl?

The default styles applied to GWT widgets are listed in the API. Take a look at the DecoratedStackPanel. There you'll see the following styles listed:

• .gwt-DecoratedStackPanel { the panel itself }
• .gwt-DecoratedStackPanel .gwt-StackPanelItem { unselected items }
• .gwt-DecoratedStackPanel .gwt-StackPanelItem-selected { selected items }
• .gwt-DecoratedStackPanel .gwt-StackPanelContent { the wrapper around the contents of the item }
• .gwt-DecoratedStackPanel .stackItemTopLeft { top left corner of the item}
• .gwt-DecoratedStackPanel .stackItemTopLeftInner { the inner element of the cell}
• .gwt-DecoratedStackPanel .stackItemTopCenter { top center of the item}
• .gwt-DecoratedStackPanel .stackItemTopCenterInner { the inner element of the cell}
• .gwt-DecoratedStackPanel .stackItemTopRight { top right corner of the item}
• .gwt-DecoratedStackPanel .stackItemTopRightInner { the inner element of the cell}
• .gwt-DecoratedStackPanel .stackItemMiddleLeft { left side of the item }
• .gwt-DecoratedStackPanel .stackItemMiddleLeftInner { the inner element of the cell}
• .gwt-DecoratedStackPanel .stackItemMiddleCenter { center of the item, where the item text resides }
• .gwt-DecoratedStackPanel .stackItemMiddleCenterInner { the inner element of the cell}
• .gwt-DecoratedStackPanel .stackItemMiddleRight { right side of the item }
• .gwt-DecoratedStackPanel .stackItemMiddleRightInner { the inner element of the cell}

In order to overwrite one of these styles remember to declare your definition as @external to make sure it is not being obfuscated (see here).

GWT themes are injected via the theme modules. They can be found in the com.google.gwt.user.theme package. For example to include the standard add the following inherits:

<inherits name="com.google.gwt.user.theme.standard.StandardResources"/>

You can create your own custom styling by creating a similar module. Simply copy the content of one of the standards theme's and create your own gwt module and add you inherit to your module.

To make things more easier this theme generator: http://gwt-theme-generator.appspot.com/ generates both the CSS and the images for the GWT style. This should help you get a quick start. It contains the .gwt-Decorated style.