Vaadin 7 themes - dashboard as an example

Flow
1

Hello

I’m only a 1 week old Vaadin developer, so please forgive any potentially silly questions :slight_smile:

Creating UI’s looks relatively straighforward but I’m
really
 struggling with making things look cool. So I’ve downloaded the dashboard demo code (http://demo.vaadin.com/dashboard/) and looked at how its setting up buttons, for example, but I can’t make heads or tails of it:

[code]
for (final String view : new String { “dashboard”, “sales”,
“transactions”, “reports”, “schedule” }) {
Button b = new NativeButton(view.substring(0, 1).toUpperCase()
+ view.substring(1).replace(‘-’, ’ '));
b.addStyleName(“icon-” + view);

…
}
[/code]So that code seems to point to a style called “icon-sales” for example… but I can’t find a reference to it anywhere under the themes directory. Moreover the demo has a nice icon for sales, yet I can’t see it under the img directory, or anywhere else (where is it coming from??). Perhaps I downloaded an old version of the code, but pretty sure I got the latest from the Git repo.

Secondary question:
There doesn’t seem to be a whole lot of Vaadin 7 themes to download? The few I see on this site don’t seem to support 7. Is there a magic place where there are lots of themes that some generous soul has contributed?

Thanks!

2

Looking in the chrome inspector, I see from styles.css:

.icon-sales.v-nativebutton:before, .icon-sales > .v-button-wrap:before, .icon-sales.v-label:before, .v-menubar-menuitem-icon-sales:before {
content: “\1f4c8”;
}

It looks like rather than using an icon here, it is a unicode character.

3

I see thanks!

4

So is Vaadin themes a done thing? My searches have come up with nothing. Does everyone just create their own or use the few that are there? Looks like there’s very few, and fewer still that officially support Vaadin 7.

5

There are a few themes on the add-ons downloads page. If you want basic changes then the official chameleon theme might work for you too which allows you to change the colour
you can try it out here. It allows you play around and then save the theme you like

http://demo.vaadin.com/chameleon-editor/

Otherwise afaik you’ll have to create your own or use the base theme and then modify it as you need