WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Highlight Row and Individual Cell (Hover) (26 posts)

  1. xiaosongshu
    Member
    Posted 1 year ago #

    Hi,

    I am currently able to have an individual cell change color when the mouse hovers over it, or have the entire row change color when the mouse hovers over it. The problem I'm having is having BOTH the entire row change color (color1) as well as the current cell change color (different color2). Is this possible?

    I'm able to do the former by disabling the checkbox for highlighting the entire row, then adding the CSS below. I'm able to do the latter just by using the checkbox option. Granted, I have an additional line of CSS that is changing the background color when the row is highlighted so I'm not sure if that is making things messed up. Any help would be appreciated!

    /* Change the hover row color */
    .wp-table-reloaded-id-5 .row-hover tr:hover td {
    background-color: #EEEEEE!important;
    }

    /* Change the hover individual cell color */
    .wp-table-reloaded-id-5 td:hover {
    background-color: #CCCCCC!important;
    }

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    please try

    /* Change the hover row color */
    .wp-table-reloaded-id-5 .row-hover tr:hover td {
      background-color: #EEEEEE!important;
    }
    
    /* Change the hover individual cell color */
    .wp-table-reloaded-id-5 .row-hover tr td:hover {
      background-color: #CCCCCC!important;
    }

    The checkbox should however be checked, otherwise this will not work.

    If it still is not working, please post the URL to the page with your table.

    Regards,
    Tobias

  3. xiaosongshu
    Member
    Posted 1 year ago #

    Hi Tobias,

    That worked perfectly! Thank you so much!

    I'm almost positive the site below uses WP-Table Reloaded

    appleinsider.com/mac_price_guide/

    I'm trying to mimic two finals things:

    1) Boarders only show under the cell with a space in between each cell. I found a similar post by you on removing all boarders, but I'd like to remove all but the bottom one. Would removing the vertical borders and keeping only the bottom horizontal boarder make the white spaces in between each cell?

    Sidenote, but the huge underline above the table isn't made with the plugin is it?

    .wp-table-reloaded-id-1,
    .wp-table-reloaded-id-1 tr,
    .wp-table-reloaded-id-1 td {
      border: none! important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
      background: transparent! important;
    }

    2) The fix you told me above (individual cell changes colors) doesn't affect the first column (ie. first column doesn't change color no matter what). It seems I would need CSS in there to force the first column to stay one color and somehow make it have precedence over the /* hover individual cell color */ line?

    Are both those things possible? Thanks again!

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    great that the hover code worked! :-)

    No, that table on appleinsider does not use WP-Table Reloaded. That seems to be a custom solution or a different plugin.

    Now, before we continue, I'd actually make a suggestion: Instead of using WP-Table Reloaded, I suggest that you switch to TablePress, the official and designated successor of WP-Table Reloaded. You can get it at http://wordpress.org/extend/plugins/tablepress/ and find information on how to migrate at http://tablepress.org/migration-from-wp-table-reloaded/

    TablePress has a slightly more modern default styling, that is also easier to customize.
    If you then want to change things there, we can proceed with that. Note that you can also find example in the FAQ at http://tablepress.org/faq/

    Regards,
    Tobias

  5. xiaosongshu
    Member
    Posted 1 year ago #

    Hi Tobias,

    I have updated my plugin to TablePress. Everything has more or less stayed the same, but my formatting has changed a bit (row does not highlight with mouse hover, rows with background colors disappeared but highlighting single cell is still there, and the font sizes changed a bit).

    I can probably go back and make those fixes since I think it's just because the default CSS has changed a bit. Now since the vertical boarders are removed in this new plugin, would there be an easy way to get the white spaces in between each data cell as mentioned earlier? And is there an easier way to disable hovering for the first column only? Thanks!

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    great to hear that the switch was successful!

    Yes, the reason for some of the changes not working is the new styling in TablePress.

    Now, can you maybe post the link to your page? That would make it much easier for me to suggest CSS changes, as I can directly try them with the Chrome Dev Tools. This is not possible with just a screenshot, unfortunately.

    Regards,
    Tobias

  7. xiaosongshu
    Member
    Posted 1 year ago #

    Sure thing!

    http://bit.ly/12YdqwT
  8. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link.

    The row hover is actually working, but its not visible, because the hover color is the same as the background... Just change #F2F2F2 to something else, and you will see that it works.

    Now, to remove the cell hover from the first column, please try changing the CSS

    /* Change the hover individual cell color */
    .tablepress-id-5 .row-hover tr td:hover {
      background-color: #E8E8E8!important;
    }

    to

    /* Change the hover individual cell color */
    .tablepress-id-5 .row-hover tr td:not(:first-child):hover {
      background-color: #E8E8E8!important;
    }

    Now for the white space: I suggest that you do this with a white border:

    .tablepress-id-5 tbody td {
      border-left: 2px solid white;
    }
    .tablepress-id-5 tbody td:first-child {
      border-left: none;
    }

    Regards,
    Tobias

  9. xiaosongshu
    Member
    Posted 1 year ago #

    Hi Tobias,

    Happy New Year! Thanks again for all of your help! One last fix I'm working on is disabling the row hovering for specifics lines (in this case, row 1, 8, and 16). Basing it on your example earlier, I can disable row hovering for one line, but I'm having trouble disabling it for multiple lines. This is what I have for disabling one line only:

    /* Change the hover row color except for row 1, 8, and 16*/
    .tablepress-id-5 .row-hover tr:not(:nth-child(8)):hover td {
      background-color: #F2F2F2!important;
    }

    If I try to do

    .tablepress-id-5 .row-hover tr:not(:first-child):not(:nth-child(8)):hover td {

    I manage to disable row-hovering for rows 1 and 8, but then my individual cell hovering gets disabled completely. Any suggestions?

    /* Change the hover individual cell color except for first column */
    .tablepress-id-5 .row-hover tr td:not(:first-child):hover {
      background-color: #E8E8E8!important;

    Also do you have any website suggestions if I wanted to learn a bit more about the syntax so I could do more complicated things in the future?

  10. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I'm not sure that the selectors can be combined like that. Instead, I think that you'll have to combine the arguments of the :not() part. Also, it might be better to use the row CSS classes, instead of the n-th-child selectors. Please try:

    .tablepress-id-5 .row-hover tr:not(.column-1, .column-8):hover td {
      background-color: #F2F2F2!important;
    }

    Regards,
    Tobias

  11. xiaosongshu
    Member
    Posted 1 year ago #

    That didn't quite do the trick. I tried it with both .column-1, .column-8 as well as with .row-1, .row-8.

    It works fine if there is only one argument in the :not() part but the moment you include two arguments separated by a comma, things don't seem to work.

  12. xiaosongshu
    Member
    Posted 1 year ago #

    I'm also trying to do something similar with my Table 6 (on Comparisons page), and I can't seem to disable row highlighting for the first row and the first column (only want the second and third column starting from the second row to be row highlighted, as well as have individual cell highlighting as in my table 5). Is that possible to do? This is what I tried:

    /* Change the hover row color except do not highlight row 1 or column 1*/
    .tablepress-id-6 .row-hover tr:hover td:not(:first-child) {
      background-color: #F2F2F2!important;
    }
  13. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    argh, of course, "row" instead of "column"... My bad.
    I guess, we'll have to work the other way around then, by overriding the hover color again for those rows:

    .tablepress-id-5 .row-hover tr:hover td {
      background-color: #F2F2F2!important;
    }
    .tablepress-id-5 .row-hover .row-1:hover td,
    .tablepress-id-5 .row-hover .row-8:hover td,
    .tablepress-id-5 .row-hover .row-16:hover td {
      background-color: #E8E8E8!important;
    }

    Regards,
    Tobias

  14. xiaosongshu
    Member
    Posted 1 year ago #

    Ah thanks for the quick reply! So since .row-hover acts on rows, is there a way to disable the background change on only the first column for every row that is highlighted? Essentially exactly the change for individual row highlighting except for the first column, but this time for row highlighting except for the first column.

    I've been playing with the syntax but I'm still a bit confused as to how it all works in regards to td, tr, hover, and not.

    /* Change the hover row color*/
    .tablepress-id-6 .row-hover tr:hover td {
      background-color: #F2F2F2!important;
    }
    
    /* Override hover background color for row 1 and column 1 */
    .tablepress-id-6 .row-hover .row-1:hover td,
    .tablepress-id-6 .row-hover .column-1:hover {
      background-color: #E8E8E8!important;
    }
  15. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I'm confused now :-/ Isn't the current behavior on http://bit.ly/12YdqwT the same as on appleinsider.com/mac_price_guide/ ?
    Isn't that what you wanted?

    Regards,
    Tobias

  16. xiaosongshu
    Member
    Posted 1 year ago #

    Hi,

    Yes, sorry if I wasn't clear. I was referring to the "Comparisons" page on that same site. When a row is highlighted there, you will notice that the first column also changes color. I'm trying to prevent that.

  17. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    ah, ok :-)

    /* Change the hover row color*/
    .tablepress-id-6 .row-hover tr:hover td {
      background-color: #F2F2F2!important;
    }
    
    /* Override hover background color for row 1 and column 1 */
    .tablepress-id-6 .row-hover .row-1:hover td,
    .tablepress-id-6 .row-hover tr:hover .column-1 {
      background-color: #E8E8E8!important;
    }

    Regards,
    Tobias

  18. xiaosongshu
    Member
    Posted 1 year ago #

    Thank You!!!

  19. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-) Great to hear that this worked!

    Best wishes,
    Tobias

    P.S.: In case you haven't, don't forget to rate the plugin in the plugin in the plugin directory at http://wordpress.org/support/view/plugin-reviews/tablepress Thanks!

  20. Davepilot
    Member
    Posted 1 year ago #

    Hi Tobias,

    Following this topic, I would like to disable the hover on 1 particular cell, namely .row .column1. Is that possible? I tried:

    .tablepress-id-1 .row-hover .row-1 .column-1: hover td {
    background-color: #FFFFFF;
    }

    Unfortunately this doesn`t seem to work.

    Here`s the link, would be great if you could have a look! http://www.scenicairaustralia.com/tour/great-barrier-reef-scenic-flight/

    Kind Regards, Davy

  21. Davepilot
    Member
    Posted 1 year ago #

    Sorry, I have a correction to make RE my previous post. I would like to see NO hover on the first row. I have found the general input on previous posts, however in this case I cannot insert the hex a for white as then .row-1 .column-2 and .row-1 .column-3 will highlight white, while I want them to stay orange.
    So I need the first cell .row-1 .column-1 not to hover, while keeping the other cells in the row in their orange colour.

    Hope you see what I am trying to achieve?

    Kind Regards, Davy

  22. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Davy,

    thanks for your post!

    The easiest way for this would actually be to make the first row the head row of the table, and the last row the foot row of the table (by checking the corresponding checkboxes). This would also be more correct from a semantical point of view.
    That way, you wouldn't have mess with the hover CSS at all, but would just have to define the desired background colors, which you are already doing.

    Regards,
    Tobias

  23. Davepilot
    Member
    Posted 1 year ago #

    Hi Tobias,

    Thanks for your reply, it worked. However, the header and footer option overrides the font-style. Header and footer are Bold now and I want it regular. Any light you can shed upon this?

    Kind Regards, Davy

  24. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Davy,

    good to hear that this worked!
    To make the font weight normal again, just add

    .tablepress-id-1 thead th,
    .tablepress-id-1 tfoot th {
        font-weight: normal;
    }

    Regards,
    Tobias

  25. Davepilot
    Member
    Posted 1 year ago #

    Hi Tobias,

    This worked. Thanks so much for your help, greatly appreciated!

    Kind Regards, Davy

  26. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-)

    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

About this Topic

Tags

No tags yet.