I am changing the pageblocktable cell colors dynamically based on value but due to salesforce standard style on pageblocktable removing my color.

please suggest.

it is changing on mousover

enter image description here

  • 1
    You should really include your markup.
    – Adrian Larson
    Commented Oct 19, 2016 at 16:46
  • @andran sorry i didn't get you Commented Oct 19, 2016 at 16:51
  • @lokeshkumar post your vf page code
    – sfdc
    Commented Oct 19, 2016 at 18:01

2 Answers 2


This really depends on your Visualforce code and what you're checking against. For each column you can use a formula to determine whether or not a class gets used. For example:

  .green {
    background: green;

  <apex:pageBlockTable value="{!myTable}" var="t">
    <apex:column styleClass={!IF(t.DateField__c > TODAY()), 'green', '')}     value="{!t.DateField__c}" />

You've not specified much, but the trick is here:

{!IF(t.DateField__c > TODAY), 'green', '')}

In other words for this example, if DateField__c is greater than today, return green. green is a CSS class and the formula is within the styleClass parameter. So, if the date is indeed greater than today, it'll render something like this:

<apex:column styleClass="green" [...]


To answer your second question, in your CSS you'd need something like this:

.green:hover {
    colour: darkgreen;

Salesforce will have some standard styling and :hover will be one of them. You'll want to override/cascade over that by using your own class.

Alternatively, you could do:

.green {
  background: green !important;

Although I'd avoid using this personally.

  • this thing i am getting but when i hover on the row it is disappearing bcoz salesforce pagetable standard class highlight - how do i remove that standard hover Commented Oct 19, 2016 at 16:54
  • @lokeshkumar See my edit.
    – Dan Jones
    Commented Oct 19, 2016 at 16:57
  • 1
    sorry to say but it's not working Commented Oct 19, 2016 at 17:02
  • Strange because I have exactly that in the styleClass in one of the first VF Applications I ever made, although I had admittedly used !important.
    – Dan Jones
    Commented Oct 20, 2016 at 7:46

The background hover is a feature of pageBlockTable. If you want to remove it entirely, use dataTable instead. You'll also lose the formatting, including borders, colors, etc that salesforce uses by default.

If you just want to keep the green color, wrap your text in an inner element:

<apex:column headerValue="Column Name">
    <span style="display: inline-block; width: 100%; background-color: {!row.bgcolor}">

Feel free to adjust as you need to.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .