custom css

Flow
1

I have problem with custom css with vaadin. Everything is ok if I declare in my MainUI.java file

@Theme(“valo”)
@SpringUI
public class MainUI extends UI {
…

Everything is ok… but if I add my new template. In my project folder in eclipse: Project-New-Other-Vadin Theme

After that I have in my MainUI.java file:

@Theme(“myCustomTheme”) @SpringUI public class MainUI extends UI { …

And I see only plain text if I refresh my page :confused:

My template file:

@import “…/valo/valo.scss”; @mixin myCustomTheme { @include valo; // Insert your own theme rules here }

What can I do that I have a valo theme but I could change some css rules?

What should be the path to custom template?

2

Hi!

The path to your template should be something like src/main/webapp/VAADIN/themes/myCustomTheme
There should be a myCustomTheme.scss.

Add a file like customizing.scss in this folder.

Change your myCustomTheme.scss to:

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

@mixin myCustomTheme {
@include valo;
@include customizing;
}

customizing.scss should look like

@mixin customizing { // your css rules } Hope I could help!
No warranty! :slight_smile: