Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Valo is *huge*. Scale down to Reindeer size?

Basil Bourque
8 years ago Oct 27, 2014 12:08am

The new Valo theme, default in Vaadin 7.3 apps, has ginormous widgets about 2-3 times bigger than the widgets in the previous default Reindeer theme. Yes, this kind of look is now "hip" with all the kids using Android and iOS 7/8. But for business-oriented desktop-style apps, the Valo size is too large.

Valo's claim to fame is that it is built to be adjustable and easy to morph just a few lines of Java and/or CSS code. Has any one experimented with altering Valo to be sized similar to the Reindeer theme? Any source code or instructions to share?

I do not want to learn how to make groovy/cool/artsy changes to the theme. I'm looking simply for the easiest and safest way to get the Valo widgets’ size under control.

In the short term, I will continue to override the default to use Reindeer, as described on this StackOverflow.com Question. But longer term, the Vaadin team is betting big on Valo. Eventually Reindeer will fall out of favor, so I would like to learn how to transition.

I did open Ticket # 14,909 to suggest providing a switch to force Valo to re-size to Reindeer scale

I cross-posted with StackOverflow.com as that is a good place for final answers, and this forum is good for discussion.


Johannes Dahlström
8 years ago Oct 27, 2014 8:25am
Basil Bourque
6 years ago Mar 27, 2017 11:11pm
Christopher Boyd
5 years ago Dec 06, 2017 6:22pm
Graham Stephenson
5 years ago Mar 06, 2018 9:59pm

Add this to your scss and see if it helps. I'm pretty sure I got this from Matti in another post somewhere.

// These global variables emulate the Reindeer theme using Valo
// begin
//$v-app-loading-text: "Migrate Reindeer Theme";
$v-font-size: 12px;

$v-unit-size: 26px;
$v-unit-size--small: 20px;
$v-unit-size--tiny: 18px;

$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;
// end Reindeer emulation