Problems with changing color in table-header

Sorry for double-posting:

I managed to change the “unhovered” bg-color, I just forgot the “thead” in my code. ??

And I got an additional question:

Is it possible to change the color of the tiny arrow to “prev” or “next” page from your blue to my red?

Just in case you get bored sometimes. ??

Nina

Hi Nina,

thanks for your post.

So, from what I understand, you were able to change the head row background successfully now?

To also change the mouse hover color, please try this “Custom CSS”:

.dataTables_wrapper .sorting:hover {
	color: #ffffff;
	background-color: #cc0000;
}

For the “prev” and “next” buttons: These are currently images, and therefore not that easy to change as the other colors. I know that they don’t match the styling of the rest of the table, but I havent’t yet found the time to create new images.
So, to change this to your red, you would need to copy the arrow images from the “img” subfolder, re-create these in red, and save them in a new folder, e.g. in “wp-content”. After that, “Custom CSS” could be used to change the image URLs that are currently used. (As a quick test, you could simply replace the current arrow images with new ones, but as that change gets overwritten with every plugin update, I don’t recommend it as a permanent solution.)

Regards,
Tobias

Hi Tobias,

lots of thanks for this fast helping.

Yes, you got it. The head row bg is done and with your help the hover-function is working too. I tried to change the active and visited functions too (:hover as you told me, :visited bg-color: #990000 and .active bg-color: #ff0000), but that didn’t work, neither with the thead th code nor with the _wrapper .sorting or tr code.
Do you have any suggestions?

And relatimg to the arrows: that’s not that important. Maybe I find out how to change them in case I get bored. ??

Kindest,

nina

Hi Nina,

great that this worked already ??

There’s no real “active” or “visited” state for the table head cells, as these are not links.
Well, ok, one could argue that there is an “active” state, as the column that is currently sorted on gets highlighted as well.
To change that, you can use

.dataTables_wrapper .sorting_asc,
.dataTables_wrapper .sorting_desc {
	background-color: #ff0000;
}

For the arrows: You really only need the new images, the rest is rather trivial.

Regards,
Tobias

Hi Tobias,

Wow, you’re amazing. Thank you soooooooo much. ?? Everything is working fine now. ??
And for the arrows: Yes, I know, that’s why I keep it for boring times and care about the really important things right now. ??

If you’d like to have a look, what this table is good for:

https://true-crime.info/taeterindex/

I know that developers are proud if they see others work with their stuff ??

Donation’s coming soon.

Regards,

Nina

Hi Nina,

no problem, you are very welcome!
And indeed, thanks for the link! Always happy to see how people use the plugin!

And thank you for wanting to donate, I really appreciate it!

Best wishes,
Tobias

I know this was resolved for Nina but I tried the same code and am having no luck changing the default background color of my table header… any thoughts?

my code:

.tablepress thead th {
    background-color: #000;
}

Hi,

thanks for your question!

Your CSS code looks correct, so I can only assume that some CSS from your theme is interfering here.
Can you therefore please post a link to the page with your table?

Thanks,
Tobias

Thanks for the quick response… here’s the link

https://jump-site.com/wordpress/?page_id=29

this is just a temp development site, trying to sort some things out…

I’m using a pretty basic theme as a starting point so I can build my own. There’s not al ot of default CSS…

Sorry for disturbing, I’ve still checked this “notify me via email”-option activated.

Embee, maybe it’s a question of what theme you are using? You could try to change it to “custom styles” even if you’re using the theme defaults. Try to check them out if there’s somewhere an option for “using custom css” and activate it?

Greetings,

Nina

Hi,

thanks for the link!

From what I can see, you have simply inserted the CSS commands into your theme’s “style.css” file. This is not the correct place, as the commands are then loaded before the default styling of TablePress, and thus they are overwritten again. Instead, please paste the CSS commands into the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.

Best wishes,
Tobias

ahh… that was it… I was wondering about that… thank you both very much… spent way to much time slamming my head against the wall over this…

one other question, I made some other mods to the table via my style.css and they worked… should I not do that? Should all style mods go in the custom css area?

Hi,

yes, everything related to TablePress styling should go into the “Custom CSS” textarea on the “Plugin Options” screen. With the other changes you were just lucky, because TablePress doesn’t have direct default commands for them.

Regards,
Tobias

hi,
excuse me if I open again the post, but I’m neofit and I’ve the following problems:
1) I’ve inserted these rows
/* background riga head */
.tablepress thead th,
.tablepress tfoot th {
background-color: #502410; /* brown*/
color: #ffbb76; /* testo ocra */
}
in Custom CSS of Tablepress and it doesn’t work; the colour of the thead text is a colour that I use in the theme (to understand which part of the theme I’m using (a troubleshooting)), which is a child of twentyten.
2) Then which command I’ve to write for changing the hover on all the rows.
here you can see: https://allevamentodisimone.altervista.org/?page_id=89
the site is in costruction and I’ve not a lot of time to spend …
thanks a lot bye

Hi,

thanks for your post, and sorry for the trouble.
The reason why this is not working is that your theme also contains some CSS code for table styling. So, we have to override that.
To do that, please put

#content

before every

.tablepress

like in

#content .tablepress ...

For 2):
Please try this:

#content .tablepress .row-hover tr:hover td{
  background-color:#502410;
}

Regards,
Tobias