Richfaces style classes redefinition

Question

I spend all day and can't change rich:panel style class. This is the page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <title>Test</title>
    <style type="text/css">
    .rich-panel{
        border: 0px;
        background: blue;

     }
     .rich-panel-body {
        border: 0px;
        background-color: blue;
        color: orange;
        font-size: 32px;
     }
    </style>
</h:head>
<h:body>
    <rich:panel>
        <p>Hello world!</p>
    </rich:panel>

</h:body>
</html>

And the result is the same as without adding style classes.

Those style class names suggests that you're using RichFaces 3.x instead of RichFaces 4.x. Is this true? — BalusC, Nov 11 '11 at 17:05
Were you able to identify the CSS using a tool like firebug or webdeveloper on mozilla ? — r0ast3d, Nov 11 '11 at 18:39
Yes, I've done this. And i found that this style classes are for RichFaces 3.x. The classes for RichFaces 4.x. are rf-p, .rf-p-hdr and .rf-p-b. Can I override them entirely? — Svetoslav Marinov, Nov 11 '11 at 21:50

gallea01 · Answer 1 · 2015-12-18T10:06:30.287

in your html file do this:

<rich:panel headerClass="panelHeader"
        bodyClass="panelBody" >
    <f:facet name="header">This is the Header Label</f:facet>
</rich:panel>

your css should look like this:

.panelHeader {
 background-image: url();
 background-color: #87d6ed;
 height: 12px;
 text-align: center;
 vertical-align: middle;
}

.panelBody {
 background-color: #bdf0f0;
 height: 8px;
 width: 130px;
 overflow: auto;
}

score 0 · Answer 2 · answered Nov 11 '11 at 15:05

0

You insert this CSS

 <style type="text/css">     
div.rich-panel{        
 border: 0px;        
 background: blue;       
}      

div.rich-panel-body {         
border: 0px;         
background-color: blue;        
 color: orange;        
 font-size: 32px;      
}    
 </style>

answered Nov 11 '11 at 15:05

Michel Foucault

1,724
3
25
48

I have tested, It woked for me. You try to use a external CSS file, ex. richfaces.css – Michel Foucault Nov 11 '11 at 15:53

score 0 · Answer 3 · answered Nov 11 '11 at 20:06

0

rich panel has attributes Style,Styleclass to attach css

<rich:panel styleClass="somecssclass">
    <p>Hello world!</p>
</rich:panel>

or

<rich:panel style="border:0px;color:orange">
    <p>Hello world!</p>
</rich:panel>

answered Nov 11 '11 at 20:06

mohanaki

260
2
6
15

Yes, but i want to make classes redefinition like here: [link]http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ArchitectureOverview.html#customstyles – Svetoslav Marinov Nov 11 '11 at 21:43
Use firebug on firefox to see why your styles are being overriden by the default ones. – mohanaki Nov 15 '11 at 14:59

score 0 · Accepted Answer · answered Nov 14 '11 at 12:55

To change style classes of the rich:panel for Richfaces 4.x we must use rf-p, .rf-p-hdr and .rf-p-b classes. For example:

div.rf-p{        
 border: 5px;        
 background: blue;       
}      

div.rf-p-b {         
 border: 0px;         
 background-color: blue;        
 color: orange;        
 font-size: 32px;      
}

Richfaces style classes redefinition

4 Answers4

Linked