Valo Theme Style Metro

Flow
1

Hi,
how can I choose the Metro style of valo theme ?

I choose skin like this:

@Theme("valo") public class MyVaadinApplication extends UI { ... } But how can i set up the metro skin?

Thanks :wink:

2

You need to create a new Valo based theme in your application and then copy/paste the Metro settings from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

3

Hey Dom,

As Artur said, you’ll need to setup your own theme.

So,
@Theme()
 in your UI class, and add the following to your theme’s main file (
WebContent/VAADIN/themes//<your-theme.scss>
):

$v-app-loading-text: "Metro Valo";

$v-font-family: "Source Sans Pro", sans-serif;
$v-app-background-color: #fff;
$v-background-color: #eee;
$v-focus-color: #0072C6;
$v-focus-style: 0 0 0 1px $v-focus-color;
$valo-menu-background-color: darken($v-focus-color, 10%);
$v-border: 0 solid v-shade;
$v-border-radius: 0px;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-textfield-border: 1px solid v-shade;
$v-link-text-decoration: none;
$v-overlay-shadow: 0 0 0 2px #000;
$v-overlay-border-width: 2px; // For IE8
$v-window-shadow: $v-overlay-shadow;
$v-selection-overlay-background-color: #fff;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-panel-border: 2px solid v-shade;

@import "../valo/valo.scss";

@mixin <your-theme> {
  @include valo;
}
4

okay but how can i create a new valo based theme ?

can i only create a folder like WebContent/VAADIN/themes//<your-theme.scss> ?
I don´t have a webContent folder in my project

5

Using Maven? Create the file in src/main/webapp/VAADIN/themes/mytheme

6

hm i created the project with intellij idea.

I try to switch in Eclipse. I think thats the better solution…