Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

How to apply unique CSS style on different Panels on same web page

Mukesh Verma
6 years ago Jun 24, 2015 7:36am
Marius Reinwald
6 years ago Jun 24, 2015 8:03am

Use Panel.setStyleName (or addStyleName) to add a custom classname to specific panels. For example like this:

Panel somePanel = new Panel();
....
somePanel.setStyleName("panelWithRedBackGround");
..

Now you can target every panel with this specific classname like

.v-panel-panelWithRedBackGround{
  background-color: red;
}

.v-panel-panelWithRedBackGround:hover{
  background-color: blue;
}

if you would want the same background-color - behaviour for another component other than Panel you can define the style like:

.panelWithRedBackGround{
  background-color: red;
}

.panelWithRedBackGround:hover{
  background-color: blue;
}

This way you can also do:

Label someLabel = new Label("test");
someLabel.setStyleName("panelWithRedBackGround");

 

Mukesh Verma
6 years ago Jun 24, 2015 9:06am
scooter love love1989
6 years ago Aug 12, 2015 7:50am