Custom CSS not overriding default styles

Hi,

thanks for your post, and sorry for the trouble.

Yes, there’s something else that you can do: ?? 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

Hi Tobias, thanks for your reply. You can view the page here: https://kaseyperrydressage.com/news/

And just an FYI. I originally had all the information in one table and had all the rows noted in the Custom CSS, but some were the correct color and some were the default color, and some were one custom color when they should have been the other custom color. I thought maybe separating them into two tables might help, but it didn’t. The colors switched back and forth for a while, but now I only see them in the default color.

Here’s my CSS:

.tablepress-id-4 .row-1 td,
.row-8 td,
.row-13 td,
.row-16 td,
 {
	background-color: #faf5f1 !important;
	border: none !important;
}

.tablepress-id-4 .row-2 td,
.row-3 td,
.row-4 td,
.row-5 td,
.row-6 td,
.row-7 td,
.row-9 td,
.row-10 td,
.row-11 td,
.row-12 td,
.row-14 td,
.row-15 td,
.row-17 td,
.row-18 td,
.row-19 td,
 {
	background-color: #f5eee8 !important;
	border: none !important;
}

.tablepress-id-8 .row-1 td,
.row-6 td,
 {
	background-color: #faf5f1 !important;
	border: none !important;
}

.tablepress-id-8 .row-2 td,
.row-3 td,
.row-4 td,
.row-5 td,
.row-7 td,
.row-9 td,
.row-10 td,
.row-11 td,
 {
	background-color: #f5eee8 !important;
	border: none !important;
}

Also, I have the option checked: “The background colors of consecutive rows shall alternate.” Because when it’s unchecked some even weirder stuff happens. I still get alternating rows of different colors, but one color is red and the other is the page background color. (Maybe something to do with the theme CSS?)

Hi,

thanks for that example CSS! That already gives me some indicators on what’s wrong. You will need to add slight modifications to the CSS code:
The .tablepress-id-123 has to be part of every line in that CSS selector, you can not leave it out. Also, there must not be a comma right before the {, as the comma can only be between the different selectors.
So,

.tablepress-id-4 .row-1 td,
.row-8 td,
.row-13 td,
.row-16 td,
 {

has to be changed to

.tablepress-id-4 .row-1 td,
.tablepress-id-4. row-8 td,
.tablepress-id-4 .row-13 td,
.tablepress-id-4 .row-16 td {

The other CSS blocks have to be changed in the same manner.

Regards,
Tobias

Yay! That solved the problem. I’m glad that it was something as simple as that. And now I know for future use. Thanks so much!!

Resolved.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!