Navbar Background Color

Hi all, I’m looking at overwriting the default styling of the navbar. I have a css file named “vaadin-app-layout.css” that is handling it for me, and that I am importing into my view with:

@CssImport(value = “themes/matchups.gg/components/vaadin-app-layout.css”, themeFor = “vaadin-app-layout”)

I’ve specified that I want the background-color to be solid red, but for some reason the resulting color is very unsaturated, and I’m not sure why this is occurring. For example, if I change the background-color to black, it will be grey instead. Any ideas?

I’ve attached some screenshots
unknown.jpg
unknown.png

As well as this, if I set the background-color to transparent, it also appears grey

It sounds like there’s some overlaid element with partial transparency

Any ideas as to what that might be?

there’s a ::before element on the navbar with 0.8 opacity (you can use the browser’s Inspect Element on the navbar to see it)

So to change the navbar color, you need to either hide that ::before element, or apply the color to that one instead.

so, either
[part="navbar"]::before { display: none; }
or

  background: red;
  opacity: 1;
}```

thank you!

is there anywhere that this might’ve been documented? Just in-case situations such as this come up again when overwriting the styles of other components

Or is it just a case of using inspect element if something isn’t behaving as intended?

unfortunately the various stylable parts of components are not properly documented anywhere at the moment. There is partial documentation in the TypeScript API docs (linked from the top of the component pages), e.g. for AppLayout: https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-app-layout (scroll down to the Styling part).

We’re planning on adding proper styling reference documentation to the component docs pages for V24, so that will help a lot in these matters.

We’re also planning on introducing a bunch of feature-specific style properties to make styling easier, so e.g. for this we might introduce something like --vaadin-app-layout-navbar-background, so that you wouldn’t even need to target specific parts per se.

but yes, Inspect Element is definitely your friend :slightly_smiling_face:

Those would all be incredibly useful! For the meantime I’ll stick to inspect element and the Typescript API docs to get what I need :slightly_smiling_face: Thank you for this information!

Also, if I’m importing the css into my view with:

@CssImport(value = “themes/matchups.gg/components/vaadin-app-layout.css”, themeFor = “vaadin-app-layout”)

…do I still need to name the file “vaadin-app-layout.css” and place it specifically in the themes/myapp/components directory?

that’s an either-or thing: there are two ways to get css into a component:
a) the old way: @CssImport(value="any-path-and-filename.css", themefor="exact-element-name")
b) the new way using @Theme("your-theme-folder") & placing your css in themes/your-theme-folder/components/exact-element-name.css

So choose one, mixing both is not recommended and will probably cause issues or just not work at all

Here’s the documentation for the new way: https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme

Just FYI, we’re planning to simplify this in V24 by getting rid of the need for component-specific stylesheets entirely, so you can just do either @Theme("your-theme-folder") or @CssImport("styles.css") and put all your styles in styles.css or wherever you like

Actually the Styling → Getting Started page in V23 docs has been rewritten as a pretty comprehensive tutorial on the new way: https://vaadin.com/docs/latest/styling/getting-started

Using these methods which require a single CSS file for each component you wish to style (e.g. vaadin-vertical-layout.css), how would I achieve having multiple styles for the same component on different views?

For example, on one view I want the vaadin-vertical-layout styled a certain way, and then on another view I want it styled completely differently.

well, for VerticalLayout you probably don’t need a component-specific stylesheet, since it doesn’t have internal parts you can’t style from global css

but to target individual component instances, you add a css classname with .addClassName("foo"); and then you target that classname with a class selector in css

so for layouts, that don’t need their own stylesheets, you can just do

  //your styles here
}```

for components that have internal parts and thus need  their own stylesheets, you'd use the classname together with the :host() selector that targets the component's "root element", so e.g. for text-field you would have vaadin-text-field.css with

```:host(.foo) {
  //your styles here
}```

and to target the input-field part of the textfield you'd add that part selector after the :host() thing:

```:host(.foo) [part="input-field"] {
  //your styles here
}```

this is also described in the tutorial: https://vaadin.com/docs/latest/styling/getting-started/#styling.get-started.selective-styling-light-dom

You’ve been a massive help, appreciate it!