How to create and use custom styles (solved)

Flow
1

Hi all, I’m new to Vaadin to apologies for the noob question.

Currently I have one view that I’ve created, but the fonts and the colours of the buttons I have are not what I want.

I’ve seen that Vaadin Start has generated a “styles.css” file for me in the frontend/themes directory, which I’m guessing I’m going to have to utilise, but I’m not sure if my view is using this already.

I’ve also noticed that there is a “@Theme” annotation that can be added to a view, but I’m not sure how all this ties together and how to use it on some components but not others. As well as this, I’ve added a custom image to a button, but the image is not displaying correctly, which I believe could tie into this, but again I’m not sure (screenshot attached)

Any help with this or any resources that could explain this would be greatly appreciated. If you guys need more detail just let me know and I can provide it
unknown.png

2

Currently I’m doing all my styling in the Java class file, but I think this is not the best way of doing it, and I need to expand into css files to manage this. Code for the view: https://pastebin.com/SU3E3kKK

3

You can go through all the theming related docs https://vaadin.com/docs/latest/styling or the shortcut by Tarek https://foojay.io/today/how-to-style-a-vaadin-application/

4

The guide by Tarek has been a massive help, much appreciated!

5

Any ideas on why the image is missing?

6

It depends on the location of the image and the used servlet container, you can find more information here https://vaadin.com/docs/latest/application/resources or in the resource cheat sheet https://vaadin.com/docs/latest/advanced/loading-resources

7

How to create and use custom styles (solved)