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
Cause Line to Wrap to New Line After 100 Characters
Stretch a Background Image in IE8
How to Change Bootstrap 3's Glyphicons to White
Ie11 Triggers CSS Transition on Page Load When Non-Applied Media Query Exists
Linking to CSS Files from React Index
When Specifying a 0 Value in CSS, Should I Explicitly Mark the Units or Omit
How to Make Half-Square Background in CSS
How to Set Custom Fonts in Javafx Scene Builder Using CSS
Use Fontawesome Icon in Svg Without External Files
Hovering Over CSS Transition in Safari Lightens Certain Font Color
CSS Difference Between Background: and Background-Image:
How to Define Attribute Selectors in SASS
Multiple !Important Class Declarations and Precedence
Bootstrap 4 Responsive Button Size
Can't Stop CSS Animation Disappearing After Last Key Frame