How to get the css styles from showcase SuggestBox?

[membersound]

I'd like to apply the styles from the showcase SuggestBox: http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwSuggestBox
Especially I like the thin-round borders around the box.

How can I do this when using Standard theme?

This is what I tried:
    <ui:style field="styles" src="SuggestBox.css" />
    <g:SuggestBox styleName="{styles.gwt-SuggestBox} {styles.gwt-SuggestBoxPopup}"

Then copied the whole content from the showcase see to SuggestBox.css.
Also created a subfolder /images and placed circles.png there.

Though my suggestbox is still looking the same as in the standard theme (light-blue border etc).
What am I missing?

[Thomas Broyer]

The gwt-SuggestBoxPopup style has to be applied to the DefaultSuggestionDisplay, not the SuggestBox. Also make sure you declared all the .suggestPopupXxx as @external so they're not obfuscated. 

[Jens]

If you like the Showcase theme then you can simply use the Clean.gwt.xml theme in your module.

What I do to change the GWT style globally the way I want is to copy the GWT style into a ClientBundle and only inherit "<theme-name>Resources.gwt.xml" so that images get copied to the war folder.

For example I have:

BaseClientBundle extends ClientBundle {

  @Source("reset.css")

  CssResource resetCss();

  @Source("gwt.css")

  @NotStrict

  CssResource gwtCss()

}

As the names imply my "reset.css" resets HTML elements to my desired defaults so they look the same in all browsers, e.g. no border for img tags, same margins/paddings for h1-6, fonts, etc. 

In "gwt.css" I have copied one of the GWT themes so I can modify things easily. When you have inherited for example CleanResources.gwt.xml then all images are copied to the war folder but its very likely that the URLs for these images inside "gwt.css" are wrong now and you have to correct them.

In onModuleLoad() or your very first "shell" view you simply call baseClientBundle.resetCss().ensureInjected() and baseclientBundle.gwtCss().ensureInjected() to activate both.

Doing so has the benefit that GWT CSS is now embedded in your JS code, so you save one server request when the app loads. Also you can remove some CSS hacks if you dont support IE6/7 anymore. 

-- J.

[Kody]

Thomas, where would I place the @externals? Inside the css resource that I defined for the suggestPopup only?
And would I have to add @external for EVERY class that is inside there? Or could I use wildcards somehow?

2013/3/11 Thomas Broyer <t.br...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/Kts3D19E0J0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.