Location of the css file

Hi,
I’m a beginner on vaadin framework. I use spring boot and maven for my application.
I would like to use a css file to custom my component in my project but it doesn’t work.
I’ve looking for in the web to fix my problem but nothing work and I try now to post in this forum.
To test first, I try to add a border to my layout.

I put my css file in : My project/frontend/styles/shared-styles.css

in this file there are only these line

.layout-with-border {
    border: 1px solid black; 
}

In the code of my pages I write these lines

@Route("ChangePwd")
@CssImport("./styles/shared-styles.css")
public class ChgPasswordView extends VerticalLayout {

public ChgPasswordView() {

		HorizontalLayout hlLayout = new HorizontalLayout(vlLayout0);
		
		hlLayout.addClassName("layout-with-border");
		add(hlLayout);
		}

Is the file .css is located at the good place ?

Thank you for your help

Your code looks like it should work. Here’s how I tried it myself:

@Route("ChangePwd")
@CssImport("./styles/shared-styles.css")
public class ChgPasswordView extends VerticalLayout {

    public ChgPasswordView() {
        Button button = new Button("Some content for the VerticalLayout");
        VerticalLayout vlLayout0 = new VerticalLayout(button);
        HorizontalLayout hlLayout = new HorizontalLayout(vlLayout0);

        hlLayout.addClassName("layout-with-border");
        add(hlLayout);
    }
}

and I have /frontend/styles/shared-styles.css with the same styles as your example. I’ve attached a screenshot of how it looks for me in the browser.

18480153.jpg

Thank you for your answer.

I try your code, and I haven’t the border. I don’t understand, I’ve followed all the topic but
without succes.

To be sure I’ve attached my maven project structure to see where I have my css.
Can you confirm that’s correct please ?
To complete, I don’t if that can help but when I want to acces to an image I have to put it in the folder
src/man/ressources/images. To access to it for example I use this code

getResourceAsStream("/images/LogoSteel.png")

I precise it because I’ve seen that other user don’t store their image in this folder ?!

18480217.png

Looks ok to me. If you download a fresh V14 Spring starter project from here: https://github.com/vaadin/skeleton-starter-flow-spring/archive/v14.zip there are some predefined styles there. Maybe you can test that out?

Ho yeah !!! It’s work now.
I have run a “Maven Test” and now I see the border. Perhaps it’s necessary to recompil the file
or other thing ?!
Now I have the proof that my file is at the right place

Thank you for your help.

Good to hear you got it working!

Just a last question, do you know how to change the bacground colour of the page, not the layout ?

Should be enough to set the color of the <body> element:

body {
    background-color: green;
}

OK, sorry as HTML. Thank you for all your help.