WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] How Do I style my table? (23 posts)

  1. andreawalford
    Member
    Posted 1 year ago #

    HI Tobias,

    Now that I managed to get WP-Table Reloaded displaying properly in WordPress, I have started to set up a table - I LOVE how easy it is to input data and move data around - the links and images feature is FANTASTIC!

    This is the table I am currently working on setting up: http://papercrafterslibrary.co/stampin-up-video-gallery/

    I can't figure out though how to style my table. Here are the things I want to be able to do:

    1. Remove columns and rows

    2. Set column width - on this particular table - I want it to be three columns with column 1=15%, column 2= 70%, column 3=15% - BUT - I only want that for some of my tables (my site is going to have a lot of tables for displaying my site content).

    3. Set justification within the columns - for example I want to have my data in each cell with data alignment LEFT and vertical alignment: CENTER

    4. Specify the background color - right now I've set the option so that every second row has an alternating color, but the two colors are different - I want to specify ONE light grey alternating background

    5. Change the font size in the table

    6. Change the color of a link font and hover color.

    I did look in the plug-in editor to see if I could find the stylesheet - but there were so many things in there I wasn't sure what to look for.

    I am working with the Builder theme, Covell child theme. Although I have a basic understanding of html and css, I am still quite new at it.

    Thanks for your help.

    Andrea Walford

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. andreawalford
    Member
    Posted 1 year ago #

    I figured out how to remove columns and rows - that was pretty obvious so I'm not sure how I missed it.

    I'm still not sure how to do items 2 through 6 - although I just found your CSS FAQ so I'm going to take a look at that.

    I'll post back here if I still can't figure it out.

    Thanks so much, and I'm sorry to be a bother.

    Andrea

  3. andreawalford
    Member
    Posted 1 year ago #

    I've been through your CSS FAQ as well as the w3 schools site and i've put together the following code to help me achieve items 2-6 in the list above. Can you please take a look at it and tell me if it looks ok (i.e. no major mistakes that will take the plugin offline) and if I need to worry about the order in which the commands appear? Do I just copy and paste what I have below from my text editor into the Custom CSS box under plug-in options?

    wp-table-reloaded-id-2 {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;
    }

    .wp-table-reloaded-id-2 td {
    border: 1px #e1dfe1;
    font-family: Trebuchet;
    font-size: 12px;
    color: #000000;
    a:link {color:#000000; text-decoration:none;} /* unvisited link */
    a:visited {color:#9a9696; text-decoration:none;} /* visited link */
    a:hover {color:#ee703d; text-decoration:underline;} /* mouse over link */
    a:active {color:#ee703d;} /* selected link */
    }

    .wp-table-reloaded-id-2 .odd td {
    background-color: #ebe9ea;
    }

    .wp-table-reloaded-id-2 .even td {
    background-color: #ffffff;
    }

    .wp-table-reloaded-id-2 .column-1 {
    width: 15%;
    text-align:center;
    vertical-align:middle;
    }

    .wp-table-reloaded-id-2 .column-2 {
    width: 70%;
    text-align:left;
    vertical-align:middle;
    }

    .wp-table-reloaded-id-2 .column-3 {
    width: 15%;
    text-align:center;
    vertical-align:middle;
    }

    Thank you,

    Andrea

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    thanks for your question, and sorry for not responding earlier... I somehow missed your initial post.

    Now, instead of answering your questions directly, I have some news: I'm currently working on the official and designated successor of WP-Table Reloaded, called TablePress. TablePress has been rewritten from scratch, and is much better than WP-Table Reloaded.
    So, as you have just started using WP-Table Reloaded, I'd actually recommend that you dump it again :-), and instead start with TablePress. That will then save you from some (small) extra work in the next weeks, when I officially announce the deprecation of WP-Table Reloaded in favor of TablePress.
    You can get the TablePress plugin at http://wordpress.org/extend/plugins/tablepress/ If you already have tables to migrate, you can find more information on that at http://tablepress.org/migration-from-wp-table-reloaded/

    Now, this will mean slight changes in regard to the styling code as well. Unfortunately, I haven't yet had the time to update the documentation and FAQ (which you seem to have found for WP-Table Reloaded) yet, but the main (and really the only big) difference is
    that the string

    .wp-table-reloaded

    has to be replaced with

    .tablepress

    So, my suggestion here is that you take a look at the WP-Table Reloaded FAQ, to get a basic idea about the styling, and also use the code from there, but with this mentioned change applied. This should already allow you to fix most of your styling question yourself. I then suggest that you simply ask again with those styling issues that you were not yet able to change, and I will gladly help with the code!

    Regards,
    Tobias

  5. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi again,

    ah, it seems that you already answered again, while I was typing my post :-)

    Yes, that code looks perfectly fine. It obivously doesn't yet incorporate the mentioned change, but that's no problem, actually. During the migration from WP-Table Reloaded to TablePress, TablePress will do this step for you automatically.

    So, regarding the question that post:
    Yes, this just needs to be pasted from your text editor into the "Custom CSS" textarea. And don't worry about mistakes that might take the plugin offline. This can not happen! If there are mistakes in the CSS code, only the table styling will be off or wrong, but the plugin will work without problems!
    The order of the CSS code is not relevant in your case. CSS code order only becomes important, if several pieces of the code target the exact same element in the page via similar CSS selectors. In that case, the one that was defined later in the code usually wins. But in your case, this doesn't really matter, from what I can see.

    Regards,
    Tobias

  6. andreawalford
    Member
    Posted 1 year ago #

    Wow! You're Amazing! I've uploaded and installed it and set up a test table.

    Here is the link: http://pclonlineclasses.com/stampin-up-video-gallery/

    Here is some additional styling I've put together that I'm wondering if you can take a quick look at to make sure there are no big errors. Here is the order of what I tried to write (I am new to writing HTML and CSS):

    1. In the first section I am trying to set a border around the table cells, make the font size in all cells to 13px, and then specify link colors and decorations.

    2. In the remaining sections of code I am trying to specify a custom column width for each column and then specify how I want the text horizontally and vertically justified.

    If all of it is correct, do I just copy and paste it as is into the Custom CSS box under plug-in options?

    Thank you again for your help!

    .tablepress-id-1 td {
    border: 1px #e1dfe1;
    font-size: 13px;
    a:link {color:#000000; text-decoration:none;} /* unvisited link */
    a:visited {color:#9a9696; text-decoration:none;} /* visited link */
    a:hover {color:#ee703d; text-decoration:underline;} /* mouse over link */
    a:active {color:#ee703d;} /* selected link */
    }

    .tablepress-id-1 .column-1 {
    width: 15%;
    text-align:center;
    vertical-align:middle;
    }

    .tablepress-id-1 .column-2 {
    width: 70%;
    text-align:left;
    vertical-align:middle;
    }

    .tablepress-id-1 .column-3 {
    width: 15%;
    text-align:center;
    vertical-align:middle;
    }

  7. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    yes, as mentioned, just paste the code into the "Custom CSS" textarea on the "Plugin Options" screen. Wrong code will not break the plugin, but only the styling (usually all CSS code blocks after the one that is broken will not work).

    Your CSS code is almost correct. Only the part with the links colors contains some mistakes (it already did when you first pasted it above, I just didn't spot it...)
    Here's the correct version of that code:

    .tablepress-id-1 td {
      font-size: 13px;
    }
    .tablepress-id-1 a:link {color:#000000; text-decoration:none;} /* unvisited link */
    .tablepress-id-1 a:visited {color:#9a9696; text-decoration:none;} /* visited link */
    .tablepress-id-1 a:hover {color:#ee703d; text-decoration:underline;} /* mouse over link */
    .tablepress-id-1 a:active {color:#ee703d;} /* selected link */

    The link stuff (everything that starts with "a:") is not a CSS property, but a "selector". It defines, to which elements the following properties and values shall apply. Therefore, these can not be part of the code of the .tablepress-id-1 td directly, but need to be their own (in this case one-line-) blocks. And with that, they need the .tablepress-id-1 in front of them, to make sure that they only apply to links in table 1, but not to any other links on the page.
    Once you have more tables on your page, you might want to revisit this code: Your tables shall probably all have the same link colors. So, instead of copying this entire block for each table (and adjusting the table ID in each copied block), just remove the "-id-1" part, so that ".tablepress" remains. After that, the command will apply to all TablePress tables automatically, no matter what their ID is.

    Regards,
    Tobias

  8. andreawalford
    Member
    Posted 1 year ago #

    Thank you! I entered the information and it did most of what I asked it to - I just can't figure out why it didn't add any border to my table.

    You can see the page here: http://pclonlineclasses.com/stampin-up-video-gallery/

    In my code I had specified a border around the cells - but I put it in the same place where I specified font. You can see the code below:

    .tablepress-id-1 td {
    font-size: 13px;
    border: 1px #e1dfe1;
    }

    Thanks,

    Andrea

  9. andreawalford
    Member
    Posted 1 year ago #

    I got it! Here is the revised code in case anyone else is interested:

    .tablepress-id-1 td {
    font-size:13px;
    border-width:1px;
    border-style:solid;
    border-color:#e1dfe1;
    }

    Woohoo! Very excited about my tables!

    Here is another question for you - if I want to use the same styles for only SOME but not all my tables - is there a quick and easy way to specify the table id. For example can I do something like:

    .tablepress-id-1, .tablepress-id-4, .tablepress-id-10 td {
    font-size:13px;
    border-width:1px;
    border-style:solid;
    border-color:#e1dfe1;
    }

    Thanks,

    Andrea

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    yes, exactly, the "border-style" was missing.
    You can now simplify this again, to

    .tablepress-id-1 td {
      font-size:13px;
      border: 1px solid #e1dfe1;
    }

    so that all border-related stuff is in one CSS property and value.

    In order to apply styling to several tables, you will indeed just have to copy the selectors. However, that has to be the entire selector, and not just the first part. So, your example has to look like

    .tablepress-id-1 td,
    .tablepress-id-4 td,
    .tablepress-id-10 td {
      font-size:13px;
      border: 1px solid #e1dfe1;
    }

    Can you see the pattern?

    Now, depending on how many tables you would add to this list, it might be worth use a slightly different approach: Instead of having to add each table that shall get this styling to the selector list, you can create an "Extra CSS class". That allows you to group tables, but with less complicated CSS code, as the relationship of as to which group a table belongs to is done via the "Extra CSS class". You will see a corresponding input field for this on each table's "Edit" screen. You can now for example change the CSS to

    .tablepress-styling-1 td {
      font-size:13px;
      border: 1px solid #e1dfe1;
    }

    and then add the string tablepress-styling-1 to the "Extra CSS class" fields of tables 1, 4, and 10, as in your example. Another group of tables could for example get the "Extra CSS class" tablepress-styling-2 for which you for example define a different border color. I hope this explanation doesn't confuse you?!

    Regards,
    Tobias

  11. andreawalford
    Member
    Posted 1 year ago #

    Hi Tobias,

    I made a donation to your plugin because I wanted to thank you for a fantastic plug-in - it's going to make my business life a whole lot easier and to thank you for all your help.

    I like your idea of creating an extra css class because when all is said and done I am going to have probably about 100 tables - but in only two different styles. So I would like to have an "extra css class" for each style. BUT, I don't know how to do that.

    Can you show me how to set up the code?

    Thanks,

    Andrea

  12. andreawalford
    Member
    Posted 1 year ago #

    In reference to the post above, I think I'm definitely going to need the extra css class, because when I tried adding in another table id as you showed me above before the link styling and the column styling, it didn't work properly for me.

    Thanks,

    Andrea

  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    thanks for your donation, that's really very nice! :-)

    About the "Extra CSS classes": That's really not complicated. You basically just invent their name (in your case, tablepress-styling-1 and tablepress-styling-2 will work fine, and then just use those in the "Custom CSS" code, instead of the table-specific classes like .tablepress-id-123. Additionally, you'll just need to enter tablepress-styling-1 or tablepress-styling-2 into each table's "Extra CSS class" field, depending on the group that it belongs to.

    Regards,
    Tobias

  14. andreawalford
    Member
    Posted 1 year ago #

    I'm sorry, I'm confused.

    I understand entering tablepress-styling-1 into the "Extra CSS" class field. What I don't understand is how and where I assign which tables are within styling-1 and styling-2 is there someway of saying that

    tablepress-id-1, tablepress-id-2, table-press-id-3 = tablepress-styling-1

    tablepress-id-4, tablepress-id-5, table-press-id-6 = tablepress-styling-2

    Thanks,

    Andrea

  15. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    saying that

    tablepress-id-1, tablepress-id-2, tablepress-id-3 = tablepress-styling-1

    means that you'll have to enter

    tablepress-styling-1

    into the "Extra CSS classes" field on the "Edit" screens of table 1, 2, and 3.
    The text in the "Extra CSS classes" field of a table determines to which group it belongs.

    Regards,
    Tobias

  16. andreawalford
    Member
    Posted 1 year ago #

    So, let me make sure I am understanding this, I select a table - let's say it's tablepress-id-1. In table one options under Extra CSS class I enter "table press-styling-1" and that assigns table 1 into the tablepress-styling-1 category.

    THEN, under plugin options, in the Custom CSS field I change all my .tablepress-id-1 to .tablepress-styling-1 so that it looks like this:

    .tablepress-styling-1 td {
    font-size:13px;
    border-width:1px;
    border-style:solid;
    border-color:#e1dfe1;

    Thanks,

    Andrea

  17. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    yes, exactly, you perfectly described the procedure for table 1 :-)
    Just make sure that you don't make typos in the "Extra CSS class" (in your last post, for example, you wrote "table press-styling-1" instead of the correct "tablepress-styling-1".

    For all the other tables, there's much work to do: You only need to add "tablepress-styling-1" to their "Extra CSS class", as the "Custom CSS" for that group has already been set then.

    Regards,
    Tobias

  18. andreawalford
    Member
    Posted 1 year ago #

    Hi Tobias,

    I did that and it worked! Thank you!

    There are a couple things that I did want to note about Tablepress which I don't know if you are aware of (as you said this is a beta version right now):

    The little check box to select rows is missing so there is no way to select a row.

    The other question I have is - is there a way to add rows in BETWEEN existing rows. Right now I can only add rows at the end of my table - I don't know if this is related to the missing check boxes.

    Thanks,

    Andrea

  19. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Andrea,

    that's indeed tricky :-) But having to add the extra HTML should not be necessary. Instead, please try adding this "Custom CSS":

    .tablepress-styling-1 td.column-1[colspan] {
      text-align: left;
    }

    This should align all cells in column 1 that have a colspan on the left.

    Regards,
    Tobias

  20. andreawalford
    Member
    Posted 1 year ago #

    Hi Tobias,

    Because I am doing this in a few different rows throughout the tables, I ended up tagging the text I wanted with <h1> </h1> and then inserted:

    h1 {
      font-size:14px;
      text-align:left;
      font-weight:bold;
    }

    into the Custom CSS field. You can see what it looks like here: http://papercrafterslibrary.co/su-video-gallery-stampin-up-adhesives/?w3tc_note=flush_all

    I have to say, the more I work with your Tablepress the more impressed I am. It's fantastic. We tried creating these types of tables right in the wordpress page and post content and it was a disaster.

    There are a couple things that I did want to note about Tablepress which I don't know if you are aware of (as you said this is a beta version right now):

    The little check box to select rows is missing so there is no way to select a row.

    The other question I have is - is there a way to add rows in BETWEEN existing rows. Right now I can only add rows at the end of my table - I don't know if this is related to the missing check boxes.

    Thanks,

    Andrea

  21. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ok, then the <h1> should work best for your use case. That probably saves you from messing with long CSS code, indeed.

    And thanks for reporting that issue about the missing checkbox to select rows. However, I can not reproduce this on my test sites. The checkbox is right there between the row number and the input fields for the first column.
    Could you please try to reproduce this on your site with other plugins temporarily deactivated? From my experience, I assume that another plugin is adding its CSS code to the TablePress admin screens, which it shouldn't be doing, and that probably hides these checkboxes. Another option would be to investigate with Firebug or the Chrome Developer Tools why these are hidden. If you want, I can do this, but would need access to your site. If that's ok, please contact me by email (my address is in the main plugin file tablepress.php).
    And yes, that checkbox is what keeps you from adding rows between existing rows, as it prevents you from using the "Selected Rows: Insert" button.

    Regards,
    Tobias

  22. andreawalford
    Member
    Posted 1 year ago #

    You're right! It's the same plugin that was causing all that extra text to show up in WP-Table reloaded. It's the Wishlist ID plugin.

    Thanks again for all your help!

  23. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, yes that totally makes sense :-) Great that you remembered!
    I guess, you'll have to deactivate that plugin while working with TablePress. The better fix would of course be that the developer of that plugin only loads the CSS into the plugin's own screens.

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.