2

我正在尝试将自定义主题添加到我的 Vaadin 7 项目中。我使用了 Vaadin 插件主题创建器，它创建了必要的文件，并在我的表格中包含了一个简单的背景颜色设置，但即使包含驯鹿主题，它似乎也不起作用。在我的 UI 类上应用带有@Theme()注释的主题后，我的表格消失了，我得到了这个（没有自定义主题，它看起来很好）：

在此处输入图像描述

我阅读了描述此内容的 Vaadin 书的部分（https://vaadin.com/book/-/page/themes.creating.html），但它仍然对我不起作用。我读了这部分：https ://vaadin.com/book/-/page/themes.html#figure.themes.theme-contents它显示驯鹿应该在主题下，但它说我必须包括 vaadin-themes .jar ，它会正常工作。我确实添加了它，我的文件结构如下所示：

在此处输入图像描述

航空公司db_customtheme.scss 文件的代码：

@import "../reindeer/reindeer.scss";
@mixin airlinedb_customtheme {
  @include reindeer;
  .v-table {
    background-color: red;
  }
}

和我主题的styles.scss：

@import "airlinedb_customtheme.scss";
.airlinedb_customtheme {
   @include airlinedb_customtheme;
 }

我错过了什么？在我看来，驯鹿风格不包括在内，但我不知道为什么。

编辑：此外，如何为按钮和表格行提供背景颜色？

4

2 回答 2

0

尝试从 vaadin jar 文件中提取 VAADIN/themes/reindeer 目录并将其添加到 WebContent 内的 VAADIN/themes/ 目录中，这样您的主题/css 将被静态提供，并且您的 @import 应该按预期工作。

于 2013-07-12T15:08:04.657 回答
0

这只是一个建议，但请尝试不带下划线的名称。我以前从未见过带下划线的 scss 名称。

像这样：

airlinedbCustomtheme

编辑：

Vaadin 书桌

在 CSS 样式规则部分阅读此内容。

.v-table {}
  .v-table-header-wrap {}
    .v-table-header {}
     .v-table-header-cell {}
      .v-table-resizer {} /* Column resizer handle. */
       .v-table-caption-container {}
 .v-table-body {}
  .v-table-row-spacer {}
   .v-table-table {}
    .v-table-row {}
     .v-table-cell-content {}

要更改按钮的背景颜色，您必须先删除按钮包装器和背景图像：

.v-button .v-button-wrap { 
  background-image: none !important; 
} 
.v-button { 
  background-image: none !important; 
}

不要忘记!important为 CSS 使用修饰符！

.v-table { 
  background-color: red !important; 
}
于 2013-07-17T10:00:39.510 回答