ReNaR ReNaR -4 years ago 256
CSS Question

Change the css in Vaadin / Spring-Boot / Maven

I want to make my website more beautiful but I don't know how I can do.
The application is build with Spring-boot and Maven.
And I build the UI with Vaadin. I use the valo theme.
But I want to change the colors, sizes, font, etc.
I want to keep the default valo theme and just add my variations.
I have already seen the pages in the vaadin docs, youtube webinar and others like this.
But it is impossible. I should put the scss files in the folder near the valo folder. But the valo folder is in the jar ! I have tried a lot of possibilities and I don't know how I can do.
I have put the folder in src/main/webapp/VAADIN/themes/mytheme. But it does not work. I have specify vaadin to use the theme.
But, I don't know how Vaadin works with the scss ?
Someone can help me ?

Answer Source

I found the solution :

1) Create a folder with the name of your new style.

2) In this folder, create a CSS file with the same name (I think) and write the CSS code you want to use.

3) In the UI, insert an annotation vaadin :

@StyleSheet("http://path/to/your/CSS/file.css")

4) In the java code, in the Vaadin Object you want to change, put a style name like this :

// Java
Label label = new Label("Label 1");
label.addStyleName("style-class");

5) In the CSS file, you must have a block with the same name !

// CSS
.style-class {
    background-color: red;
}

IT WORKS !

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download