GWT theme style overrides my css style

I have some html files with their own css. I want to use them in a gwt application so i copied the html and the css files in the application.

The problem is when i open the html it uses the gwt theme style. For example in my css the html 'body' background color is black, but it looks white unless i deactivate the theme.

How could I override the gwt theme style and use my css styles?

Solution 1:

This post on the GWT mailing list describes an alternative solution. You have to create a new ClientBundle which references your CSS file:

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface Resources extends ClientBundle {

      public static final Resources INSTANCE = GWT.create(Resources.class); 

      @Source("style.css")
      @CssResource.NotStrict
      CssResource css();
}

And then inside your onModuleLoad() method you have to inject the CSS file:

public class YourApp implements EntryPoint {

    public void onModuleLoad() {
        //...
        Resources.INSTANCE.css().ensureInjected(); 
        //...
    }

In my opinion this is the cleanest and easiest way to override the styles.

Solution 2:

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.

Solution 3:

You can override the styles of GWT by using the keyword !important in all your css of the html files, for example, if one of your html file contains this css:

background-color:#000000;

Then you should write it like this:

background-color:#000000 !important;

Do the same for all your styles in html files.

Note that using !important is not the best way, if you can find any better alternatives you should go for them first.

Solution 4:

In addition to using !important you can also rely on CSS Selector Specificity.

Most (all?) of the GWT styles are stated using just class eg:

.gwt-DisclosurePanel .header {
    color: black;
    cursor: pointer;
    text-decoration: none;
}

To override this you can use !important or you can be more specific in your selectors eg:

table.gwt-DisclosurePanel .header {
    text-decoration: underline;
}

How does this work? This works because adding the element name (table) to the class in the selector makes it more specific than just the class alone. This will override other styles even from stylesheets listed lower in the header.

Giving your widgets IDs and using those is even more specific.