GWT theme style overrides my css style

Question

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?

Answer 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.

Answer 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.

Answer 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.

Answer 4

I know it's not very elegant but I found it rather effective to replace the standard.css file in the output files generated by GWT with an empty file.

(Maven can take care of that reliably.)

Answer 5

The solution <stylesheet src="CustomStylesheet.css" /> is deprecated and did not work with the new superdevmode.

A solution that worked for me (using GWT 2.7) was to create a new custom theme:

projectPackage/themes/MyCustomTheme/MyCustomTheme.gwt.xml

<module>
    <stylesheet src="gwt/MyCustomTheme/MyCss.css"/>
</module>

projectPackage/themes/MyCustomTheme/MyCustomThemeRessources.gwt.xml

</module>

projectPackage/themes/MyCustomTheme/public/gwt/MyCustomTheme/MyCss.css (Note: removing the gwt/MyCustomTheme/ part of the path worked in devmode but didn't work in deployed version, of cause you can still rename 'MyCustomTheme' to something of your liking)

The css file you want to use

Project.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
        "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="Project">

(...)

<!-- Inherit GWT theme.  e.g. the Clean theme -->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Our custom theme      -->
<inherits name='projectPackage.themes.MyCustomTheme.MyCustomTheme'/>

(...)

</module>

Note: You can get a sample custom theme using http://gwt-theme-generator.appspot.com/ and extracting the downloaded .jar file.

Answer 6

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.

Answer 7

That's easy. Just put your CSS link under the GWT's module script:

<script type="text/javascript" src="myapp/myapp.nocache.js"></script>

<link rel="stylesheet" href="myapp.css" type="text/css">