Home Forums Weaver Xtreme Theme Changing font-weight within a table

Topic Resolution: Resolved
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #69712
    PolyWogg
    Participant

    I was using a couple of block collections, but they clutter up my install and for some “memory” reason, it means sometimes my reusable blocks don’t load. That’s not the problem though. I am doing a bunch of custom CSS to style some tables, and I want to be able to put them in the Weaver XTreme post-specific CSS, and yet for some reason, when I select a row in a table, the font-weight won’t work. I could do it manually, but it seems odd I can’t change it.

    Soooo, I created a simple table using default Gutenberg table block, added a “recipe” class to it so I could have more than one table, and saved it here:

    https://polywogg.ca/recipe-test/

    In that page, Table 1 is the one I’m playing with; Table 2 is similar to what I want from another block; and Table 3 is just there as a control to ensure my changes don’t apply to ALL TABLES, just the first one.

    I then went to style it for border (same as my default, but the code works if I change the settings — I will override the Global CSS defaults). Then I do the special alignment (centred, top), also works.  For the next one, I selected row 2, set the font to blue (it works), made the background yellow (it works), and changed the font-weight to bold (**but it doesn’t work**). However, if I use the Nth (odd) setting for rows to make #1 and 3 red font, that works too. EVERYTHING works except font-weight. I have some stuff set in my Global CSS but even if I remove the Font-Weight from there, it still doesn’t allow me to go BOLD. In Inspect, it is set to normal, so something is overriding the setting…if I turn it off in inspect, it goes bold like it is supposed to.

    figure.wp-block-table.recipe table {
    border: 2px solid #008000;
    }

    figure.wp-block-table.recipe td {
    text-align: center;
    vertical-align: top;
    }

    figure.wp-block-table.recipe tr:nth-child(2) {
    color: blue;
    font-weight: bold;
    background: yellow;
    }

    figure.wp-block-table.recipe tr:nth-child(odd) {
    color: red;
    }

    FWIW, here is the code Scrambler helped me with a long time ago to set my default table set ups in GLOBAL CSS:

    /*Style tables to have green border*/
    
    #content table {border: 2px solid #008000; text-align: left; margin: auto; width: 100%; overflow-wrap: break-word;}
    
    #content tr th, #content thead th {font-size: medium; font-weight: normal; line-height: normal; padding: 2px;}
    
    #content tr td {border: 1px solid #008000; padding: 3px; vertical-align:top}
    
    #content tr.odd td {background: inherit;}

    The only place in there for font-weight can be removed, but it seems to make no difference to the styling of the table, and the post settings should be overriding it anyway.

    Any ideas?

    Paul Sadler

    #69713
    scrambler
    Moderator

    You are missing the td selector which is the original selector used for the styling

    figure.wp-block-table.recipe tr:nth-child(2)  td {
    color: blue;
    font-weight: bold;
    background: yellow;
    }

    #69714
    PolyWogg
    Participant

    Doh! Thanks as always Scrambler. I’ve re-inserted the TINY MCE plugin that lets me change font colours manually, not my favorite choice, but it works and I don’t have to manually paste the code each time. I’m on the fence which way to go. But at least I have the options now!

    Paul

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.