Support » Plugin: TablePress » Change color of the “+”/”-” button in responsive tables

  • Resolved akiikiwporg

    (@akiikiwporg)


    Hi, Tobias!

    Would it be possible to change the color of the +/- button used in the Responsive Tables Extension (collapse mode)? Maybe some neat CSS-trick? 🙂

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • hi can you specify which button? Can you show it in an image?

    Thread Starter akiikiwporg

    (@akiikiwporg)

    Yes, the button that opens (green with white border) and closes (red with white border) the cut off part of a responsive table.

    As seen on this page in the TablePress documentation (under “Responsive table with the collapse mode”):

    If possible, I would like to be able to change the colors and maybe also the shadow, so the buttons are more consistent with my design.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    These buttons are created using CSS code, namely

    .tablepress.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
    .tablepress.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
      background-color: #31b131;
    }
    .tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
    .tablepress.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
      background-color: #d33333;
    }

    Just add that to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress, with the desired colors.

    For more of that CSS code, please see https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.css

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change color of the “+”/”-” button in responsive tables’ is closed to new replies.