我试图通过FireBug在生成的HTML中查看组件的名称,之后我在JSF项目中手动定义的css中更改它,但无法覆盖PrimeFaces的CSS定义。提前感谢任何想法。
答案 0 :(得分:14)
如果使用primefaces 2.2.1,请使用h:outputStylesheet标记并将其包含在h:body中,而不是h:head中,以覆盖primefaces样式表,与h:outputScript相同。
示例:
<h:body>
<h:outputStylesheet library="css" name="YOURSTYLES.css" />
<h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>
如果使用primefaces 3,请关注此博客条目 https://www.primefaces.org/resource-rendering/
答案 1 :(得分:8)
添加@Ravi已经回答的内容:
从primefaces 3.0开始,您可以自定义资源的顺序。但是,当我尝试它时,它起初没有工作。
事实证明我无法使用JSF组件来包含这样的css:
<f:facet name="last">
<h:outputStylesheet library="css" name="bootstrap.css" />
</f:facet>
相反,我不得不使用:
<f:facet name="last">
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" />
</f:facet>
只有这样,订购才开始起作用。
编辑:如果您将facet
放入body
(而不是head
),我的回答是多余的。就像拉维在他的回答中写道的那样。 (我一定以某种方式错过了。)
这也不建议这样做,因为FacesServlet
不会处理资源,而且css中的路径问题会出现。比较BalusC的answer。
答案 2 :(得分:2)
确保您的CSS文件链接位于代码中的PrimeFaces文件之后。
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=3.0-SNAPSHOT" />
<link type="text/css" rel="stylesheet" href="YOURSTYLES.CSS" />
此外,虽然它通常不是首选解决方案,但您可以在样式后添加!important以赋予它们最高优先级:http://www.w3.org/TR/CSS2/cascade.html#important-rules
答案 3 :(得分:0)
尝试为替换创建更具体的CSS规则。
最简单的方法是使用仅在您的网页上使用的特定ID预设PrimeFaces CSS定义:
#tuxi_site .ui-widget-content .ui-icon {
...
}
在“CSS Specificity: Things You Should Know”文章中了解有关CSS特异性的更多信息。
答案 4 :(得分:0)
基本上,您必须使用更明确(更强)的选择器。 CSS越具体,解释器就会给予它更高的重要性。请参阅有关CSS级联顺序的文章:http://www.w3.org/TR/CSS2/cascade.html
答案 5 :(得分:0)
如果要覆盖primefaces.css,可以通过创建空白资源/ primefaces / primefaces.css来实现。它并不完美,但使用Primefaces 5.0