如何使用自定义样式覆盖默认的PrimeFaces CSS？
Sam*_*ian 61 css jsf themes overriding primefaces
我已经创建了自己的主题作为单独的Maven项目,并且它已正确加载.
现在我想改变组件的大小.例如,a <p:orderList>.它有一个名为的类ui-orderlist-list,它primefaces.css以固定的200x200维度定义.无论我在我身上做什么theme.css,它都会被这个属性所覆盖,我无法将内容作为<p:orderList>更广泛的内容.
对于其他组件,我可能只想覆盖组件的一个实例,而不是全部.
任何人都可以告诉我,我怎么能做到这一切？
Bal*_*usC 115
有几件事你需要考虑哪一个或多个可能与你的具体情况有关
在 PrimeFaces 之后加载你的CSS
您需要确保在PrimeFaces 之后加载CSS .您可以通过将<h:outputStylesheet>引用CSS文件放在内部<h:body>而不是<h:head>:
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF将自动将样式表重定位到生成的HTML 的末尾,<head>这将确保样式表在PrimeFaces的默认样式之后加载.这样,CSS文件中与PrimeFaces CSS文件中的选择器完全相同的选择器将优先于PrimeFaces.
你可能也看到建议把它<f:facet name="last">的<h:head>这是由特定的PrimeFaces理解的HeadRenderer,但这是不必要的笨拙,当你有你自己会打破HeadRenderer.
理解CSS特异性
您还需要确保您的CSS选择器至少与PrimeFaces在特定元素上的默认CSS选择器一样具体.您需要了解CSS特性以及级联和继承规则.例如,如果PrimeFaces默认声明样式,如下所示
.ui-foo .ui-bar {
color: pink;
}
并将其声明为
.ui-bar {
color: purple;
}
并且特定元素class="ui-bar"恰好具有父元素class="ui-foo",那么PrimeFaces的元素仍然会优先,因为这是最具体的匹配!
您可以使用webbrowser开发人员工具查找确切的CSS选择器.在webbrowser(IE9/Chrome/Firefox + Firebug)中右键单击相关元素,然后选择Inspect Element查看它.
部分覆盖
如果需要仅覆盖组件的特定实例的样式而不是同一组件的所有实例,则在其styleClass上添加自定义和挂钩.这是使用/应用特异性的另一种情况.例如:
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
border-style: none;
}
如果一个组件不支持a styleClass并且你在jsf 2.2或更高版本上,你也可以使用passtrough属性并添加一个pt:class并在输出上结束它.
<p:clock pt:class="borderless" />
永远不要使用!重要
如果您无法按顺序正确加载CSS文件或找到正确的CSS选择器,您可能会获得!important解决方法.这是简单的错误.这是一个丑陋的解决方法,而不是一个真正的解决方案.它只会长期混淆你的风格规则和你自己.本!important应只以覆盖HTML元素的硬编码值被用来style从一个CSS样式表文件属性(这反过来也是一个不好的做法,但在某些罕见的情况下不幸的是不可避免的).
也可以看看:
- 一个很好的技巧是在PrimeFaces选择器前加上`html`,以使它们更具体. (4认同)
您可以创建一个新的 css 文件，例如 cssOverrides.css
并将所有你想要的覆盖放在里面，这样升级primefaces版本不会影响你，
在你的 h:head 添加类似的东西
<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />
如果它不起作用，请尝试将其添加到 h:body
为了检查它是否工作在 css 文件中尝试这个简单的例子
.ui-widget {
font-size: 90% !important;
}
这将减少所有primefaces组件/text的大小
| 归档时间： |
|
| 查看次数： |
80299 次 |
| 最近记录： |