How to I change the row highlighter color?
How to I change the row highlighter color?
etrainerspy
Posts: 2Questions: 0Answers: 0
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;
}
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;
}
This discussion has been closed.
Replies
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