DataTables - change Sort Column Images to be less grey (dataTables.bootstrap.min.css)

TimothyV

Hello,

Can someone please help me? I am using the following script to override the opacity setting which is in the dataTables.bootstrap.min.css file instead of a having a local version of the css file. When I try the script below the images are still greyed out.

<style type="text/css">
    table.dataTable thead .sorting_desc_disabled:after {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: block;
        font-family: 'Glyphicons Halflings';
        /*opacity:0.5;*/ /*Change*/
    }        
</style>

kthorngren

I think this thread is asking the same thing.

Kevin

TimothyV

kthorngren, thank you! I will check it out. Much appreciated.

TimothyV

kthorngren, I appreciate the link yet that did not work for me it's not color that I am after it is turning off the opacity.

kthorngren

not color that I am after it is turning off the opacity.

The example in that thread can be used to learn how to do this. You should inspect the sorting element to see what CSS is applied then you should be able to override it. I assume you want to remove the opacity setting when the column is being sorted. You wouldn't use the sorting_desc_disabled class for this. Instead you will use .sorting_asc and .sorting_desc. For example:
http://live.datatables.net/kutitoqu/1/edit

Is this what you are looking for? If not please update my example or provide a test case showing the case you are trying to apply the opacity setting to.

Kevin

TimothyV

kthorngren,

Thank You so much! I truly appreciate your time answering this and resolving the matter for me on the weekend no less. Stay healthy and safe and all the best.

Now if I can just figure out how to get custom column sort images to work from a url path. I have tried the following with no success:

background: url('../../images/arrow.png') no-repeat center right !important;
background-image: url('../../images/arrow.png') no-repeat center right !important;

kthorngren

I found this thread showing how to change the bootstrap sorting images. Guessing you remember the thread Allan shows using the content CSS. Looks like you should be able to use content: url('../../images/arrow.png') !important;.

Like this: https://jsfiddle.net/fan1Lk36/

Kevin

TimothyV

Kevin, Oops Thank you, as you kindly pointed out Allan assisted me with the answer initially and then I was side tracked with other work. This time it worked perfectly.

Thank you again for assisting me. You folks are awesome and https://datatables.net is excellent.

All the best to you and yours.

Timothy