Override body selector when using CssResource

0
votes

I am using a CssResource contained within a ClientBundle according to this guide: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles

I am accessing the styles from my UiBinder xml according to this guide using ui:with: http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_an_external_resource

This works great for accessing my css using class on html elements or styleName on GWT widgets. However, I would like to override the body selector, how can I accomplish that?

This worked great when I previously used tag within my html-file or when I pointed to the css within my GWT module xml. But since this was depracted I switched to only using CssResource. Now my own body selector is not used and the one from GWT Standard Theme is used.

1
cssgwt

1 Answers

1
votes

Alright, I found two solutions myself for this:

  1. Add @external to the body CSS selector to suppress selector obfuscation, according to this guide: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

    @external body; body { my style }

  2. Add an id to the body, grab the element using GWTs DOM.getElementById and add the style.

    Element body = DOM.getElementById("bodyId"); body.addClassName(AppResources.layout().body());

Hope this can help other in the same situation.