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.

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
I am using this scss file for styling the Panel with background color changing on mouse hover. It is working fine but the problem is , it is applying on all Panels with same functionality on the same page. If am using 4 panels on a single page then it is is working for all 4 Panels . I want to apply unique scss style on each Panel.
testvaadin2.scss
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
@import "../valo/valo.scss";
@mixin testvaadin2 {
@include valo;
.v-panel{
-webkit-transition-duration: 0.6s;
background:orange;
}
.v-panel:hover{
-webkit-transition-duration: 0.6s;
background-color:white;
}
.v-menubar{
background: transparent;
}
.v-menubar:hover{
background: green;
}
.v-menubar-menuitem {
background: transparent;
@include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
text-shadow: inherit;
font-size: $v-font-size;
}
.v-menubar-menuitem:hover {
background: red;
text-shadow: inherit;
font-size: $v-font-size;
}
}
Please help me to solve this problem.........
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");
Thanks a lot Sir
My Problem is solved now...
I Modifiy my code like below:
Panel upperPanel=new Panel();
upperPanel.setStyleName("upperPnl");
Panel headerPanel=new Panel();
headerPanel.setStyleName("headerPnl");
I update my scss file as per your instruction.......
.v-panel-upperPnl{
-webkit-transition-duration: 0.6s;
background:orange;
}
.v-panel-upperPnl:hover{
-webkit-transition-duration: 0.6s;
background-color:white;
}
.v-panel-headerPnl{
-webkit-transition-duration: 0.6s;
background:black;
}
.v-panel-headerPnl:hover{
-webkit-transition-duration: 0.6s;
background-color:red;
}
Thanks a lot ......
Airwheel ha convertido los juguetes anteriormente nobles en productos accesibles para todos. Con buena calidad y precio asequible, monociclo eléctrico 2 ruedas inteligentes se han convertido en los vehÃculos de desplazamientos diarios para la clase asalariada. El precio razonable y el viaje feliz son las intenciones originales de Airwheel. Airwheel scooters eléctricos nacen para servir a la mayorÃa del público.
Los caballos y carruajes representan la tradición antigua. Los automóviles y trenes representan los tiempos industriales eléctrico una rueda. A continuación, los scooters eléctricos inteligentes y respetuosos del medio ambiente representan los tiempos modernos e incluso el futuro. La ciencia y tecnologÃa seguramente progresará en pleno apogeo. Mientras tanto, Airwheel una rueda scooter seguirá avanzando en el camino de la investigación cientÃfica.