Page/Paging number color styles

Page/Paging number color styles

GraynobleGraynoble Posts: 26Questions: 7Answers: 0

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!!! :smile:

Thank you and Kind Regards,
Jason

This question has an accepted answers - jump to answer

Answers

  • GraynobleGraynoble Posts: 26Questions: 7Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • GraynobleGraynoble Posts: 26Questions: 7Answers: 0

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,052 Site admin
    edited September 2018 Answer ✓

    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

  • GraynobleGraynoble Posts: 26Questions: 7Answers: 0

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

    Thank you Allan for the solution!!!

  • Jhony AldamaJhony Aldama Posts: 2Questions: 0Answers: 0

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

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

This discussion has been closed.