Contact us
Get started
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.

Calling javascript synchronously by Enver Haase, 6 days ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

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

Mukesh Verma
7 years ago Jun 24, 2015 7:36am

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.........

Marius Reinwald
7 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");

 

+1
Mukesh Verma
7 years ago Jun 24, 2015 9:06am

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 ......  
      

scooter love love1989
7 years ago Aug 12, 2015 7:50am

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.