Richfaces 样式类重新定义答案

【问题标题】：Richfaces style classes redefinitionRichfaces 样式类重新定义
【发布时间】：2011-11-11 14:42:15
【问题描述】：

我花了一整天，无法更改rich:panel 样式类。这是页面：

    <!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>

而且结果和不加样式类一样。

【问题讨论】：

那些样式类名称表明您使用的是 RichFaces 3.x 而不是 RichFaces 4.x。这是真的吗？
你能在 mozilla 上使用 firebug 或 webdeveloper 等工具识别 CSS 吗？
是的，我已经做到了。我发现这种样式类适用于 RichFaces 3.x。 RichFaces 4.x 的类。是 rf-p、.rf-p-hdr 和 .rf-p-b。我可以完全覆盖它们吗？

标签： css jsf richfaces

【解决方案1】：

你插入这个 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>

【讨论】：

我已经测试过了，它唤醒了我。您尝试使用外部 CSS 文件，例如。 richfaces.css

【解决方案2】：

丰富的面板有属性Style,Styleclass来附加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>

【讨论】：

是的，但我想像这里一样重新定义类：[link]docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/…
在 firefox 上使用 firebug 看看为什么你的样式会被默认样式覆盖。

【解决方案3】：

要更改 Richfaces 4.x 的 Rich:panel 的样式类，我们必须使用 rf-p、.rf-p-hdr 和 .rf-p-b 类。例如：

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

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

【讨论】：

【解决方案4】：

在您的 html 文件中执行以下操作：

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

你的 CSS 应该是这样的：

.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;
}

【讨论】：