• Resolved Franklin46

    (@franklin46)


    I am trying to style tablepress table using css. I have I have looked at the faq’s and examples on css. The below code is just one I have tried but it has no effect on the style. I am using Divi theme.

    .tablepress-id-2 .row-3 {
    background-color: light-blue !important;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    This CSS would apply the change to the row element, but you’ll need to adjust the actual table cell, the <td> element. Thus, please try again with

    .tablepress-id-2 .row-3 td {
      background-color: light-blue !important;
    }

    Regards,
    Tobias

    Thread Starter Franklin46

    (@franklin46)

    Hi,
    Thanks for your guidance, however that does not work for me in either of the active tables.
    Regards,
    Frank

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter Franklin46

    (@franklin46)

    Tobias,
    Sorry for the delay. The url to the page is https://clubmaroochy.com.au/gr8s-results/
    There are 2 copies of the same table; I was trying different methods to get the shortcode in Divi but the result was the same.
    If attachments were allowed I would send you a screenshot of the Table preview. The missing styles are: –
    * lines 3 and 7 should be same background as head and have light text.
    * Column 2 text should be red.

    Divi have given me code snippets to put in to theme custom css which achieve the desired result; however it would be more desirable if it could be all done at the same source.

    • This reply was modified 5 years, 4 months ago by Franklin46.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for the link!

    It looks like you are using some CDN plugin to offload CSS files. You might have to refresh/clear the cache of that plugin, so that it loads the updated “Custom CSS” files.

    Then, in your “Custom CSS”, you seem to be indexing the columns with letters, like

    .tablepress-id-7 .row-1 .column-C {
    

    This will not work. You’ll have to use numbers here as well, like

    .tablepress-id-7 .row-1 .column-3 {
    

    Finally, as your table uses #colspan# to merge cells, you can not use the JavaScript features for this table. You must therefore uncheck the “Use DataTables” checkbox on the table’s “Edit” screen.

    Regards,
    Tobias

    Thread Starter Franklin46

    (@franklin46)

    Tobias,
    WOW – I don’t know how you come up with all that information in such a short time; amazing.
    * Point 1 – I use WPMUDEV plugins and have a Cloudflare CDN setup which I will investigate.
    * Point 2 – I used letters because that is what was displayed on the top of the table. I have read many posts about using numbers and will remember that going forward.
    * Point 3 – I adopted #colspan# because it displayed the head text without ‘wrap’ and seemed to be a good idea. Seems I have 2 options a) find an alternative to #colspan# which provides an acceptable display. or b) uncheck the Data Tables checkbox; which I probably don’t need to use anyway.

    There are pro’s and con’s in using all these options and only experience leads to the best course.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    good to hear that this helped!

    1) Yes, probably there’s a setting to refresh/clear the CDN/cache in your admin dashboard.

    2) Yes, I agree that it’s a bit confusing, sorry.

    3) Correct, either #colspan# or the DataTables features, but not both at the same time.

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘custom css not working’ is closed to new replies.