Remove gradients from richfaces controls

Question

I'd like to use the richfaces panel as its basically the right shape and is skinnable, so I can change font, colour etc. However, as part of the default skin the horizontal bar containing the header has a gradient. My design has a flat simple colour with no gradient of any kind.

How do I stop richfaces adding a gradient?

If possible I'd like to utterly remove every mention of the gradient from the CSS to avoid bloat and additional HTTP requests for images. i.e I want to render:

background-color: black;

and nothing else at all.

I'm using plug and skin.

---

It seems that like this question the answer is that its probably not possible without changing richfaces. Thanks for the input.

Answer 1

Hey! Why dont you use the plain skin? Check this out http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?s=plain

As you can see there I've set the skin to type 'plain' which seems like what you want for your components.

Answer 2

Add to your web.xml file.

<context-param>
  <param-name>org.richfaces.SKIN</param-name>
  <param-value>plain</param-value>
</context-param>

Then you can use your plug-n-skin to modify it.

EDIT:

RichFaces has a skin system built in called Skinnablity. Skinnability is a high-level extension of standard CSS. You can create your own skin file to use in your application(jboss documentation).

In the richfaces-impl jar, the folder /META-INF/skins contains all the skin files (.skin.properties). Copy one and rename name it, modify what you want. You will have to rebuild the jar.

Answer 3

Theres an example on the richfaces site to do this for dataTables with CSS. The docs for rich:panel says the class for the header is rich-panel-header, so I think the CSS would be:

.rich-panel-header {
     background-image:none;
     background-color:transparent;
}

Edit: Its worth noting that your CSS containing these mods have to be loaded after the Richfaces skin your loading as any CSS loaded after this one may overload it.