Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Change default color of a popupPanel ?

 
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 !

 
Sheriff
Posts: 3036
12
Mac IntelliJ IDE Python VI Editor Java
  • 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.
 
Saloon Keeper
Posts: 22490
151
Android Eclipse IDE Tomcat Server Redhat Java 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: 3036
12
Mac IntelliJ IDE Python VI Editor Java
  • 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 !
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
    Bookmark Topic Watch Topic
  • New Topic