Css Richfaces样式类的重新定义
我花了一整天的时间,无法改变rich:panel风格的课程。这是网页:Css Richfaces样式类的重新定义,css,jsf,richfaces,Css,Jsf,Richfaces,我花了一整天的时间,无法改变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.
<!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>
结果与不添加样式类的结果相同。插入此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>
富面板具有属性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>
要更改RichFaces4.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;
}
在html文件中执行以下操作:
<rich:panel headerClass="panelHeader"
bodyClass="panelBody" >
<f:facet name="header">This is the Header Label</f:facet>
</rich:panel>
我已经测试过了,对我来说很好。您尝试使用一个外部CSS文件,例如.richfaces.cst。这些样式类名称表明您使用的是richfaces 3.x而不是richfaces 4.x。这是真的吗?你能在mozilla上使用firebug或webdeveloper之类的工具识别CSS吗?是的,我已经这样做了。我发现这个样式类是针对RichFaces 3.x的。RichFaces 4.x的类。是rf-p、.rf-p-hdr和.rf-p-b。我可以完全覆盖它们吗?是的,但我想让类重新定义如下:[link]使用firefox上的firebug来查看为什么您的样式被默认样式覆盖。
.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;
}