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
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
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
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;
}
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
Using Maven? Create the file in src/main/webapp/VAADIN/themes/mytheme
hm i created the project with intellij idea.
I try to switch in Eclipse. I think thats the better solution…