Question

我应该如何全局更改默认的primefaces样式并将其更改并应用一次？

.ui-widget,.ui-widget .ui-widget {
    font-size: 90% !important;
}

目前，我正在将这个CSS片段嵌入到每个XHTML页面的头部。

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;
        }
    </style>
</head>

Answer 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:body>将其包含在模板的<h:outputStylesheet>中（在所有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?

Answer 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设置组件的字体大小 class 和是具有ui-widget的另一个组件的子级等级为90％（父母的）

您真的想将嵌套ui-widget的字体大小设置为90％吗？如果您有2或3级嵌套ui-widget，则字体大小将继续减小。尝试以下（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中的字体大小增加。

默认样式通常如下：

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }

如果没有为.ui-widget .ui-widget定义的样式，应用于font-size: 1.1em的默认.ui-widget样式会导致字体大小在嵌套ui-widget中增加。

通过添加字体大小设置为100％（或1em）的更具体的.ui-widget .ui-widget选择器，无论您的组件嵌套有多深，都可以确保获得一致的字体大小。

Answer 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;
}

Answer 4

这很好用。

.ui-g {
    font-size: 13px;
}

全局更改Primefaces中的默认样式

4 个答案: