WordPress.org

Support

Support » Plugins and Hacks » WP-Table Reloaded » [Resolved] Highlight Row and Individual Cell (Hover)

[Resolved] Highlight Row and Individual Cell (Hover)

  • 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/

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

    @tobiasbg

    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

    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!

    Plugin Author TobiasBg

    @tobiasbg

    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

    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!

    Plugin Author TobiasBg

    @tobiasbg

    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

    Sure thing!

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

    @tobiasbg

    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

    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?

    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

    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;
    }
    Plugin Author TobiasBg

    @tobiasbg

    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

    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;
    }
    Plugin Author TobiasBg

    @tobiasbg

    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

    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.

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘[Resolved] Highlight Row and Individual Cell (Hover)’ is closed to new replies.
Skip to toolbar