CSS styling missing when copied to page

Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that a screenshot would also not really help. I’d need to see the page so that I can check the source code. This will give hints as to whether the CSS code is there but overridden by the theme, or whether it’s missing entirely.

Regards,
Tobias

Hi Tobias

Thank you for your reply. Below is the page that I have the problem with.
On this page, you will see that only row 4 & 6 of table 1 has a background. But I put in coding to put a background on row 4-7.

This is my page link: https://staging1.bocaskayakfishing.com/calendar/

It could be my theme or maybe wordfence plugin that is blocking the css changes?

Thanks
Ciska

• This reply was modified 4 years, 9 months ago by travelhippi.

Hi,

thanks for the link! It’s indeed your theme that’s causing this, not directly by “blocking” but by overriding the CSS for every second row, to achieve an “alternating row background colors” effect.
To again override that, you could raise the priority of your CSS command. For that just use

background-color: #deeaed !important;

in the CSS.

(If you wanted to, you could also try this shorter approach for achieving the desired styling:

.tablepress-id-1 tbody td {
	background-color: #deeaed !important;
}
.tablepress-id-1 .row-2 td,
.tablepress-id-1 .row-3 td,
.tablepress-id-1 .column-1,
.tablepress-id-1 .column-9 {
	background-color: #ffffff !important;
}

This basically colors every cell of the table, in the first block, and then reverses that again for some rows/columns in the second block.)

Regards,
Tobias

Hi Tobias
Thanks so much for your reply, it worked and my table is showing correctly.
Just a question, is there anyway to shorten the coding below? I only want to shade some lines and some columns (like a calendar with some days shaded)

I have 12 tables that need shading and don′t want to have such a long list of coding.

Thanks so much
Ciska

copy of coding:
.tablepress-id-1 .row-4 .column-2,
.tablepress-id-1 .row-4 .column-3,
.tablepress-id-1 .row-4 .column-4,
.tablepress-id-1 .row-4 .column-5,
.tablepress-id-1 .row-4 .column-6,
.tablepress-id-1 .row-4 .column-7,
.tablepress-id-1 .row-4 .column-8,
.tablepress-id-1 .row-5 .column-2,
.tablepress-id-1 .row-5 .column-3,
.tablepress-id-1 .row-5 .column-4,
.tablepress-id-1 .row-5 .column-5,
.tablepress-id-1 .row-5 .column-6,
.tablepress-id-1 .row-5 .column-7,
.tablepress-id-1 .row-5 .column-8,
.tablepress-id-1 .row-6 .column-2,
.tablepress-id-1 .row-6 .column-3,
.tablepress-id-1 .row-6 .column-4,
.tablepress-id-1 .row-6 .column-5,
.tablepress-id-1 .row-6 .column-6,
.tablepress-id-1 .row-6 .column-7,
.tablepress-id-1 .row-6 .column-8,
.tablepress-id-1 .row-7 .column-2,
.tablepress-id-1 .row-7 .column-3,
.tablepress-id-1 .row-7 .column-4,
.tablepress-id-1 .row-7 .column-5,
.tablepress-id-1 .row-7 .column-6,
.tablepress-id-1 .row-7 .column-7,
.tablepress-id-1 .row-7 .column-8 {
background-color: #deeaed !important;
}

Hi,

the shorter version that I mentioned in my previous reply is the best that I can think of here.

Regards,
Tobias