5

I'm trying to change Valo theme from Default to Metro. In the demo page(http://demo.vaadin.com/valo-theme/) you can select from different themes for Valo, see top-right corner. I wold like to have Valo based on Metro styles but cant find any function or variable to change it.

I'm need to change the theme for some Liferay portlets we are building on Eclipse.

jotasies
  • 101
  • 1
  • 6
  • why not have a look at the source, how they do it? for the act of actually changing: https://github.com/vaadin/valo-demo/blob/master/src/main/java/com/vaadin/tests/themes/valo/ValoThemeUI.java#L390 and for the theme itself: https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes/tests-valo-metro – cfrick Mar 27 '15 at 11:31
  • Yea thanks, they use a set of variables just to change the look of the Valo theme. I test it today and worked fine. Will post an answers just in case. – jotasies Mar 27 '15 at 17:59

2 Answers2

4

Digging on the Valo Demo Source code, find that setting a number of values you can change the Scheme or theme for Valo, you can check how they manage there style for Metro on: https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-metro/_variables.scss, if needed thet also have the other themes: https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes

This are the variables that they use to change the scheme to 'Metro':

$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;

Just import or include this on your theme file.

jotasies
  • 101
  • 1
  • 6
1

Changing themes can be done from the java code.

Look at this question in Stackoverflow or directly in the Vaadin Wiki

Community
  • 1
  • 1
André Schild
  • 4,592
  • 5
  • 28
  • 42
  • Thanks, but I´m trying to change it using just the Valo theme, on the SCSS , as it have different schemes. Just find the solution by setting different variable values in a way they give the Theme a different style. – jotasies Mar 27 '15 at 17:47