• Resolved donnaWPadmin

    (@donnawpadmin)


    I have been playing with this for hours. (Love the plugin btw) and I just can’t seem to get it. Maybe someone with better eyes can see what I’m missing.

    I have 3 Tablepress tables inside a “tabs” shortcode (shortcodes ultimate plugin) The 3 tables have unique text, but the layout and colors are intended to be the same. All 3 tables have 4 columns each, and in each table, column 1 and 3 are time blocks, and I want to highlight them (background-color attribute) I put this code in the plugin options Custom CSS block, but it has zero effect:

    .tablepress-id-weekdaystbl .column-1,
    .tablepress-id-weekdaystbl .column-3,
    .tablepress-id-sundaystbl .column-1,
    .tablepress-id-sundaystbl .column-3,
    .tablepress-id-saturdaystbl .column-1,
    .tablepress-id-saturdaystbl .column-3,
    {
    background-color: #d0dfe1;
    }

    The link is here: Worship 101 Broadcast Schedule

    Any help would be appreciated. Thanks

    https://wordpress.org/plugins/tablepress/

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The last comma , before the opening { breaks the CSS. CSS is pretty strict ther 🙁
    Please try again with

    .tablepress-id-weekdaystbl .column-1,
    .tablepress-id-weekdaystbl .column-3,
    .tablepress-id-sundaystbl .column-1,
    .tablepress-id-sundaystbl .column-3,
    .tablepress-id-saturdaystbl .column-1,
    .tablepress-id-saturdaystbl .column-3 {
      background-color: #d0dfe1;
    }

    Regards,
    Tobias

    Thread Starter donnaWPadmin

    (@donnawpadmin)

    I don’t know how I missed that. I knew I was just too tired of looking at it, and it was something stupid like that. 🙂

    Now, one more question: How can I change the “mouseover” effect to only hit the current “cell” instead of the current “row” …as you can see I needed to set up a full 24 hour time block in 1/2 hour increments, which takes up a lot of space, so I had to “double-column”, or split the data.

    I love this plugin. It may not be responsive, but the tabs shortcode I used is, as is the theme, so the fluidity works fine on my site. The table rows just expand down, which is nice. I think another thing I would like to do, is just change the font size on smaller screens…I won’t trouble you yet for that one though. (unless you just happen to have it handy 🙂 )

    It’s difficult to use tables, and not make them look “old-school” and flat…usually they ruin a site, but yours are very nice. In your documentation, your class and ID callouts are very unclear. I had to actually put the table on a page, and then look at the HTML source to see what it was actually doing…I may have missed it, but I did not read anywhere where it said that the ID was prefixed by #tablepress- …so you could fix that, or make it more visible if I just missed it. (I did read it for the additional class somewhere, but not for ID & # )

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that this helped!

    For the single cell mouseover, you could use this “Custom CSS” (after deactivating the “Row Hover” feature on the “Edit” screen of the table):

    .schedule_tables .column-2:hover,
    .schedule_tables .column-4:hover {
      background-color: #ff0000 !important;
    }

    For the reduced font size on smaller screens, please try this “Custom CSS”:

    @media (max-width: 767px) {
      .schedule_tables td {
        font-size: 80%;
      }
    }

    And thanks for the feedback on the CSS documentation. I’ll indeed have to restructure and update that…

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘table column colors’ is closed to new replies.