How to apply proper CSS with GWT components?

Question

I have a gwt application which I need to apply custom themes for specific widgets, so I can maintain the Standard gwt CSS (for other widgets that I don't need to apply css to) in the gwt.xml file :

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

I am using ClientBundle and CssResource approach in my app. I have applied simple css however I need to make a css that will be able to apply css for: selected and not selected, hover and push events/actions on a widget, just like what the standard gwt css provides.

What to write in the my css file so that for a MenuBar when I apply this:

ManuBar menuBar = new MenuBar(false); 
menuBar.setStyleName(AppResources.INSTANCE.css().menuBar())

I will get the same MenuBar effects of a standard MenuBar css of gwt? With the App.css I have below, I just get a black menubar and the font-color of the menubar does not change, I think there is a proper way to apply css with gwt widgets, however I cannot find a good resource about this on the web. What I am trying to accomplish is to be able to change the menubar color theme to say, black, chrome or whatever color but still make the widget look like a real menubar.

App.css:

.menuBar {
    background:#3c3b37;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
}

Daniel · Accepted Answer · 2011-07-18 04:51:25Z

3

I have a feeling you might be experiencing the problem lots of us face when we forget to call ensureInjected on the CssResource. The CSS never gets added to the page, and so it looks like it's not working.

AppResources.INSTANCE.css().ensureInjected();

answered Jul 18, 2011 at 4:51

Daniel

10.3k3 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashok · Accepted Answer · 2011-07-18 02:08:41Z

-1

why not try simply with menuBar.setStyleName("menuBar"); I'm sure this will work.

answered Jul 18, 2011 at 2:08

Ashok

1,9523 gold badges23 silver badges30 bronze badges

2 Comments

Daniel Over a year ago

This won't work if the OP's using a ClientBundle for the CSS, because the CSS class name will be obfuscated by the generator.

quarks Over a year ago

@Ashok, perhaps you're right. I just used the plain old setStyleName with the same old CSS file.

Collectives™ on Stack Overflow

How to apply proper CSS with GWT components?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related