How do i change the background-color of my dataTable header in Java using JSF Framework?

Question

I'm using JSF 2.1 with Primefaces 4.0 on Glassfish 3.2.1.

In my default.css file, I have this code:

.facetHeaderUM .ui-datatable-header {
    background-color: transparent !important;
    border: none !important;
}

Below is the code Im using in my xhtml file.

<p:dataTable id="items" var="item" value="#{EmailRcpts.listsofEmail}" 
      style="width:400px; text-align:left; font-size:12px;" 
      styleClass="facetHeaderUM"
      widgetVar="itemWidVar"
      paginator="true" paginatorPosition="bottom"
      paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" 
      currentPageReportTemplate="{totalRecords} record(s) in {totalPages} page(s)"
      rows="10">

      <f:facet name="header">
          <p:outputPanel style="font-style: italic; font-weight: bold; " >
              <p:inputText id="globalFilter" style="width:150px;margin-left: -53%" 
                  value="#{EmailRcpts.search}" /> &#160;
              <p:commandButton id="filterBtn" icon="ui-icon-search" 
                  style="font-style: italic;"/>
              <p/>
          </p:outputPanel>
      </f:facet>

In my p:dataTable I'm using styleClass=facetHeaderUM . I want to achieve transparent background-color and border-color in my dataTable header.

Using facetHeaderUm styleClass doesn't work. Default background-color of my p:dataTable header which is red still reigns.

Default.css file is attached correctly. It has many attributes and its working except to the attribute I have written above.

Answer 1

Depending on the primefaces theme you are using, I've found you also have to override the background-image property.

.facetHeaderUM .ui-datatable-header {     
    background-color: transparent !important;     
    border: none !important;

    background-image: none !important; 
}