function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Fabrice76Fabrice76 

How to change default background highlight color of apex:PageBlockTable ?

Hi,

I'm looking for changing the default highlight background color used with a PageBlockTable.

I haven't seen a special property for the selectedDataRow (like selectedDataRowClasses by example) in apex:PageBlockTable.

 

I use two classes to alternate color (even/odd), but the selected row isn't really visible with the default color (I think it's #E3F3FF ) so i'd want to change it.

 

<apex:PageBlockTable id="TableContact" value="{!Contacts}" var="c" rendered="{!IsContact}" rowClasses="even,odd" >

 

I have a look into the HTML page source and I found a class "highlight" applied on the seledtedrow (i think)

 

I've tried to override this class in my page

 

<style>
.highlight  {background-color: Violet !important;}
</style>

 but it didn't change anything...

 

I also searched on the net with google and i didn't find anything about this possibilities...

 

I only found how to change the current cell background color with an OnMouseMove / OnMouseOut event on the columns

 

<apex:column onmousemove="DoOnMouseMoveOrOutCell(this, '{!HighlightColorCell}')" onmouseout="DoOnMouseMoveOrOutCell(this, '{!IF(!c.IsPresent,'',PresentColor)}')">

 and i added this script function

 

function DoOnMouseMoveOrOutCell(aComponent, aColor)
{
    aComponent.style.backgroundColor = aColor;
}

 

Is it possible to change this (default) color for the entire row and how ?

 

Thanks

Best Answer chosen by Admin (Salesforce Developers) 
Puja_mfsiPuja_mfsi

Hi,

You need to override the standard CSS.

 

<style>
      body .pbBody table.list tr.dataRow.highlight td {
           background-color : red !important;
      }
</style>

 

Please let me know if you have any problem on same and if this post helps u please throw KUDOS by click on star at left.

All Answers

Puja_mfsiPuja_mfsi

Hi,

You need to override the standard CSS.

 

<style>
      body .pbBody table.list tr.dataRow.highlight td {
           background-color : red !important;
      }
</style>

 

Please let me know if you have any problem on same and if this post helps u please throw KUDOS by click on star at left.

This was selected as the best answer
Fabrice76Fabrice76

Great ! That's exactly what I wanted ! Thanks a lot ! ...so I clicked on star at left ;-)
SoundarSoundar
Hi Puja_mfsi  ,


                               Its working fine, thanks a lot . and i have one problem like this could you please amend this????


<apex:pageblockSection columns="1" >
   <apex:facet name="header">System Types</apex:facet>
   <apex:pageblockTable value="{!systemType}" var="Sys" rendered="{!NOT(ISBLANK(systemType))}" columns="8" headerClass="selectedDataRow">
   <apex:column value="{!Sys.Inspection_Sheet__r.Date__c}" />
   <apex:column value="{!Sys.Name}"/>
   <apex:column value="{!Sys.Building__c}"/>
   <apex:column value="{!Sys.System_Type__c}"/>
   <apex:column value="{!Sys.Type__c }"/>
   <apex:column value="{!Sys.System_Location__c}"/>
   <apex:column value="{!Sys.Pass__c}"/>
   <apex:column value="{!Sys.Fail__c}"/>
  </apex:pageblockTable>
   </apex:pageblockSection> 




i will get a more data row so i can't find which one is first which one is second , so i need two different colors for pageblocktable one color for first record (so many rows will create for the first record and so many rows row create for the second row . if three rows create for first record same colors should be shown for three rows )  .  i think defenitely you catched my point.





 Thank you in advance.........