Where do you place custom css style sheets?

Flow
1

i’m trying to overrride a specific css class in a 3rd party plugin for vaadin,
when attempting to use CSSImport it managded to include it in the page, but it places it before the 3rd party stylesheet, when using @Stylesheet, it places it after, but it fails to find it, i tried every option i can think about, but it keeps missing it (saying 404 not found on the http://localhsot:8080/lf.css )

image
image1132×995 154 KB

2

I remember a discussion I had with @rofa some weeks ago about this topic… it’s not really possible to enforce the ordering… of the add-on does not let you handle styling, you probably need to resort to selector with higher precedence (!important cough)

3

Maybe you can also add a root css classname instead of using !important.

For example instead of .leaflet {}, use .my-theme .leaflet {}.

I don’t think it’s good idea to rely on the order of the CSS.

As a bonus nested css is now well supported: CSS Nesting | Can I use... Support tables for HTML5, CSS3, etc

1 Like
4

i was talking with chat gpt and it said i could use this:
where if i want to override the properties of leaflet-tooltip, with my own class i could use this,
and then i could use CssImport

.leaflet-tooltip.mask-label-style {

    color: gray;
    font-size:14px;
    font-weight: 700;
    background: none;
    box-shadow: none;
    border: none;
}

this seems to work, but that still doesn’t explain why StyleSheet annotations doens’t seem to work.

5

Without any details like the css you’re trying to override and the dom structure, I would say the order of the loading is different and you’re using the same css selector.

6

what i mean is that when i try to us @Stylesheet(“./lf.css”) i will get http://localhost:8080/lf.css not found

7

From the first screenshot, I think the path in the annotation should be ./frontend/If.css.

I prefer to import css from the application theme since it checks if the file is here. The stylesheet annotation doesn’t.

8

I’m so very confused by most of this. I’m not sure I’ve ever even needed to use @StyleSheet for anything, but if you really insist, then I’d suggest taking a look at Lazy-Loading Stylesheets | Advanced Styling Topics | Styling | Vaadin Docs about where the files are expected to be located within the project.

I would just use @CssImport instead, though, and then look where the files should be located from the nifty cheat sheets here: Loading Resources | Advanced Topics | Vaadin Docs. Or just use the actual application theme.

Do note, the documentation links are to the Vaadin 24 documentation, but the same things pretty much hold with older versions as well. Beyond this general information it’s pretty hard to give further pointers without knowing more details about what it is you’re trying to style.

1 Like