WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Setting plugin options for multiple tables with same CSS (13 posts)

  1. chill986
    Member
    Posted 1 year ago #

    I know this is probably an easy answer, but couldn't find it in your documentation or in FAQ.

    I have 45 tables, ID 4-48, for which I want to apply the same CSS. Isn't there a simple way to do this rather than having 45 different statements?

    I am also trying to change the background color of all of these tables, the font change works, but the background color doesn't seem to.

    Thanks!

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your post.

    By default, there are two main CSS selectors for tables in TablePress.
    First, there's .tablepress-id-123 (which you are probably using now), and there's .tablepress that can be used to style all TablePress tables in one go (without needing different statements). That's what you can use for the background colors.
    (This concept is explained in the section "CSS selectors" in the documentation at http://tablepress.org/documentation/ to some degree.)

    Additionally to that, you can "invent" your own additional CSS classes that you can give to one or multiple tables (via the "Extra CSS classes" textfield on a table's "Edit" screen). That CSS class can then be used to apply CSS with a simple selector to several tables at once.

    If you post the URL to a page that is not working (regarding that background color) change, I'll gladly take a look, and also make suggestions to shorten the CSS code.

    Regards,
    Tobias

  3. chill986
    Member
    Posted 1 year ago #

    This is why I love using your plugin!!!

    Here's a page (look at the bottom). Trying to change the background color - not sure what the white blocks are about... hope you can help.

    http://www.helenhoffmangallery.com/chill986/cut-flowers/

    Can set up a userid if you need me to.

  4. chill986
    Member
    Posted 1 year ago #

    Here's an example of the CSS I'm using to center the selected tables. Seems I should be able to combine them - but not all the tables are the same, so can't do generic.

    .tablepress-id-4 {
    width: auto;
    margin: 0 auto 1em;
    width: 300px;
    }
    .tablepress-id-5 {
    width: auto;
    margin: 0 auto 1em;
    width: 300px;
    }
    .tablepress-id-6 {
    width: auto;
    margin: 0 auto 1em;
    width: 300px;
    }

    And here's an example of what I"m trying to do with the background:

    .tablepress,
    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    border: none;
    background-color: #393939;
    color: #f5f5f5;
    }

    .tablepress .row-hover tr:hover td {
    background-color: #595959;
    }

  5. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the links!

    Those white blocks are the result of some CSS code in your theme. To fix that, please add this "Custom CSS":

    .tablepress [class*="column"]+[class*="column"]:last-child {
      float: none;
    }

    Besides that, the background coloring is working just fine.

    Now, for the centering: Yes, you can combine those CSS blocks, and extra CSS classes are the perfect solution. For example, you can invent two (or more classes) like tablepress-styling-group-1 and tablepress-styling-group-2 (or whatever names you want), and add one of them to each table's "Extra CSS classes" field that you want to apply this to. Then use "Custom CSS" like

    .tablepress-styling-group-1 {
      width: auto;
      margin: 0 auto 1em;
      width: 300px;
    }

    for one group and a similar block for the other group.

    Regards,
    Tobias

  6. chill986
    Member
    Posted 1 year ago #

    And apply the new classes in the actual post?

    I'm sorry... i'm handy with CSS, but not really an expert.

  7. chill986
    Member
    Posted 1 year ago #

    .tablepress [class*="column"]+[class*="column"]:last-child {
    float: none;
    }
    Doesn't seem to do anything? The tr is not using the full width of the table?

  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    there's an extra } in the "Custom CSS", before the line

    .tablepress-table-name {

    Please remove that. Also, please check if you copied the code exactly as I posted it. There's also a ] missing.

    Regards,
    Tobias

  9. chill986
    Member
    Posted 1 year ago #

    Yes, that fixed it.

    I added the custom styling classes as well, but not sure how to use them... I"m sorry - I know it's not your job to teach me CSS... and 99% of the time I can figure it out, but I'm at a loss.

    I appreciate if you can point me in the right direction, but if not, I understand.

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    good to hear that this issue is fixed :-)

    Regarding the "Custom CSS" classes: Just use them in the same way as the other ones.
    Compare these examples:

    .tablepress-id-123 {
      /* some CSS commands *
    }

    would affect just the table with the ID 123.

    .tablepress-my-custom-group-1 {
      /* some CSS commands *
    }

    would affect all table that have an "Extra CSS class" of tablepress-my-custom-group-1 and

    .tablepress {
      /* some CSS commands *
    }

    would affect all TablePress tables, regardless of ID or extra CSS classes.
    (Of course these selector can also be combined with elements of the table structure, like tr or td.)

    Regards,
    Tobias

  11. chill986
    Member
    Posted 1 year ago #

    I think I understand, but where do I put the "extra" CSS class? I put it in one of the tables "Extra CSS Classes" under Table Options, but nothing changed?

  12. chill986
    Member
    Posted 1 year ago #

    Never mind, figured that one out! Thanks!

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, the extra CSS class goes into the field "Extra CSS classes" on each table's "Edit" screen. The CSS code itself goes into the "Custom CSS" textarea on the "Plugin Options" screen.

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic