Gwt Theme Style Overrides My CSS Style

GWT theme style overrides my css style

Like Sarfaz said - !important should be your last resort as it kind of defeats the whole concept of Cascading Style Sheets.

Anyway, in GWT, in order to easily override the core GWT styles contained in the theme you selected, you should locate your module file (the one that has a file name ending on *.gwt.xml), then locate the line where you declare your theme and put your custom/whatever stylesheet after it, like this:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

Note, however, that for GWT 2.0 CssResource and UiBinder is recommended.

Be sure to read the appropriate section of the docs for more pointers.

How to override default CSS in modern GWT applications?

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.

Overridden GWT CSS styles not being applied after deployment

Your problem ist that the styles are not obfuscated in dev mod, so they will look like .com-google-gwt-user-cellview-client-DataGrid-Style-dataGridEvenRow. When you compile and deploy a war file then all files are usually obfuscated and will look like .GKY5KDJCI. so in production you are not overriding the styles.

you can change the obfuscation level in your gwt.xml file with the property:

<set-configuration-property name="CssResource.style" value="pretty"/>
other available options are: debug, stable, stable-shorttype, stable-notype. default is obfuscated.

anyway you should follow the apporach suggested by Youssef Lahoud and provide a custom css resource for your datagrid.

GWT- overriding theme CSS

Finally, a solution amongst all the mis-information,
GWT theme style overrides my css style

See comment: "You have to create a new ClientBundle which references your CSS file".

How to override default styles in GWT without using !important

It is normally better to use css specificity to override styles.

As long as your additional rule has a higher specificity than the rule you are trying to override, it should work.

---

Related Topics