Re: Customizing CSS Default GWT Widgets with CSSResource

Thanks Marcin!
It works!

On Dec 2, 2:35 pm, Marcin Misiewicz <misq...@gmail.com> wrote:
> 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-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.