Hi Alan,
thanks for your question, and sorry for the trouble.
Some themes have CSS for certain styling aspects, so that we might have to raise the priority of your “Custom CSS”. Please try again with
.tablepress thead th,
.tablepress tfoot th {
background-color: #683600 !important;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #1c7d97;
}
(note the !important keyword there).
Regards,
Tobias
Danke Tobias,
When I cut and pasted exactly, that changed the background color but seemed to have broken the hover color.
So I changed the part that said:
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #1c7d97;
}
to this:
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
background-color: #1c7d97 !important;
}
That seems to have fixed it.
By the way, if it’s not too off-topic, about those little graphics at the bottom of the table for navigation. I wanted to replace them, but I could not find them anywhere.
Could you please give me a little hand on that?
Regards,
Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
Hi,
ah, yes, you’ll have to add the !important tag two the second block of code as well. Nice catch!
For those pagination arrows: Technically, those are not images, but characters in a special “icon font”. This not only guarantees high quality icons, also on HiDPI/Retina screens, but it also makes the icons more customizable (in terms of color, for example) and faster to load. Replacing them is however more tricky. What exactly are you trying to achieve with them?
Regards,
Tobias
Actually, they are very hard to see on a white background. I wanted to make them dark and more easily seen. In fact, it would be great if they were at the top of the screen.
If you could tell me how to change their color to something like #1c7d97, that would fit in well on the page the table is located on. As is, they practically disappear on my screen.
Regards,
Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
Hi,
ah, thanks for the explanation! That’s indeed possible with some extra “Custom CSS”, like this:
.paginate_enabled_previous:before,
.paginate_enabled_next:after {
color: #1c7d97 !important;
}
.paginate_disabled_previous:before,
.paginate_disabled_next:after {
color: #00ff00 !important;
}
.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
color: #0000ff !important;
}
There are three main states (enabled, disabled, and hovered), so that you can adjust three colors.
Moving the pagination to the top is also possible. For that, you’d have to add a “Custom Command” on the “Edit” screen of the table. Please try adding
"sDom": 'lfprti'
there, which moves the pagination to the top, and which is based on the documentation at http://legacy.datatables.net/usage/options#sDom
Regards,
Tobias
Thanks Tobias,
I appreciate all the help.
That seems to have worked for recoloring the pagination. Moving the pagination to the top worked too, but it put the navigation arrows smack dab against the search, on the far right. You can see a screen shot here
Is there a way to center it?
Regards,
Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
Hi Alan,
good to hear that this helped!
Yes, we can tweak the positioning of the arrows. For that, please try adding this to the “Custom CSS” on the “Plugin Options” screen:
#tablepress-123_paginate {
float: none;
margin: 4px auto 0;
width: 110px;
}
Note that the 123 has to be changed to the table’s ID.
Regards,
Tobias
Thank you, Tobias, danke schoen.
That worked for me. I appreciate the help. I’ll mark this closed, but I’ll have more questions later on, I’m sure.
Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
I’m having trouble closing this and marking it “resolved.” Can you please do that for me?
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!
