Change default color of pagination buttons

yousufsadat

Hi, I am using Bootstrap fonts awesome to replace the Next/Previous button text with the icons. I am unable to change the blackish bg color of the button which appears on hover. I tried to change it in below class but it doesn't work. The icon changes color but not the bg. Is there any recommendation on how to approach this.

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: none;
  background-color: #585858;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #585858 0%, #111 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #585858 0%, #111 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #585858 0%, #111 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
  /* W3C */
}

Thanks

bindrid

I did not see much in the way of css tied ot the .paginate_button class.

This worked for me.

    .pagination > li > a, .pagination > li > span{background-color:red}
    .pagination > li.active > a, .pagination > li.active > span{background-color:green}

yousufsadat

Hi bindrid. I did it this way. I've tried your way but it is not working for me for some reason. Even the below code works if it is declared inside the <style> otherwise it doesn't work if declared in a separet CSS file. I don't have a good reason for it but this is how it is behaving.

<style>
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: none;
  color: black!important;
  border-radius: 4px;
  border: 1px solid #828282;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: none;
  color: black!important;
} 
</style>

r167627

@yousufsadat you have to take the entire block code (from jquery.dataTables.min.css) and replace with your desired colour, in my case #2980B9 and add the !importants on it. It works for me if I add this to an external css file.

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    border: 1px solid #2980B9!important;
    background-color: #2980B9!important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2980B9), color-stop(100%, #2980B9))!important;
    background: -webkit-linear-gradient(top, #2980B9 0%, #2980B9 100%)!important;
    background: -moz-linear-gradient(top, #2980B9 0%, #2980B9 100%)!important;
    background: -ms-linear-gradient(top, #2980B9 0%, #2980B9 100%)!important;
    background: -o-linear-gradient(top, #2980B9 0%, #2980B9 100%)!important;
    background: linear-gradient(to bottom, #2980B9 0%, #2980B9 100%)!important;
}