How to override default CSS in modern GWT applications?


Tags: css,gwt,cssresource,clientbundle

Problem :

From the following page: Developer's Guide - CSS Style

it is made clear that in modern GWT apps there's two ways to declare css styles:

Using a CssResource contained within a ClientBundle. Using an inline element in a UiBinder template.

How do you use either of these two methods to override the GWT default styles such as gwt-Button, gwt-TextBox etc?

I know it's still possible to use a css style sheet that you reference from either the html page or the .gwt.xml file. However, I'd like to avoid this since these methods are now deprecated.



Solution :

Use an @external @-rule to disable obfuscation for the given CSS class names: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes You can, for instance, put the following in any CssResource stylesheet:

@external .gwt-*;

But IMO, the best practice is to instead addStyleName or setStyleName (or in UiBinder addStyleNames="…" or styleName="…" respectively) on widgets. And if you want to customize a theme, copy it first as your own theme and tweak your own copy (rather than overriding styles using the CSS cascade). As an added benefit, you'll have lighter stylesheets, so they'll be faster to download for your users, and “faster is better”.

As a side note, UiBinder generates an implicit ClientBundle, where each <ui:style> element generates an implicit CssResource (and automatically calls ensureInjected() on it); so there's no much difference between <ui:style> and a CssResource.


    CSS Howto..

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    CSS: how to position element in lower right?

    How to fade out after hover is done using CSS

    How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS

    How to make my right-box float right…?

    How to include SASS files and CSS files into version repository and developement cycle

    How to make a photo collage using html and css? [closed]

    How to create a circle with text coming out of it like rays [closed]

    how to set menu to activate always hover effect on [closed]

    How to visually position image before heading element

    how to make the navbar fixed to top

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to dynamically create CSS class in JavaScript and apply?

    How to fast-blur in css/js?

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    Rails 4 -how to write a view that displays instances in alternating format

    jquery .show() from only the selected div

    How to make transparent corners of borders for a perspective effect?

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    CSS: How to get a positioned div to resize horizontally with window instead of getting scrollbars

    How to Extract one images from bunch of image(Image Pack)?

    HTML4 strict: border=“0” is deprecated, how to replace it

    How to make pagination's circle of slider using CSS only?

    How to center this rotating image (CSS animation)

    How to have 3 sections in a row

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How to use opacity when not use rgba color in css?

    How to make vertical menu with emenu extension in Yii?

    How to draw error icon with css only,exactly like in the image

    How to get these timestamps, which come after in the html, to float right on the same line