[Resolved] Question on wordpress table coloring

[William]

I have been trying to change the background color and the table and cell border colors inside WordPress.

Is there CSS I can use to do this? I have tried, but seemingly can’t get any of this to change.

View post on imgur.com

I’d like to make the background color darker and the the border color a more pronounced black.

Thanks in advance if anyone has any tips on this.

[Leo]

Hi there,

Where can I see that table?

Let me know 🙂

[William]

Hey Leo I published the post so you can see it.

https://glitchmind.com/reddit-battlestations/

[Leo]

Try this:

.wp-block-table table {
    background-color: #000;
}
table, th, td {
    border: 1px solid #ffffff;
}

[William]

Hi Leo –

Thank you for the CSS code, unfortunately it doesn’t seem to have done the trick. I’m guessing wordpress simply doesn’t allow their tables to be edited?

Thank you.

[David]

Hi there,

it is possible to change the colors. That link your provided results in a page not found. If you want to fix that so we can see the table and add the CSS Leo provided we can take a look at the issue.

[William]

Hi David –

Thank you! Here is the page: https://glitchmind.com/reddit-battlestations/

[David]

Can you add the CSS Leo provided and clear your autoptimize cache.

[William]

Hi David –

I did that, and seems to be no change. Maybe I’m applying the CSS in the wrong space. I’m adding the CSS in the back end of the WordPress editor post area. Specifically, in the “advanced” section. Here is a screenshot: https://imgur.com/a/yNWS1a8

Should I be applying this CSS differently?

Thanks again.

[David]

That field is for adding custom CSS classes.

Add Leo’s CSS to Customizer > Additional CSS

[William]

Thanks David – If I am applying the CSS to just one specific post, is there a best approach to getting this implemented? Currently I’m on the published article, then going to the “Customize” button and from there clicking “Additional CSS” – will that apply it just to the article itself?

Thank you.

[David]

In that case the field you were using before ( as you showed here ).

Give it an Additional CSS class of: dark-table
Then you can style it specifically with this CSS:

.dark-table.wp-block-table table {
    background-color: #000;
}
.dark-table table, .dark-table th, .dark-table td {
    border: 1px solid #ffffff;
}

[William]

Thanks David. So put the dark-table CSS class here? https://imgur.com/a/8mSXOB8 then publish the post and once live, add this CSS using the “Customize” > “Additional CSS” on the front-end?

.dark-table.wp-block-table table {
background-color: #000;
}
.dark-table table, .dark-table th, .dark-table td {
border: 1px solid #ffffff;
}

[Leo]

Looks correct. Have you tried it?

[William]

Hey Leo –

Yes, I have tried it. No luck yet. I have the dark-table css class in the back end and then in the front end I have I added the CSS code above.

I could be doing something wrong: https://glitchmind.com/reddit-battlestations/

[Author]

Posts