CSS pagination

Hi,

thanks for your post, and sorry for the trouble.

Prepending the CSS code with the table ID selector is not necessary (and will in fact not work).

For me, this works on your site:

.paging_full_numbers a {
	padding: 1px 2px;
	margin: 0 3px;
	color: #333333 !important;
}

.paginate_active {
	font-weight: bold;
}

Additionally to that, could you please describe, what you actually want to change in the pagination, i.e. how you want it to appear?

Regards,
Tobias

No worries Tobias. (btw, ur insanely fast with responding….awesome!)
I’m trying to get the background color, rounded edges, and what-not removed from the pagination styles. Just some simple text links… I put the code into the Custom CSS “as is” (above) and it didn’t work. This image is with Custom CSS changes. The following code was supposed to be removed but still remains:

border: 1px solid #aaa;
border-radius: 5px;
background-color: #ddd;

This image is edits made in Chrome (what I’d like it too look like). I don’t want to touch the default.css, default.min.css and the like because as you said, any updates will erase the changes. And I plan one using your plugin for quite some time. ??

Uber thanks Tobias for ur help.
-andrew

Hi Andrew,

thanks for the explanation! Now I see what you are trying to do ??

Here’s the CSS that you’ll need:

.paging_full_numbers a {
	padding: 1px 2px;
	margin: 0 3px;
	color: #333333 !important;
	border: none;
	background: none;
	border-radius: 0px;
}

.paginate_active {
	font-weight: bold;
}

Basically, instead of leaving out certain commands, you’ll need to put them in with the desired valued. That will override the values from the default.css (which you should indeed never edit directly). Just leaving out certain properties will not work, because the default.css still has them, and the Custom CSS is loaded additionally to the default CSS.

Regards,
Tobias

#palm2face
Ugh… I feel like a complete CSS noob. Thank you. You are indeed, a WordPress master. It’s now working smooth as silk.

Problem solved, plugin rated (5 stars), ever grateful.

Cheers Tobias!
_andrew

Hi Andrew,

don’t worry, no problem at all! ??
Great to hear that this helped!

And thanks for the rating and kind words, I really appreciate it!

Best wishes,
Tobias

Hi Tobias!

Thanks so much for this plugin, its one of my favourites for sure! But I am also experiencing the same problem on https://vanguardmastering.com/discography/
I have added the code as suggested above, however I don’t see any changes happening in the pagination… Any advice would be greatly appreciated.

I am trying to change the font colour and either change or remove the arrows as they don’t match my current theme…

Many thanks and kind regards,
Benni

Hi Benni,

thanks for your question!

To change the font color of the pagination links, you can use this “Custom CSS”:

.dataTables_paginate .paginate_enabled_previous,
.dataTables_paginate .paginate_enabled_next {
	color: #ff0000 !important;
}
.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
	color: #00ff00 !important;
}
.dataTables_paginate .paginate_enabled_previous:hover,
.dataTables_paginate .paginate_enabled_next:hover {
	color: #0000ff !important;
}

To change the colors of the arrow images, you can use

.paginate_enabled_previous:before,
.paginate_enabled_next:after {
	color: #ff0000;
}
.paginate_disabled_previous:before,
.paginate_disabled_next:after {
	color: #00ff00;
}
.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
	color: #0000ff;
}

There are three main states (enabled, disabled, and hovered), so that you can adjust three colors.

Regards,
Tobias

Hi Tobias!

Thanks so much for being super helpful!! ??
I managed to get the following done, but am still having trouble with a tiny shadow under the “previous” arrow when link is enabled, my code looks like this:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #1c1c1c;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #272727;
}

.tablepress .odd td {
	background-color: #1c1c1c;
}

.tablepress .even td {
	background-color: #1c1c1c;
}

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

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border-color: #313131;
}

a:link {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:active {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:visited {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:hover {
	color: #ff00ff;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_enabled_previous,
.dataTables_paginate .paginate_enabled_next {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_enabled_previous:hover,
.dataTables_paginate .paginate_enabled_next:hover {
	color: #ff00ff !important;
	text-decoration: none;
	text-shadow: none;
}

To change the colors of the arrow images,
you can use
.paginate_enabled_previous:before,
.paginate_enabled_next:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_disabled_previous:before,
.paginate_disabled_next:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
	color: #ff00ff !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_disabled_previous:hover:before,
.paginate_disabled_next:hover:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

Any advice on how to fix that tiny shadow would be greatly appreciated.

Alternatively, I was wondering if it was possible to change the pagination to show the WP-PageNavi plugin generated navigation?

Many thanks for your support! ??

Kind Regards,
Benni

Hi Benni,

the problem is that you still have the text

To change the colors of the arrow images,
you can use

in the code (from copy/paste from my post above). That breaks the CSS, so please remove that.
Also, you don’t need the last block

.paginate_disabled_previous:hover:before,
.paginate_disabled_next:hover:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

as the disabled state doesn’t really need a hover state.

About the other pagination: You can not directly use that from WP-PageNavi, but a similar “full numbers” pagination. To do that, please add this to the “Custom Commands” text field in the “Features of the DataTables JavaScript” section on the “Edit” screen of the table:

"sPaginationType": "full_numbers"

Regards,
Tobias

Awesome! Many Thanks Tobias, that works beautifully! ??
Except that I think that the added code in the bottom seems to override the CSS settings as previously modified. My code now looks like this:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #1c1c1c;
}

.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #272727;
	color: #ff00ff;
}

.tablepress .odd td {
	background-color: #1c1c1c;
}

.tablepress .even td {
	background-color: #1c1c1c;
}

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

.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress thead th,
.tablepress tfoot th {
	border-color: #313131;
}

a:link {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:active {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:visited {
	color: #EBEBEB;
	text-decoration: none;
	text-shadow: none;
}

a:hover {
	color: #ff00ff;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_enabled_previous,
.dataTables_paginate .paginate_enabled_next {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.dataTables_paginate .paginate_enabled_previous:hover,
.dataTables_paginate .paginate_enabled_next:hover {
	color: #ff00ff !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_enabled_previous:before,
.paginate_enabled_next:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_disabled_previous:before,
.paginate_disabled_next:after {
	color: #EBEBEB !important;
	text-decoration: none;
	text-shadow: none;
}

.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
	color: #ff00ff !important;
	text-decoration: none;
	text-shadow: none;
}

But I can’t seem to see any of this changes replicate in the form as the new pagination seems to have defaulted back to the original colors.

Much appreciate your support and would be super grateful if you can provide the CSS code for modifying the new pagination.

Cheers, Benni

Hi Benni,

first: No need to post your “Custom CSS” here, I can see that in the page ??

Ok, so now you have change to the “full numbers” pagination style, instead of the pagination arrow images. Great!
Then of course, the CSS that you added so far, will not have an effect, as that only affects the arrow image pagination. You can therefore remove it again from the “Custom CSS”.

Instead, you can add something like this, to influence the new pagination:

.paging_full_numbers a {
  border: none;
  border-radius: 0px;
  background-color: transparent;
  color: #999999 !important;
}
.paging_full_numbers .paginate_active {
  background-color: #ff00ff;
}

or similar.

Regards,
Tobias

Thanks heaps Tobias!

I am still having some trouble modifying the hover, and also the boarder does not show. I am not sure what I am doing wrong, have tried for an hour now, so your advice once again would be awesomely helpful.

Many thanks, ??

hi Benni,

no problem!

For the border, just combine

border: 1px;
border-color: #313131;

to

border: 1px solid #313131;

(The border style “solid” is what was missing.)

About the hover: What would you like to happen/change on a hover?
And for that, you’ll need to fix the line

.paging_full_numbers h {

to

.paging_full_numbers a:hover {

Regards,
Tobias

Many thanks for your help Tobias!

I managed to change the hover background by adding an !important;
The navigation is now showing exactly the way I want it, but for some reason the link does not change the mouse arrow to a link selector, but rather to a text selector.
Do you know of any way to change this, so the mouse arrow turns into a link selector rather than text selector?

Cheers,

B ??

Hi,

great to hear that this is working now ??

To change the mouse pointer, just add

cursor: pointer;

in the

.paging_full_numbers a {

block.

Regards,
Tobias