清除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 样式的详细说明)

使用&lt;h:outputStylesheet&gt; 将其包含在模板的&lt;h:body&gt; 中(在所有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-widgets,字体大小将不断减小。试试下面的(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-widgets 中的字体大小增加。

默认样式通常如下:

.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-widgets 中的字体大小增加。

通过添加更具体的 .ui-widget .ui-widget 选择器并将字体大小设置为 100%(或 1em),您将确保获得一致的字体大小,无论您将组件嵌套多深。

【讨论】:

我有一点疑问,如果我输入&lt;p:dataTable&gt;,而不是&lt;p:button value="Normal"&gt;&lt;/p:button&gt;,组件大小似乎没有调整大小。可能是什么原因?此外,如何将字体类型更改为 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 数据表?

如何使用自定义样式覆盖默认的 PrimeFaces CSS?

PrimeFaces Datatable 不显示任何样式

PrimeFaces自动完成多种样式但具有Multiple = false

如何使用 PrimeFaces 在 JSF 上重定向?

Primefaces:如何在 primefaces 3.5 中为菜单栏设置粘性