Right know I'm customizing default gwt widgets.
As a starting point I took the standard theme, I copied the
standard.css file from standard theme and then declared this in my
ThemeBundle like this :
@Source("standard.css")
CssResource getLegacyCssResource();
Then I have added @external declaration to every class listed in this
file. Thanks to this I don't have to subclass CssResource and there is
no need to declare getters for classes found in this css file.
Below are external declarations for all the class names found in
standard.css :
@external gwt-Reference-standard, gwt-Button, gwt-CheckBox, gwt-
CheckBox-disabled, gwt-FileUpload, gwt-Frame, gwt-PasswordTextBox, gwt-
PasswordTextBox-readonly, gwt-PopupPanel, gwt-TextArea, gwt-TextArea-
readonly, gwt-TextBox, gwt-TextBox-readonly;
@external gwt-DecoratorPanel, topCenter, bottomCenter, middleLeft,
middleRight, topLeftInner, topRightInner, bottomLeftInner,
bottomRightInner, topLeft, topRight, bottomLeft, bottomRight;
@external gwt-DialogBox, Caption, dialogContent, dialogBottomCenter,
dialogMiddleCenter, dialogMiddleLeft, dialogMiddleRight,
dialogTopLeftInner, dialogTopRightInner, dialogBottomLeftInner,
dialogBottomRightInner, dialogTopLeft, dialogTopRight,
dialogBottomLeft, dialogBottomRight;
@external gwt-DisclosurePanel, gwt-DisclosurePanel-open, gwt-
DisclosurePanel-closed, header, content;
@external gwt-HorizontalSplitPanel, hsplitter, gwt-VerticalSplitPanel,
vsplitter, gwt-HTML, gwt-Hyperlink, gwt-Image, gwt-Label, gwt-ListBox;
@external gwt-MenuBar, gwt-MenuItem, gwt-MenuItem-selected, gwt-
MenuItem-disabled, gwt-MenuBar-horizontal, gwt-MenuItemSeparator,
menuSeparatorInner, gwt-MenuBar-vertical, subMenuIcon, subMenuIcon-
selected;
@external gwt-MenuBarPopup, menuPopupTopCenter, menuPopupBottomCenter,
menuPopupMiddleLeft, menuPopupMiddleRight, menuPopupTopLeftInner,
menuPopupTopRightInner, menuPopupBottomLeftInner,
menuPopupBottomRightInner, menuPopupTopLeft, menuPopupTopRight,
menuPopupBottomLeft, menuPopupBottomRight;
@external gwt-DecoratedPopupPanel, popupContent, popupMiddleCenter,
popupTopCenter, popupTopRight, popupTopLeft, popupBottomCenter,
popupBottomRight, popupBottomLeft, popupMiddleLeft, popupMiddleRight,
popupTopLeftInner, popupTopRightInner, popupBottomLeftInner,
popupBottomRightInner, gwt-PopupPanelGlass;
@external gwt-PushButton-up, gwt-PushButton-up-hovering, gwt-
PushButton-up-disabled, gwt-PushButton-down, gwt-PushButton-down-
hovering, gwt-PushButton-down-disabled, gwt-RadioButton, gwt-
RadioButton-disabled;
@external gwt-RichTextArea, hasRichTextToolbar, gwt-RichTextToolbar,
gwt-PushButton-up, gwt-PushButton-up-hovering, gwt-PushButton-down,
gwt-PushButton-down-hovering, gwt-ToggleButton-up, gwt-ToggleButton-up-
hovering, gwt-ToggleButton-up-disabled, gwt-ToggleButton-down, gwt-
ToggleButton-down-hovering, gwt-ToggleButton-down-disabled;
@external gwt-StackPanel, gwt-StackPanelItem, gwt-StackPanelContent,
gwt-DecoratedStackPanel, stackItemTopLeft, stackItemTopRight,
stackItemTopLeftInner, stackItemTopRightInner, stackItemTopCenter,
stackItemMiddleLeft, stackItemMiddleLeftInner,
stackItemMiddleRightInner, stackItemMiddleRight,
stackItemMiddleCenter, gwt-StackPanelItem-first, gwt-StackPanelItem-
below-selected;
@external gwt-SuggestBox, gwt-SuggestBoxPopup, item, item-selected,
suggestPopupContent, suggestPopupTopCenter, suggestPopupBottomCenter,
suggestPopupMiddleLeft, suggestPopupMiddleRight,
suggestPopupTopLeftInner, suggestPopupTopRightInner,
suggestPopupBottomLeftInner, suggestPopupBottomRightInner,
suggestPopupTopLeft, suggestPopupTopRight, suggestPopupBottomLeft,
suggestPopupBottomRight;
@external gwt-TabBar, gwt-TabBarFirst, gwt-TabBarRest, gwt-TabBarItem,
gwt-TabBarItem-selected, gwt-TabBarItem-disabled, gwt-TabPanel, gwt-
TabPanelBottom;
@external gwt-DecoratedTabBar, tabTopCenter, tabTopLeft, tabTopRight,
tabTopLeftInner, tabTopRightInner, tabMiddleLeft, tabMiddleRight,
tabMiddleLeftInner, tabMiddleRightInner, tabMiddleCenter;
@external gwt-Tree, gwt-TreeItem, gwt-TreeItem-selected, gwt-DateBox,
dateBoxFormatError, dateBoxPopup, gwt-DatePicker, gwt-DatePicker,
datePickerMonthSelector, datePickerDays, datePickerDay,
datePickerWeekdayLabel, datePickerWeekendLabel, datePickerDayIsToday,
datePickerDayIsWeekend, datePickerDayIsFiller, datePickerDayIsValue,
datePickerDayIsDisabled, datePickerDayIsHighlighted,
datePickerDayIsValueAndHighlighted, datePickerMonth,
datePickerPreviousButton, datePickerNextButton;
@external gwt-StackLayoutPanel, gwt-StackLayoutPanelHeader, gwt-
StackLayoutPanelHeader-hovering, gwt-StackLayoutPanelContent, gwt-
TabLayoutPanel, gwt-TabLayoutPanelTabs, gwt-TabLayoutPanelContent, gwt-
TabLayoutPanelTab, gwt-TabLayoutPanelTab-selected, gwt-
SplitLayoutPanel-HDragger, gwt-SplitLayoutPanel-VDragger;
After that you can very easy customize gwt widgets, you can use @def
in this file and use all of the benefits which come from CssResource.
And of course don't forget to call
theme.getLegacyCssResource().ensureInjected();
on application startup.
Hope that will help you, changing dialogTop should work as changing
any other class.
On Dec 2, 5:10 pm, Anderson Aroeira Araujo <aaroei...@gmail.com>
wrote:
> Hi,
>
> How to customize the gwt default widgets using cssresource?
>
> Like:
> .gwt-DialogBox
> .gwt-DialogBox .dialogTop
>
> I can change the gwt-DialogBox visuals, but dialogTop I don't know how
> to do.
> Anybody?
>
> Thanks
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
