Conditional Coloration

  • Resolved Laverneus Dinglefoot

    (@laverneus-dinglefoot)


    10 years, 9 months ago

    Tobias,

    First, I love your plugin, and I would have no site without it. Great work.

    I have a question that I fear may not have an easy answer. I have searched the support forum and haven’t found anything that matches mine.

    My tables contain information about NFL teams, and each row’s color is based on the team’s colors. When I have a single season worth of data, that means 32 rows, which is simple. The code I use is this:

    .tablepress-id-6 .row-2 td {
background-color: #97233F; }
.tablepress-id-6 .row-2 td {
color: #FFFFFF; }

.tablepress-id-6 .row-3 td {
background-color: #000000; }
.tablepress-id-6 .row-3 td {
color: #C60C30; }

    and so on, down to row-33

    However, I plan on posting a historical table with every season-team since 1941 (about 1800 rows), and I don’t know that I can manually do that much without going nuts.

    Is it possible, using custom css, to write something along the lines of:

    .tablepress .row-contents”Arizona Cardinals” td {
    background-color:#97233F,
    color: #FFFFFF; }

    So that all tables in the future will automatically fill in the color for any given team from any given year?

    For reference, my page is

    Thanks again for the great product.

    https://www.ads-software.com/plugins/tablepress/

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Yes, CSS selectors that can search for the content would be great, but unfortunately, the CSS language doesn’t offer that yet ??

    However, one solution could be to use the “Row Highlighting Extension” for TablePress, as e.g. explained here: https://www.ads-software.com/support/topic/highlight-a-row-based-on-value?replies=16#post-4524759

    Regards,
    Tobias

    Thread Starter Laverneus Dinglefoot

    (@laverneus-dinglefoot)

    Thanks for the speedy response!

    I read the thread you linked to and tried to figure it out, but I am still having some trouble. I installed the TablePress extension, as you suggested, and I tried to apply the code to my table unsuccessfully.

    The shortcode I used is:

    [table id=8 row_highlight="Arizona Cardinals||Atlanta Falcons" /]

    And the css I tried to use is:

    .tablepress .row-highlight-Arizona Cardinals td {
background-color: #97233F !important,
color: #FFFFFF !important
}
.tablepress .row-highlight-Atlanta Falcons td {
background-color: #000000 !important,
color: #C60C30 !important
}

    I also tried to fool around with it to apply rules to all tables with this code:

    .tablepress .row-highlight-Arizona Cardinals td {
background-color: #97233F !important,
color: #FFFFFF !important
}

    That didn’t do the trick either. I feel like I am missing something very simple.

    Here is the link if you would like a reference.
    Table Test

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that this is helpful!

    Before the highlight terms can be used as CSS classes, they need to be sanitized. For example, uppercase letters are transformed to lowercase and spaces are replaced with hyphens.
    Thus, this should work

    .tablepress .row-highlight-atlanta-falcons td {
  background-color: #97233F !important;
  color: #FFFFFF !important;
}

    (There was another small error in your CSS: You must use semicolons ; to separate the individual CSS properties, not commas ,.)

    Regards,
    Tobias

    Thread Starter Laverneus Dinglefoot

    (@laverneus-dinglefoot)

    I knew there was something foundational I just wasn’t applying. Your advice worked like a charm. You have my gratitude for your fast and accurate help, and for making an awesome product to begin with.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Conditional Coloration’ is closed to new replies.