改变f的颜色:facet name =" header"在主要方面

时间:2013-12-20 09:41:51

标签: css jsf primefaces

有没有办法可以用来改变数据表(primefaces)中facet头的颜色(一般的css样式)。

            <p:dataTable id="iddata" var="test" value="#{test.getDataValue()}"
            styleClass="borderless">
            <f:facet name="header">
                <h:graphicImage value="../../theme/images/ffolder.png" />
                <h:outputText value="Your data" styleClass="outputTextStyle"></h:outputText>

                    <p:commandButton id="dynaButton2" value="add data" ajax="true"
                    action="#{lpcRecordAddition.formSubmit}"/> 

            </f:facet>

            <p:column>
                <p:panelGrid>

                    ... some code ...
                </p:panelGrid>

                <f:facet name="header">
                    <div style="float: left;">
                        <p:selectOneMenu value="" style="width:160px">
                            <f:selectItem itemValue="tezst1" itemLabel="action" />
                            <f:selectItem itemValue="tezst2" itemLabel="test1" />
                            <f:selectItem itemValue="tezst3" itemLabel="test2" />
                        </p:selectOneMenu>
                    </div>
                </f:facet>

                <f:facet name="header">
                    <div style="float: left;" >
                        <p:selectOneMenu value="" style="width:160px">
                            <f:selectItem itemValue="tezst1" itemLabel="sir" />
                            <f:selectItem itemValue="tezst2" itemLabel="test1" />
                            <f:selectItem itemValue="tezst3" itemLabel="test2" />
                        </p:selectOneMenu>
                    </div>
                </f:facet>
            </p:column>
        </p:dataTable>

我想更改包含最后两个组合框的2个构面标题的颜色。

2 个答案:

答案 0 :(得分:1)

数据表将呈现为HTML表格。因此列标题为th

您可以从CSS

下面实现这一点
.customHeader th{
    background-color: black;
}

为所需的styleClass

指定p:column
<p:column styleClass = "customHeader ">
...
</p:column>

答案 1 :(得分:1)

实际上解决方案很简单:

.borderless thead tr .ui-state-default[role="columnheader"] {
    background :rgb(50, 69, 76);
}