Override Gwt Styling

override css style by another css style in gwt

Try this

 sendButton.addStyleName("sendButton");
 Window.alert("test");
 sendButton.setStyleName("butt");

setStyleName Clears all of the object's style names and sets it to the given style.

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.

Styling a GWT Button with CSS

To avoid using GWT default style, I just use !important tag in my CSS file. You'll find here an example of doing so : Remove absolute position generated by GWT. Good luck!

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.

GWT Widget development: combining & overriding CSS

My advice - drop this idea. It will be hell to develop and maintain, and I mean it. You will constantly try to figure out which CSS file has to be updated, and then you will have to test every update in multiple places, because an update in one file can mess up with CSS from another file.

Many GWT developers prefer to use CssResource approach to CSS. I've never heard any designer favoring this solution, though.

After years of working with GWT on both the code and design sides, I strongly prefer to use a single CSS file for the entire application. CSS was built for inheritance, and this is what a single file achieves. You can define basic style, like:

input {
    height: 24px;
}

If you need to change these styles in specific widgets or parts of the application, you can set, for example, "contacts" class on the contacts page/widget, and then add this to your CSS file:

.contacts input {
    background: grey;
}

The advatantages of this approach:

• easier to enforce consistent look throughout the application
• easier to maintain your CSS, because there is one file to update, and there are no conflicts with CSS defined anywhere else
• it is an approach that most designers understand and know how to use
• it is the easiest solution if you want to create multiple skins or themes for your application
• it is easy to make your CSS adjust to different screen sizes, or define special styles for printing.

Gwt. ClientBundle. Override default css style of widget

The syntax is:

@external gwt-DialogBox;

.gwt-DialogBox { width: 60px; }

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.

---

Related Topics