Win a copy of Cross-Platform Desktop Applications: Using Node, Electron, and NW.js this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Change default color of a popupPanel ?  RSS feed

 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a popupPanel:



I´m using this example:

Simple popup example


I want to change the color, the default color is blue, I want to change this color to Red or Green, is it possible ?

If it is relevant, i´m using richfaces 4.

Thanks in advance !

 
Greg Charles
Sheriff
Posts: 3014
12
Firefox Browser IntelliJ IDE Java Mac Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you look at the rendered HTML, you'll see a div with class rf-pp-cnt-scrlr. I think what you're trying to do is apply a style to that div, right? Looking at the documentation, I believe that just adding something like styleClass="myPopupClass" as an attribute to the rich:popupPanel tag would work. Of course, you'll have to write the CSS for that class as well. I'm not set up to test RF 4, so I can't tell exactly where the class attribute gets rendered. If it's too high up in the hierarchy and that causes a problem, you could apply your style directly to rf-pp-cnt-scrlr instead, but that's sort of ugly. There are attributes for "headerClass" and "controlsClass" as well, so with some combination of those with "styleClass", I"m sure you can achieve whatever effect you're looking for.
 
Tim Holloway
Bartender
Posts: 18662
71
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There are 2 options here.

One is to "skin" the popup. Skinning is the act of changing the appearance of the entire app by supplying an alternative set of "rf-xxxx" classes of your own. You will notice that the menubar on the top of your example webpage allows you to select a skin for that site, in fact.

The other option - for just that one small part of the webapp - is to supply an override style or styleClass to the rich:popupPanel tag. When you look at the generated HTML you should see a class attribute that included both the popupPanel's rf-pp-cnt-scrlr style and your own supplied class (assuming you used styleClass= and not style=. Since it appears later in the list, the style settings you define in your own style information will override whatever's in the rf-pp-cnt-scrlr class definition.
 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I put this in my file layout.css:



Thanks for all.
 
Greg Charles
Sheriff
Posts: 3014
12
Firefox Browser IntelliJ IDE Java Mac Ruby
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Oops, sorry. You wanted to change the header, not the body of the popup. In that case, yes, redefining the rf-pp-hdr background style works. Adding a headerClass attribute, and putting the background style into that class would also work.
 
Edson Cezar
Ranch Hand
Posts: 119
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No problem, thanks Greg Charles, every post was very helpful !
 
Consider Paul's rocket mass heater.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!