Can't seem to change background color

Hi,

thanks for your question. Yes, your CSS code is wrong in a few places, and mixes the selectors.
As there are different background colors that one can change, I suggest that you take a look at the TablePress FAQ page at https://tablepress.org/faq/ From what I understand, you’ll want the code in the answer to “How can I change the background color of the table head row?”.

If that does not work, please post the link to the page with your table, and I’ll gladly take a look.

Regards,
Tobias

Hello,

i want to change the colour of the complete tablet, without the head row. Is this possible?

I can only change the coloor of one row, but the of the complete table.

Hi,

that’s possible with “Custom CSS” like

.tablepress-id-N td {
	background-color: #ff0000;
}

Just change the “N” to your table’s ID, turn off “Alternating row colors” and “Highlight rows” on the table’s “Edit” screen, and change the color as desired.
If that does not work, please post the link to the page with your table.

Regards,
Tobias

Hi Tobias
Thank for your help with Tablepress. Its very useful & well designed.

However I’m in a issue using above CSS to change background color of specific table in tablepress. background color does not change at all.
I have used below code, please help. Glad to provide any more information you may need

.tablepress-id-7 tbody td {
background-color: #bbcf44;
}

Regards
Lakshan

Hi, Lakshan

Maybe you could try to change:

background-color: #bbcf44;

to:

background-color: #bbcf44!important;

See if it works.

Haoxian

Hi Haoxian
Thank for your reply, yeah! it worked. But I noticed rows are not getting highlighted when I hover mouse pointer on them. It used to work before. Its not essential for me, but it is a nice to have feature.

Thanks
Lakshan

Glad to see it works.

For the hover-to-change-background feature to work for this table, you could add the following Custum CSS behind the previous one:

.tablepress-id-7 .row-hover tr:hover td {
background-color: #f3f3f3!important;
}

This should get the hover feature back. Let me known if you need further help.

Hi,

thanks for your question, and sorry for the trouble.
Haoxian, thanks for already posting the answer! ??

Yes, most likely, there’s some CSS in the theme that is influencing the background colors and overriding TablePress’ settings. By adding the !important keyword, you override that again, but this also overrides the row highlighting. This then makes the second code change that Haoxian suggested necessary.

So, please try that. If it does not help, please post a link to the page with the table, so that we can take a direct look. Thanks!

Regards,
Tobias

Hi Guys
Thanks for all your help. It works perfectly. thanks for explaining what has caused this behavior, it does makes a difference, appreciate your effort

regards
Lakshan

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!