清除primefaces样式
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除primefaces样式相关的知识,希望对你有一定的参考价值。
参考技术A 我也遇到这个问题,想把原有样式去掉,添加新的自己定义的样式,请我怎么处理呢?Primefaces 中全局更改的默认样式
【中文标题】Primefaces 中全局更改的默认样式【英文标题】:Globally changing default style in Primefaces 【发布时间】:2012-02-27 04:10:06 【问题描述】:我应该如何在全局范围内更改并应用更改到 primefaces 的默认样式并且仅一次?
.ui-widget,.ui-widget .ui-widget
font-size: 90% !important;
目前,我将这个 CSS sn-p 嵌入到每个 XHTML 页面的头部。
<head>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget
font-size: 90% !important;
</style>
</head>
【问题讨论】:
您在项目中使用模板吗?或者您是否有标题页或任何其他页面,它们是您所有页面的一部分或包含它们? 不,我没有使用模板,我可以有一个标题页来包含它,这是执行此操作的最佳方式吗? 这就是我在我的项目中所做的,添加了类似的内容: 在所有页面中出现的页眉页中... 【参考方案1】:创建样式表文件:
/resources/css/default.css
.ui-widget, .ui-widget .ui-widget
font-size: 90%;
(请注意,我删除了 !important
“hack”,另请参阅 How do I override default PrimeFaces CSS with custom styles?,了解如何重新定义 PF 样式的详细说明)
使用<h:outputStylesheet>
将其包含在模板的<h:body>
中(在所有PrimeFaces 自己的样式表之后,它将自动重新定位到HTML 头部的end):
<h:body>
<h:outputStylesheet name="css/default.css" />
...
</h:body>
如果您没有使用主模板,因此需要在每个页面中包含它,我建议重新考虑您的页面设计并利用 JSF2 Facelets 模板功能。这样,您只有一个主模板文件,其中定义了头部和身体的所有默认值。另请参阅此答案以获取具体示例:How to include another XHTML in XHTML using JSF 2.0 Facelets?
【讨论】:
上面的 css 导致 selectOneMenu 在下拉菜单中显示水平滚动条,因为菜单本身的大小减小了,但每个菜单项仍然具有较大的字体。但是,当我删除逗号后的双 .ui-widget .ui-widget 时,下拉菜单似乎还可以。也许我需要复习一下我的 CSS,但我不明白重复的 .ui-widget .ui-widget 是什么意思。【参考方案2】:我建议使用:
.ui-widget
font-size: 90%;
.ui-widget .ui-widget
font-size: 100%;
而不是 BalusC 的方法,除非您喜欢当您将 JSF 组件嵌套在一起时字体大小会减小。
我同意 BalusC 的观点,即您应该创建一个样式表并考虑模板化,但我不同意所建议的 CSS(尽管我还没有决定使用 !important
!)。
Primefaces 3.1 user guide 的第 8.4 节建议使用
.ui-widget, .ui-widget .ui-widget
font-size: 90% !important;
类似于 BalusC 的建议,但使用 !important
。
这将做两件事:
-
将
ui-widget
类组件的字体大小设置为90%
(父母的)
用ui-widget
设置组件的字体大小
类 和 是另一个组件的子组件,ui-widget
上课至 90%(父母的)
您真的要将嵌套ui-widget
的字体大小设置为 90% 吗?如果您有 2 或 3 层嵌套的 ui-widget
s,字体大小将不断减小。试试下面的(Primefaces)JSF 标记,你就会明白我的意思了。
<h:form>
<p:button value="Normal"></p:button>
<p:panel>
<p:button value="A bit smaller"></p:button>
<p:panel>
<p:button value="Even smaller again"></p:button>
<p:panel>
<p:button value="Tiny"></p:button>
</p:panel>
</p:panel>
</p:panel>
</h:form>
我相信标准 jQuery CSS 中需要.ui-widget .ui-widget
的原因是为了防止出现相反的问题:嵌套ui-widget
s 中的字体大小增加。
默认样式通常如下:
.ui-widget font-family: Verdana,Arial,sans-serif; font-size: 1.1em;
.ui-widget .ui-widget font-size: 1em;
如果没有为.ui-widget .ui-widget
定义的样式,则应用于.ui-widget
的默认font-size: 1.1em
样式会导致嵌套ui-widget
s 中的字体大小增加。
通过添加更具体的 .ui-widget .ui-widget
选择器并将字体大小设置为 100%(或 1em),您将确保获得一致的字体大小,无论您将组件嵌套多深。
【讨论】:
我有一点疑问,如果我输入<p:dataTable>
,而不是<p:button value="Normal"></p:button>
,组件大小似乎没有调整大小。可能是什么原因?此外,如何将字体类型更改为 ariel 或 sans 等?还是我需要明确提及.ui-datatable
?
感谢猎犬。我很少不同意 BalusC 的答案,但你的答案很准确,并且准确地解决了我自从开始使用 PF 以来一直遇到的问题(很好地解释了为什么它也是一个问题)。
@wobblycogs 谢谢 - 我认为这是我唯一一次质疑 BalusC 的答案(这让我怀疑自己!) - 他的 JSF 知识令人难以置信,而且 Omnifaces 很简洁。
@HoundDog 你知道我该怎么做才能减少所有primefaces组件的大小,而不仅仅是字体。谢谢
@BalusC,你怎么看?我遇到了猎犬用你的方法描述的问题。【参考方案3】:
它适用于以下 css
body
font-size: 75% !important;
.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
font-size: 100% !important;
【讨论】:
【参考方案4】:这很好用。
.ui-g
font-size: 13px;
【讨论】:
以上是关于清除primefaces样式的主要内容,如果未能解决你的问题,请参考以下文章
如何使用自定义样式覆盖默认的 PrimeFaces CSS?