- This topic has 11 replies, 3 voices, and was last updated 1 year, 5 months ago by David.
-
AuthorPosts
-
December 4, 2022 at 1:15 pm #2449409Jessica
Hi! So, I recently started using the WordPress table blocks, and would like to change the background color of the header section. Something is not coded just right for my site, as the CSS I’m finding in previous threads is not working.
I first tried the CSS that David gave in a previous ticket:
.wp-block-table thead tr {
background-color: #f00;
color: #fff;
}Except I want the background color to be #ddf2ff, with normal colored text (black not white), so I went with just:
.wp-block-table thead tr {
background-color: #ddf2ff;
}That didn’t work. I later updated my tables to use medium size font for Typography, and tried:
.wp-block-table.has-medium-font-size thead tr {
background-color: #ddf2ff;
}Also no results. Then I found another thread where Ying gave this CSS for a striped table:
figure.wp-block-table.is-style-stripes > table > thead > tr {
background-color: blue;
color: white;
}Tried changing it to my black-font-on-light-blue preferences:
figure.wp-block-table.has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}That also didn’t do anything; my cache has been cleared, just in case.
What’s my problem here?
Thank you again!!!
December 4, 2022 at 8:12 pm #2449655Fernando Customer SupportHi Jessica,
That should work. How are you specifically adding the CSS?
Can you copy and paste all your custom CSS here?: http://csslint.net/
Check if there are any errors, and correct them if so.
December 4, 2022 at 9:34 pm #2449709JessicaHi! The normal way, through Appearance > Customize > Additional CSS.
CSS Lint is a nice tool, thanks. It gave 3 warnings but no errors for:
figure.wp-block-table.has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}It didn’t like the “figure,” and then there were two “disallow overqualified elements” warnings for .wp-block-table.has-medium-font-size.
I managed to get rid of these warnings by changing my CSS to:
.wp-block-table has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}BUT, that CSS still doesn’t result in my table headers having a #ddf2ff background color. They’re white.
Similarly, just .wp-block-table doesn’t do anything, as in
.wp-block-table > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}Any input on why my table blocks are so… untouchable by CSS? It’s not a big issue in terms of site appearance, it’s just become a sort of puzzle where I’m really interested in why! this is.
December 4, 2022 at 11:06 pm #2449786Fernando Customer SupportYes, that’s odd. It’s not that the CSS isn’t working, it’s just that the CSS you’re adding isn’t there or isn’t loading. Can you try temporarily disabling Autoptimize and any other Caching/Optimization plugins you have?
December 5, 2022 at 8:41 am #2450495JessicaSure. I tried disabling Autoptimize and a Lazy Load plugin, flushed cache in Flywheel, and this also did not make this CSS work.
I’ve never seen any other CSS blocked by Autoptimize…
But, I don’t have any image-related CSS running, and when I just tried to throw in a box shadow around “.wp-block-image”s to see if that was possible, it’s not working either!
So, I do have jpeg to webp conversion running thru Smush Pro. You think these table blocks are maybe being interpreted as images and that’s interfering?
December 5, 2022 at 8:50 am #2450511DavidStaffCustomer SupportHi there,
can you disable autoptimize so i can take a closer look ?
December 5, 2022 at 9:01 am #2450530JessicaOK, done, I’ve disabled Autoptimize again now.
December 5, 2022 at 9:11 am #2450537DavidStaffCustomer SupportOk, can you add the CSS to the site, and leave autoptimize off
December 5, 2022 at 9:50 am #2450576JessicaYes, of course, thanks. I’ve now put the below CSS in, published, & cleared cache:
.wp-block-table has-medium-font-size > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}December 5, 2022 at 9:55 am #2450589DavidStaffCustomer SupportCouple of things:
1. This CSS:
@media (max-width: 768px) { .post-image img { max-width: 100%; }
is missing the closing bracket for the @media query, so any CSS after it will fall into the media query.
Add the bracket to it like so:@media (max-width: 768px) { .post-image img { max-width: 100%; } }
2, Change your table CSS to:
.wp-block-table > table > thead > tr { background-color: #ddf2ff; color: #000000; }
I suggest that you add this CSS before the above CSS.
Any CSS in @media query is best positioned at the very bottom.December 5, 2022 at 10:26 am #2450626JessicaDavid, you’re killin’ it!
That missing bracket is such a beginner error, whoops, and I’m surprised that CSS Lint didn’t call it out.
This code now is working just great for me:
.wp-block-table > table > thead > tr {
background-color: #ddf2ff;
color: #000000;
}With the @media CSS at the bottom!
Thanks again for the fabulous support!
December 6, 2022 at 3:16 am #2451300DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.