How to change rich:popupPanel background opacity

[vpenugo]

Hi,

I want to change the rich:popupPanel background opacity. It is using below style class to show the background opacity. If I override this class it is applying to all popup panels in applications. but I want to change this style for only one popup in my application. So, how can I change the opacity value for a single popup. Please help me to change style of popup panel.

    .rf-pp-shade {

      filter: alpha(opacity=50); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

    }

[michpetrov]

Every component has a styleClass attribute, use it to set a parent class for the selector - .yourStyleClass .rf-pp-shade {…} (btw that alpha filter only works in IE)

[vpenugo]

Thank you Michal for your quick Response. I made the changes as you mention. but nothing happens. below is the changed style class. please correct me if I did any wrong here. if I use styleClass on rich:popupPanel it is applying to the inner div. if you see the generated html, It has two div elements one is for background to cover entire screen with opacity and another one is having our content. if we apply styleClass it is applying to the inner div which having out content.

Changed Code:

<h:outputStylesheet>

    .progressStyle .rf-pp-shade {

      filter: alpha(opacity=1); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

    }

</h:outputStylesheet>

<rich:popupPanel id="modalPanelProgress"  autosized="true" modal="true" immediate="true" styleClass="progressStyle">

    ......

</rich:popupPanel>

generated HTML code

if you see the above code our style class is applied to inner div which having 'rf-pp-cntr' style class.

[vpenugo]

Michal, sorry if I am wrongly understood your response, If I apply style like below it is working..

  #modalPanelProgress_shade

  {

       filter: alpha(opacity=1); BACKGROUND-COLOR: rgb(208,208,208); WIDTH: 100%;

  }