Selected row color change?

pain19

Quick question: I currently use the following:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.4/fh-3.1.6/sc-2.0.1/datatables.min.css"/>

And it gives me a nice light gray-ish color when a row is selected. I was testing out upgrading to the latest:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css"/>

Which changes the selected row to a blue color by default. I searched the forums and found info about how to change the select color using the following in my css (currently testing gray and white smoke for the select colors):

/* Selected row color */
table.display.dataTable > tbody > tr.selected > *,
table.display.dataTable > tbody > tr.odd.selected > *,
table.display.dataTable > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px rgba(245, 245, 245);
}

So my questions are:
1. What was the old gray-ish select color code so I can re-use it?
2. What is the best way to prevent the text-color from turning to white? I'd like to leave it "as is" like it was before.

P.S. Still LOVING dataTables and you guys still totally ROCK for making this available to the public! And my apologies for not making a test case, but I didn't think one was needed in this case since it works and I just need a little clarification.

allan

Hi!

1. #acbad4 for odd rows and #b0bed9 for even rows was the default before. Example here.

2. Probably needs a change in our CSS or an override.

What i think I'll do is make use of CSS variables for this. You aren't the first to wonder about how to customies the selection colour, and it is a perfectly reasonable thing to want to do .

I'll add in variables for the background colour and also the text colour for selected rows tomorrow.

Regards,
Allan

pain19

@allan

As I said before, you guys totally rock! Thanks and just let me know when I can try it out for you.

allan

Commit made here. When it hits the nightly (probably about 10 minutes after I post this), you'll be able to do:

:root {
  --dt-row-selected: 255, 0, 0;
}

to make the selected row red (change the RGB values as needed). Note that it is just the three RGB numeric values which are comma separated. You can't use rgb(...), hex or a named colour here - it must be the RGB numbers, comma separated.

This is to allow automatic adjustment of the colour (via opacity) for row striping, hover and so on. It doesn't seem ideal, but it was the only way I could find to allow that automatic handling of the little differences for those extra bits. It might change in future if I find a better way (or someone can tell me of one!).

Allan

pain19

@allan,

I can't seem to get the above solution to work properly. I tried pointing everything to the the nightly builds with no success. If I use:

:root {
--dt-row-selected: 255, 0, 0;
}

it does not change the selected color. However, if I use your other code:

table.display.dataTable > tbody > tr.selected > *,
table.display.dataTable > tbody > tr.odd.selected > *,
table.display.dataTable > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px gray;
color: #333;
background-color: #fff
}

it does change the selected color and I get what I am looking for. However, the column used for sorting stays blue. What css parameter do I need to alter the color of the sort-column?

I like what you guys did here, showing the sort column on selection .

pain19

@allan

Also, in my table I have URLs in a single column, I'd also like to modify that specific color. I'm going to look at the CSS to see if I can figure out the proper code I'm looking for to manipulate these last (2) items. Other than that, everything is working perfectly! These are just a couple of "polish" items.

UPDATE: FORGET this one. I can change the color easily, just struggling with on.select for specific cell. I'll figure this one out. But it is not a huge deal right now.

allan

I've just tried it here and it appears to work okay: http://live.datatables.net/fuliqudi/1/edit .

Can you give me a link to a page showing the issue, and show the HTML for the specific columns that you want to change the colour for? Easiest option might be to use columns.className for them and just add some styling to that class.

Allan

pain19

@allan I figured it out. I added the !important to the box-shadow and it is producing what I want.

    /* Selected row color */
    table.display.dataTable > tbody > tr.selected > *,
    table.display.dataTable > tbody > tr.odd.selected > *,
    table.display.dataTable > tbody > tr.selected:hover > *  {
        box-shadow: inset 0 0 0 9999px #acbad4 !important;
        color: #333;
        background-color: #fff;
    }

Now, I'm trying to figure out how to leave the hyperlinks in the column the non-selected color of blue. In previous versions it stays blue after selection. But again, it is not super important as it just changes to black like the rest of the row. Hyperlink still works and it shows that it is a link if you hover over it.

But it was cool to be able to show a different color on the sort-column. But again, not a bug deal if I can't figure that out as everything is currently working as I want.

Minor things, but it's also the small things that give it that final polish. Lol. Take care and thanks for all your guidance. Fyi, I found some stuff in the forum, not "exactly" what I need but I can piece the info together and figure out what I need.

P.S. Thanks for the columns.className. I had just gotten to this page on the site and was playing with it. I believe this is what I need.