Valo Components Look Very Wonky

Hello Vaadin users,

I’ve recently started exploring the Valo theme for my company’s web application. The demo
here
looks great so I started by downloading the source from Github and trying to run it on my machine. Unfortunately, and for no apparent reason, the components (especially buttons and tables) look terrible when running on my server (Tomcat 7.0.42 running in Eclipse). I’ve attached screenshots of the Tables, Buttons, and DateFields. All of these types of components are critical for my use and I would really like to have them in place! But they are unusable as it stands.

Can anyone here help me figure out how to get this theme working? If it helps, I’m using Vaadin 7.3.5 in the Eclipse IDE. I can provide more information if it helps you. Thanks very much!

17259.png
17260.png
17261.png

you can change your colors and other conigrations in your theme file. i have very bad internet connection so i can’t upload any pictures . put you can find commented configrations .

// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;

// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g  Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

$v-border: 0 none (v-shade 0.7);
$v-border-radius: 0;

//$v-background-color: hsl(130, 130%, 130%);
//$v-app-background-color: $v-background-color;

// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;


// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

uncomment what you want change.

in your case you need change …

// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;

$v-background-color is your base color .
and affects every other color.

change it to whatever you want.

also you can use vaadin class names . if you want change button’s background colors yoou can write somthing like :

.v-button{

background: myColor;
color: myTextColor;
&:hover{

background: myHoveredBackgroundColor;
}
}

and compile your theme if needed refresh your project .

right click ( if you using eclipse ) above the project name and refresh or F5…