CODEWITHSUNDEEP
javasassvaadin
frauneworld
frauneworld

Reputation: 72

Vaadin, applying own theme doesn't work

I am trying to add custom theme to my Vaadin 7 project. I used the Vaadin plug-in theme creater, it created the necessary files and I included a simple background-color setting to my table, but even though reindeer theme is included it doesn't seem to work. After I apply my theme with @Theme() annotation on my UI class my table disappears and I get this (without the custom theme it looks fine):

enter image description here

I read the part of the Book of Vaadin that describes this (https://vaadin.com/book/-/page/themes.creating.html) but it still doesn't work for me. I read this part: https://vaadin.com/book/-/page/themes.html#figure.themes.theme-contents and it shows reindeer should be under themes, but it says I have to include the vaadin-themes.jar and it will work fine. I did add it, my filestructure looks like this:

enter image description here

airlinedb_customtheme.scss file's code:

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

and my theme's styles.scss:

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

What am I missing? It looks like to me that reindeer style isn't included but I have no idea why.

EDIT:Furthermore, how can I give background color for my button and my table-row?

Upvotes: 2

Views: 5314

Answers (2)

Slenkra
Slenkra

Reputation: 830

That's just a suggestion but try the names without underlines.I have never seen before scss names with underlines.

Like this:

airlinedbCustomtheme

EDIT:

Vaadin book-table

Read this at section CSS style rules.

.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 {}

To change the background color of a button then you have to remove the button wrapper and background image first:

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

Don't forget to use the !important modifier for the CSS!

.v-table { 
  background-color: red !important; 
}

Upvotes: 0

okram123
okram123

Reputation: 106

Try extract the VAADIN/themes/reindeer directory from the vaadin jar file and add it to your VAADIN/themes/ directory inside WebContent, this way your themes/css will be served statically and your @import should work as expected.

Upvotes: 0

Related Questions