Support » Plugin: TablePress » New update overwrites custom css on datatables

  • Resolved kencope

    (@kencope)


    Hi Tobias,

    You kindly helped me with customising the DataTables .dt-button class settings, but unfortunately the latest update appears to have broken this.

    The code I have is:

    .dt-buttons a {
    	color: #fff;
    	background-color: #6B84AE;
    	background-image: none;
    	border: 1px solid rgb(19,46,89);
    }
    
    .dt-buttons a:hover {
    	color: #6B84AE;
    	background-color: rgb(174,179,188);
    	background-image: none !important;
    	border: 1px solid #6B84AE;
    }
    
    div.dt-button-collection a.dt-button.active:not disabled,
    div.dt-button-collection a.dt-button:active:not disabled,
    div.dt-button-collection button.dt-button.active:not disabled,
    div.dt-button-collection button.dt-button:active:not disabled,
    div.dt-button-collection div.dt-button.active:not disabled,
    div.dt-button-collection div.dt-button:active:not disabled {
    	background-color: rgb(107,132,174) !important;
    	background-image: none !important;
    }
    
    .dataTables_paginate .paginate_button,
    .dataTables_paginate .paginate_button:before,
    .dataTables_paginate .paginate_button:after {
    	color: #6B84AE !important;
    }
    
    .dataTables_paginate .paginate_button:hover,
    .dataTables_paginate .paginate_button:hover:before,
    .dataTables_paginate .paginate_button:hover:after {
    	color: rgb(19,46,89) !important;
    }

    I tried turning off the ‘disabled’ section, but this had no effect. I can’t see what I need to do to get the customised buttons back.

    Thanks for your help.

    Kind regards,

    Ken

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    It seems like the JS code now uses HTML <button> elements instead of <a> elements.
    Thus, please change your CSS to

    .dt-buttons button {
    

    and

    .dt-buttons button:hover {
    

    You can remove that section with “disabled” entirely, as that is not needed here.

    Regards,
    Tobias

    Thanks Tobias, that works 🙂

    The only thing that’s not working though is the individual drop down Column Visibility buttons – they don’t hide the selected column(s).

    Kind regards,

    Ken

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s because that gray overlay is somehow above the buttons. I can only suggest to hide that by adding

    div.dt-button-background {
      display: none;
    }

    Regards,
    Tobias

    Thank, Tobias, I just had to add

    div.dt-button-background {
      display: none !important;
    }

    to get it to work, but it’s all good now 🙂

    • This reply was modified 1 year, 11 months ago by kencope.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great! That’s good to hear! Yes, that !important might be necessary. Nice find!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘New update overwrites custom css on datatables’ is closed to new replies.