Override body style with CssResource

[Charles Chan]

Hi, I am relatively new to GWT. I am creating a GWT application that will be embedded into a DIV of an existing webapp . Obviously, I would like to keep the existing webapp's styling, especially on the common elements, e.g. body, td, select, etc.

I've read that CssResource is the way to go. So, I gave it a try.

My .gwt.xml has the following lines:

  <inherits name='com.google.gwt.user.theme.standard.Standard'/>

  <inherits name="com.google.gwt.resources.Resources" />

In my css file, I put the styles of the webapp there. I created the ClientBundle and inject my CSS in my EntryPoint.

All seems fine. However, when I invoke the app. on IE8, I see the GWT Standard styles applied first and in a flash, my overridden styles are applied.

So, I think I am overriding the styles successfully. However, how do I avoid that "flash" when the Standard styles are being applied before my styles?

Thanks in advance.

Charles

[Charles Chan]

I should correct myself that it's not really a "flash" (which implies a page refresh). Instead, I saw the Standard stylesheet applied and then in a split second, my stylesheet is applied. 

Charles

[Charles Chan]

I looked at the way the CSS files are loaded. Sure enough, the standard.css file is loaded first and then  my custom CSS is loaded. 

Although the end result is what I want (my styles override the standard ones), the user will see the standard styles in a split second before they see my styles.

After looking through the web, I think the only way is to modify the actual standard.css file and remove the common tags (body, td, etc.) manually before I package it into my app.

Charles

[Jens]

You can inherit StandardResources.gwt.xml instead of Standard.gwt.xml. When you do so, only the images used by the standard theme will be copied to your app folder and no CSS will be automatically included in your host page.

Then you create a new css file and copy everything from gwt's theme to your new css file and make modifications to it. Then you create a ClientBundle like

interface AppClientBundle extends ClientBundle {

  @Source("yourModifiedTheme.css")

  @NotStrict //Not sure if its needed but I guess it is.

  CssResource themeCss();

}

and instantiate it in your onModuleLoad():

public void onModuleLoad() {

  AppClientBundle bundle = GWT.create(AppClientBundle.class);

  bundle.themeCss().ensureInjected(); //injects the CSS into the HTML page.

}


The result is:

- The CSS code is now embedded in your JavaScript file, which saves a download request (you dont have a <link href="theme.css" .... /> tag anymore)

- You can control when the CSS should be injected into your HTML file during app startup.

-- J.

[Charles Chan]

Thank you Jens. That's exactly what I missed (StandardResources). Instead of making the modified css as pat of my ClientBundle, I serve it as a flat CSS file. It works perfectly! I thought this should be a rather common thing to do but apparently not....

Charles