Page/Paging number color styles

Graynoble

Hi all!

I am having a very difficult time finding the .css switch/trigger for changing the page/paging background for both default and non-selected colors.

I have downloaded and reviewed (implemented) all of the example css from this example:

https://datatables.net/blog/2011-05-10#Sorting-and-paging

For the life of me, I cannot find how they were able to change the background and/or default color of the page/paging colors.

I know it must be very simple, I am just missing it! Any help would be most appreciated!!!

Thank you and Kind Regards,
Jason

Graynoble

One additional note, I am using Bootstrap 4! Almost missed that.

colin

Hi @Graynoble ,

That blog post if very old, I suspect a lot has changed since then. I'm not sure what elements you're referring to. This fiddle here is a Bootstrap 4 table, could you let me know which ones you want styled?

Cheers,

Colin

Graynoble

Hi Colin! Thank you for the reply.

These:

I have a document where everything is a nice gray...and I have bright, blue page numbers surrounded by bright blue borders

I want to change the page number border and also change the page number color.

I appreciate your insight!

Jason

allan

First thing to note is that it looks like you have loaded both the DataTables default stylesheet and the DataTables/Bootstrap one. Just load one.

Regarding the colours - I would suggest using a Bootstrap theme. DataTables isn't defining the pagination colours there - Bootstrap is. However, if you want to just override them you could us:

.page-item.active .page-link {
    background-color: lightgrey !important;
    border: 1px solid black;
}
.page-link {
    color: black !important;
}

http://live.datatables.net/tonaleha/1/edit

Allan

Graynoble

Thank you Colin for providing the fiddle and the initial analysis!

Thank you Allan for the solution!!!

Jhony Aldama

Saludos, si les interesa les dejo como quedo cuando lo edite

live.datatables.net/diyawupu/1/edit?html,css,js,output

Jhony Aldama

http://live.datatables.net/diyawupu/1/edit?html,css,js,output