更改面板组件的 primefaces 标题样式答案

【问题标题】：changing the primefaces header style of panel component更改面板组件的 primefaces 标题样式
【发布时间】：2012-04-12 06:16:25
【问题描述】：

如何设置 p:panel 组件的标题样式？我想设置 panel_header div 的高度。

<p:panel id="panel" 
    toggleSpeed="500" toggleable="true">
    <f:facet name="header" >
        <p:outputPanel style="float:left;">
            <p:commandButton process="@this" id="new"
                oncomplete="dialog.show();" icon="ui-icon-plus" />
            <p:spacer width="15px;" />
        </p:outputPanel>
            <h:outputLabel value="Title" />
    </f:facet>
</p:panel>

【问题讨论】：

标签： css jsf primefaces facelets

【解决方案1】：

您通常使用 CSS 进行样式设置。使用.ui-panel .ui-panel-titlebar 选择器。您可以在每一个不错的 webbrowser 开发工具集中找到 CSS 选择器及其所有属性。在 Chrome、IE9 和 Firebug 中，右键单击标题栏并选择 Inspect Element 或按 F12。

这是一个在 Chrome 中的示例：

首先，您可以将padding 设置为0。

.ui-panel .ui-panel-titlebar {
    padding: 0;
}

将其放入<h:outputStylesheet> 加载的.css 文件中<h:body> 中，以便在PrimeFaces 默认CSS 之后加载它。

另见：

How do I override default PrimeFaces CSS with custom styles?

【讨论】：

感谢您的回复。但在我的情况下，情况有所不同。该面板位于复合组件中。而且我不想更改所有标题。如果我这样做，你说；所有标题都将被更改。我只想更改复合组件中的样式。
然后只使用更具体的 CSS 选择器？例如。 ID 选择器。可以肯定的是，您以前从未使用过 CSS 吗？在开始使用 JSF 之前，您真的从未学习过基本的 HTML/CSS/JS 吗？那我就可以更好的算出你期待什么样的答案了……
当然我以前用过css。但问题是 id 可以更改。我知道我应该使用 id 选择器，但 div 的 id 就像 form_id:composite_componenet_id:panel_id_header。所以复合组件 id 可以不同。我想知道你真的理解了这个问题。
你也可以给它一个特定的样式类，然后你可以把它添加到 CSS 选择器中。

【解决方案2】：

将p:panel 括在<h:form prependId="false"> 中。

然后你可以使用 ID 选择器（在另一个回复中提到），因为 id 不会改变。

【讨论】：

【解决方案3】：

.ui-panel-titlebar {
 //Your style-sheet code
}

【讨论】：