WordPress.org

Forums

TablePress
[resolved] extra css classes (6 posts)

  1. jrcollins
    Member
    Posted 1 year ago #

    Hi, I have just installed the Tablepress plugin and was wondering how exactly do I add extra css classes? Could you give a quick example? Thanks.

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your quesiton.

    Those can be added in the "Extra CSS classes" field on each table's "Edit" screen. The idea here is to add one to multiple tables to be able to change e.g. the styling on multiple tables with one small CSS declaration instead of multiple individual ones (which are based on the table ID based CSS selector as described in the TablePress Documentation at http://tablepress.org/documentation/ ).
    Does that help? Otherwise, could you maybe describe what you want to change in your tables? I can then probably tell you whether you should use "Extra CSS classes" for that.

    Regards,
    Tobias

  3. jrcollins
    Member
    Posted 1 year ago #

    Hey, thank you for your prompt reply. I still don't quite get what you mean. Could you give an example of how you would enter an extra css class?

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    sure! Let's assume that you have five tables in total, and for three of them (e.g. the tables with the IDs 1, 3, and 4), you want to change the font-size.
    Then, you could either use the long "Custom CSS"

    .tablepress-id-1 th,
    .tablepress-id-1 td,
    .tablepress-id-3 th,
    .tablepress-id-3 td,
    .tablepress-id-4 th,
    .tablepress-id-4 td {
      font-size: 15px;
    }

    or you could "invent" an "Extra CSS class", e.g. "tablepress-my-custom-font-size".
    Then, you would add that into the "Extra CSS classes" textfield of the three tables 1, 3, and 4, and you could then use the shorter "Custom CSS" code

    .tablepress-my-custom-font-size th,
    .tablepress-my-custom-font-size td {
      font-size: 15px;
    }

    Now imagine that you add a sixth table that should also get this modified font size. Instead of having to adjust the "Custom CSS" (which would be necessary with the first block of CSS from above), you'll only have to add "tablepress-my-custom-font-size" as an "Extra CSS class" for table 6.

    Regards,
    Tobias

  5. jrcollins
    Member
    Posted 1 year ago #

    ok, thanks Tobias, good explanation.

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TablePress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic