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.

score 3 · Answer 1 · answered Sep 01 '11 at 14:03

I realize I'm a bit late in answering this, but I thought I'd throw in my solution to this problem.

I am using RichFaces Plug-n-Skin for my project, and I am able to remove all of the gradients and predefined styles by disabling the control skinning of RichFaces. It is a simple change in the web.xml of my web project.

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

<!-- Suppress stylesheets -->
<context-param>
    <param-name>org.richfaces.CONTROL_SKINNING</param-name>
    <param-value>disable</param-value>
</context-param>

<context-param>
    <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
    <param-value>disable</param-value>
</context-param>
...

Depending on your needs, this may be a bit of overkill, but I am overriding pretty much everything on all of my RichFaces components anyway. This allows me to specify styles all I want in my Plug-n-Skin, and doesn't load any of the unnecessary default RichFace styles/images that I don't need anyway.

Hope this helps.

I stopped using RichFaces due to this issue and similar ones. I concluded it is an educational experiment that succeeded in some markets but isn't suitable for my needs. However +1 for posting something on target. — Simon Gibbs, Sep 12 '11 at 11:18

Mark · Answer 2 · 2009-03-25T01:00:50.337

1

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.

edited Mar 25 '09 at 01:00

answered Mar 23 '09 at 15:49

Mark

16,772
9
42
55

If I'm using the plain skin, how do I use my skin? The problem I have is though I'm *creating* a skin, there is already a whole bag of CSS I don't want. The plain skin is actually downloading a gradient with the same base and gradient color, seem they have the same issue :-( – Simon Gibbs Mar 24 '09 at 15:40
hmm if the plain skin is still to much css, you'll want to look at creating your own. I will edit my answer to include information on creating a custom skin. – Mark Mar 25 '09 at 00:59

Nick Thomson · Answer 3 · 2009-05-01T17:07:55.447

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.

score -1 · Answer 4 · answered Mar 23 '09 at 15:13

-1

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.

answered Mar 23 '09 at 15:13

Chris Dale

2,222
2
26
39

Thanks for the link, it shows the plain skin is suffering the same issue I am, its just hacked around it and taken on the resulting bloat. – Simon Gibbs Mar 24 '09 at 15:43

Remove gradients from richfaces controls

4 Answers4