Java 缩小Valo主题’；s的间距和小部件大小与驯鹿主题相同

新版本现在是Vaadin 7.3应用程序中的默认版本。此主题使用小部件（按钮、字段等）进行可视化渲染，这些小部件（按钮、字段等）比以前的默认主题大得多（宽得多，高得多）

这种外观现在在Android和iOS 7/8以及一些网站的移动应用程序中很流行。但是，这些上下文仅在几分钟的范围内用于简短的使用。相比之下，面向业务的桌面风格应用程序被人们用于更长的工作时间，可能是一天中的上下几个小时。面向业务的应用程序以更密集的格式提供更多的信息。对于这种使用，Valo主题的默认呈现是不合适的。具体地说，字体太薄、太模糊，大小对于字体和小部件来说太大

Valo声名鹊起的原因是它的构建是可调整的，并且只需修改几行Java和/或CSS代码即可。有没有人尝试过将Valo的尺寸改成与驯鹿主题相似的尺寸？有要共享的源代码或说明吗

明确地说，我的目标只是减少视觉高度和宽度以及字体大小。我不是要改变设计，我很感激能得到一些像素空间。我只是在寻找一种最简单、最安全的方法，使Valo小部件的大小与驯鹿主题中对应部件的视觉大小平行

短期内，我将继续覆盖默认使用驯鹿，如StackOverflow.com问题所述。但从长远来看，瓦丁队在瓦洛身上下了很大的赌注。驯鹿最终会失宠，所以我想学习如何过渡

我确实公开建议提供一个开关，使瓦洛自动缩小到驯鹿计划

有些人误读了这篇文章：我们不是在谈论磁盘上的存储大小。我们这里说的是像素，不是比特。视觉大小，而不是文件大小。图形布局，而不是

widgetset

优化

---

这个问题被莫名其妙地封闭为“太宽泛”。然而，它继续获得越来越多的选票。我请选民投票重新打开。

要使用valo主题替代驯鹿主题，您可以如下配置用于valo的主题变量：

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

（来源：）

---

---

本节深入解释了将这些变量放置在何处以及如何自定义主题。

当我从驯鹿主题切换到Valo主题时，我也遇到了同样的问题。在加载主题之前使用小字体大小和族解决了我的问题

$v-font-size: 12px;
$v-font-family: sans-serif;

@import "../valo/valo.scss";

---

至于投票结束，因为问题“过于宽泛”——也许落选的选民不熟悉瓦丁·特明，也不熟悉瓦洛。Valo主题是定制的，具有用于更改颜色、字体、拐角圆度、蓬松度或平坦度、动画、不透明度、边框等的各种参数。看这个。在尝试我自己的之前，我想问是否有人已经开始构建一组定制代码，以近似于上一个驯鹿主题的大小和外观。

$v-font-size

是您的起点，下一个

$v-unit-size

。他们俩都会带你走得更远。如果你关心生成代码的可视大小或文件系统大小，我打赌这个问题可能会被重新打开，那么你也可以删除问题中的所有咆哮，并明确说明。首先，将颜色更改为灰色，调整字体/字体大小，你离驯鹿不远了。毕竟，一个人必须顺应时代潮流……我对它投了更高的票，并向版主报告了它。我刚刚在我们的应用程序中实现了一个相当简单的解决方案（发布在@cfrick comment中）。为什么有人想结束这个问题？@kukis现在的valo主题演示甚至提供了一个例子，我不理解你在分隔线上的第一段。如果您只是说您的解决方案也在评论中提及，则无需对此进行解释（除了可能仅提及评论海报的信用名称）。很多时候，在堆栈溢出中，人们会简短地提到一个可能的解决方案作为评论，而其他人则会接受这个想法，通过添加细节和示例来充实它，然后发布一个答案。好吧，我只是想澄清一下，我不想“窃取”信用：）然后只需添加一个简短的注释，如“根据AliceW的评论”或“如SusanH在评论中所述”。就目前而言，开头的那一段令人困惑，让人分心。我当时就把它完全删除了。