CODEWITHSUNDEEP
javaliferayvaadinvaadin-valo-theme
jotasies
jotasies

Reputation: 101

How to change Vaadin Valo Theme to Metro?

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.

Upvotes: 5

Views: 4999

Answers (2)

jotasies
jotasies

Reputation: 101

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.

Upvotes: 4

André Schild
André Schild

Reputation: 4754

Changing themes can be done from the java code.

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

Upvotes: 1

Related Questions