изменение стиля заголовка основных элементов компонента панели

Question

как я могу установить стиль заголовка компонента p: panel?я хочу установить высоту div_header панели.

<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>

Answer 1

Вы обычно используете CSS для стиля.Используйте селектор .ui-panel .ui-panel-titlebar.Вы можете найти селекторы CSS и все их свойства в каждом приличном наборе инструментов для веб-браузеров.В Chrome, IE9 и Firebug щелкните правой кнопкой мыши заголовок и выберите Проверка элемента или нажмите F12.

Вот пример того, как это выглядит в Chrome:

Для начала вы можете установить padding в 0.

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

Поместите это в .css файл, который вы загружаете <h:outputStylesheet> внутри <h:body>, чтобы он загружался после PrimeFaces по умолчанию CSS.

См. Также

• Как переопределить CSS PrimeFaces по умолчанию с пользовательскими стилями?

Answer 2

Вложите p:panel в <h:form prependId="false">.

Затем вы можете использовать селектор идентификаторов (как указано в другом ответе), так как идентификатор не изменится.

Answer 3

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