Support » Plugin: TablePress » DataTables Buttons

  • Resolved yourchoice

    (@yourchoice)


    Hi

    We us the TablePress Extension DataTables Buttons for that the visitors can export the data as PDF or print it out.

    Is it possible to change the text for this buttons, i.e. change “Print” into “Drucken”?

    And is it possible to change the style of this buttons? How the CSS has to look like for that?

    Thanks very much.

    Best regards
    Mike

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For this, please try the approach from https://wordpress.org/support/topic/datatables-buttons-language/

    Changing the look takes a bit of CSS code indeed, so that it’s hard to give specific examples. I recommend to take a look at the currently used CSS in the CSS files of the plugin, or to investigate all this with the Developer Tools of your browser (I recommend those from Google Chrome for this). with that, you can see exactly which CSS is used.

    Or do you already have specific changes in mind?

    Regards,
    Tobias

    yourchoice

    (@yourchoice)

    Hi Tobias

    Thanks very much for the fast support. The changing of the text for the buttons works fine, very good!

    So, concrete we want to change the following:
    – Change the color of the buttons at the top
    – Change the color of the arrows at the bottom

    You can see the actual implementation of TablePress here:

    https://thuner-fasnacht.ch/fasnacht/

    Thanks very much.

    Best regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Mike,

    thanks for the link!

    For the buttons, you can use e.g.

    a.dt-button,
    button.dt-button,
    div.dt-button {
      background-image: none;
      background-color: #c3512f;
      color: #ffffff;
    }

    For the pagination arrows, try

    .paginate_button:after,
    .paginate_button:before {
    	color: #d9edf7;
    }
    .paginate_button:hover:after,
    .paginate_button:hover:before {
    	color: #049cdb;
    }

    Regards,
    Tobias

    yourchoice

    (@yourchoice)

    Hi Tobias

    Wow, very cool! It works fine!

    One last question. I tryed to change the style of the hovered buttons by adding :hover, but it didn’t work. How can I style the hovered buttons in the same way?

    Thanks very much.

    Best regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    almost 🙂 We need to “force” the command, by using the !important flag:

    a.dt-button:hover,
    button.dt-button:hover,
    div.dt-button:hover {
      background-image: none !important;
      background-color: #00ff00 !important;
      color: #0000ff;
    }

    Regards,
    Tobias

    yourchoice

    (@yourchoice)

    Hi again

    Ah, very cool! With !important it works fine!

    Thank you very much. Its a cool plugin and we are happy that we spended some donation sometimes ago and can use it now 😉

    Regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Hi Tobias

    I rated it 😉

    Have a nice time.

    Best regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks, I really appreciate it!

    Best wishes,
    Tobias

    Hi Tobias

    Sorry, I have one last question. Do you have a link to all the CSS styling possibilities I have for this datatables in TablePress?

    Or can you give me a hint, how to format the text of the pages “Page x of x”? But only this should be formatted in another way, not the text of the table content.

    Thanks.

    Best regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no, sorry, I don’t have a full list for the CSS here.

    For that text, you could use

    .dataTables_info {
      font-size: 24px;
      color: #ff0000;
    }

    To find out more, I recommend using the Developer Tools of your browser (I prefer those from Google Chrome for this). With those, you can easily see what the CSS classes for all elements on the page would be.

    Regards,
    Tobias

    No problem.

    Cool, it works!

    I will try it out with the Google Chrome developer tools.

    Thanks very much.

    Best regards
    Mike

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sure, always happy to help!

    Best wishes,
    Tobias

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.