Correct way to change specific date's cell background-color on datepicker

Question

I have seen many answers on the line of How to change the cell color of a jquery datepicker But they for some reason do not apply to my example.

http://plungjan.name/test/datepicker_orange.html

I want the WHOLE cell content to be orange, not just what we can see behind the link IN the cell

So what I can see as

.ui-state-default {
  background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

which controls the link inside the cell with a class name set by me to "orange"

<td class=" orange" onclick="DP_jQuery_1327604402271.datepicker._selectDay('#toDate',1,2012, this);return false;" title="Almost sold out">
<a class="ui-state-default" href="#">15</a>
</td>

where the orange class is given by me in this code:

return [true,"orange","Almost sold out"];

It shows

and not

Which I can get if I remove the background image of the above ui-state-default in firebug

What is the correct method of changing the complete cell color of the cells I now change using the beforeShowDay?

I tried helping the situation by overriding the default:

.ui-state-default {
  background-color: transparent;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

Did not make any diffence

Answer 1

@mplungjan Change css to this:

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

Answer 2

If you put your class directly on the tag you have to change it to this:

.ui-state-default {
  background: #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}

In CSS if you have a backgorund image and a background color then the browser will show you the image which in this case is that gradient grey that you have in the first example.