How to I change the row highlighter color?

etrainerspy

I am using the DataTables highlighting via CSS example. I tried to modify all the colors in the CSS, however, it keeps showing the highlighted row to be the original yellow colors. It seems to be ignoring my color change.

Why don't my color changes work?

Here are the changes that I made to the code:

.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #eed7b0;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.even:hover {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.odd:hover {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
background-color: #eed7b0;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
background-color: #eed7b0;
}

Chytkam

The css looks ok to me, is the name of your table #example? or did you possible change that?

etrainerspy

Yes, it's set to id="example".

Chytkam

I would recommend just using a brower to debug it, use google chrome, right click on your table row element and choose inspect element, on the righthand side of the debug bar at the bottom you will see the exact place the css is being references, make sure your editing the right file, you can also edit the css in realtime on the right by double clicking the css element or hex value, modify it and it will change your table. Also by inspecting the source, make sure your table rows have the class ex_highlight_row

allan

> .ex_highlight_row

Have you got that class on the body or a higher level element. I'd guess that is where it is not working.

As Chytkam says, Chrome Inspector is awesome for debugging this kind of thing. Also you might want to checkout the Xray bookmarklet for debugging selectors: http://westciv.com/xray/

Allan