pageBlockTable .... apex:column .... headerClass .... font style

[Attack]

Hello folks,

I am facing a werid issue .. not sure if this is a limitation of Visualforce.

I wanted to change the font color of the header to my pageBlockTable. I used a CSS class and assigned it to the headerClass on the apex:column inside the pageBlockTable.

<style>
        .headerStyle{background-color:#638658;color:#FFFFFF}
</style>

<apex:pageBlockTable value="{!acc}">

  <apex:column headerValue="{!accTitle}" headerClass="headerStyle">

     <apex:outputLink value="/{!acc.account.Id}" target="_blank" styleClass="{!acc.style}">      

      {!acc.account.Name}

     </apex:outputLink>
  </apex:column>

</ apex:pageBlockTable>

The  background color of the header is getting applied but not the font color. But If I use a data table instead of a pageBlockTable,the font color gets applied. But I need to use pageBlockTable for business reasons.

Is this a limitation ? Any hints would be greatly appreciated !

Thanks.

[Arun Bala]

Any hints folks ?

[Ron Hess · Accepted solution]

This is a trick of CSS, your specification must bind more tightly than the one you are looking to override

try this

<style>
   .headerRow .headerStyle{background-color:#638658;color:#FFFFFF}

</style>

 worked for me

there was a color specified by .list th {}, the above style overrides this default

[Arun Bala]

Hi Ron,

Thanks a lot. This worked !!

Thanks again.

[Brian Conlon]

Ron, your solution worked great on a normal column header.  I am having a problem with the font color not being set when using a facet and command link.  The background color and text alignment get set, but not the font color.  Any ideas?

<style>
   .headerRow .selectedStyle{background-color: blue;color: #FFFFFF;text-align: center;}     
   .headerRow .nonSelectedStyle {background-color:green;color:white;text-align: center;}
</style>       


<apex:column width="17%" headerClass="{!IF(sortExpression=='Reply__c','selectedStyle','nonSelectedStyle')}" >
   <apex:facet name="header">
      <apex:commandLink action="{!ViewData}" value="Reply To{!IF(sortExpression=='Reply__c' ,IF(sortDirection='ASC','▼','▲'),'')}" >   
         <apex:param value="Reply__c" name="column" assignTo="{!sortExpression}" ></apex:param>           
      </apex:commandLink>         
   </apex:facet>         
   <apex:outputField value="{!m.Reply__c}" />                     
</apex:column>

[Brian Conlon]

In addition, to use the footerClass, you bind to totalRow and not footerRow

.totalRow .yourStyle{background-color:#638658;color:#FFFFFF}

<apex:column footerClass="yourStyle" value="a.name"/> 

[aperezSFDC]

I followed this trick and the CSS was being applied, but it was being overridden... So I changed my CSS to this:

.headerRow .TableTitle {
     color: #CC0000 !important;
}

and it works great!

[Manoj Gahlot]

Hiiii I tried to use your css trick to change the color of apex:column header but it do not change the color of the header also it doesn't change the font-size tooo

[cloud.brains]

<tbody id="Level1SDCRecords"> <apex:repeat value="{!Level1SDCWrappers}" var="LevelOneProducts" id="L1SDCProducts"><tr class="dataRow" style="background-color:#D9D9D9;" onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " > <td class="dataCell"><apex:outputText value="{!LevelOneProducts.productName}" id="selectLine1-1" style="width:180px" /></td><td class="dataCell"><apex:inputCheckBox value="{!LevelOneProducts.SDCCheckRecord.Listed__c}" id="selectLine1-2-1" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputCheckBox value="{!LevelOneProducts.SDCCheckRecord.Out_of_Stock__c}" id="selectLine1-2-2" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Volume__c}" id="selectLine1-2-3" style="width:35px" /></td><td class="dataCell"><apex:outputField value="{!LevelOneProducts.SDCCheckRecord.Volume_Measure__c}" id="selectLine1-2-4"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Stock__c}" id="selectLine1-2-5" style="width:35px" /></td><td class="dataCell"><apex:outputField value="{!LevelOneProducts.SDCCheckRecord.Stock_Measure__c}" id="selectLine1-2-6"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Status__c}" id="selectLine1-2-7" rendered="{!LevelOneProducts.productVisible}"/></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Facings__c}" id="selectLine1-2-8" style="width:35px" /></td><td class="dataCell"><apex:inputField value="{!LevelOneProducts.SDCCheckRecord.Position__c}" id="selectLine1-2-9" rendered="{!LevelOneProducts.productVisible}"/></td></tr>

</apex:repeat>

</tbody>