wps-navigation-pagination – how to change prev/next box and text colours

[jonathonfowler]

Hi there, I;d like to change the colour of the pagination box and text colour, without changing my theme. Currently the box is white, the text is white (see [http://www.jonathon.co/photogallery/royal-botanic-garden-edinburgh-wedding-jody-zach/] for an example)

I tried changing the following code and adding it to your Wp Custom CSS Settings plugin:

.wps_pagination_navigation_links {

margin: 0 !important;

cursor: pointer !important;

font-family: Helvetica,Arial,sans-serif !important;

background-color: #666666 !important;

background-image: none !important;

border: 1px solid #A2A3A6 !important;

border-radius: 3px 3px 3px 3px !important;

box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);

color: #000000 !important;

font-size: 12px !important;

font-weight: bold !important;

line-height: 1.4 !important;

padding: 5px 0 !important;

}

But still the box and text is white! I’m sure it’s something straightforward, but I’m struggling and your help would be appreciated! Many thanks!

[Peter]

Easily fixed….just do the following steps:

1) Go and grab the following plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

2) Then add the following CSS code in the settings of the above plugin:

.wps_pagination_prev_next .wps_pagination_navigation_links {

background-color: transparent !important;

}

The above will make the pagination buttons black background with white writing.

But if you wish to chop and change other qualities feel free to remove the “background-color: transparent !important;” entry and add your own stuff.

[jonathonfowler]

Brilliant, thank you, works perfectly!

I tried to also amend the ‘page 1 of 18’ text to white instead of default colour #21759B by amending as follows:

.wps_pagination_text {

color: #ffffff;

font-size: 14px;

padding: 0 20px;

}

but the text stays the same colour. What am I missing here?

Thanks again, I appreciate your assistance!

[Peter]

Try this:

.wps_pagination_text {

color: #ffffff ! important;

font-size: 14px ! important;

padding: 0px 20px ! important;

}

[jonathonfowler]

Ok thanks, it worked, but can only see it working when I’m logged in as admin. I’ve purged my caches, deleted browser cache, but don’t see the change when viewing the page if I’m not logged in as admin. Works OK when logged back in as admin, so I guess my clients will only see the old version that I want to change.

[Peter]

I can see your change – your buttons are red with white text.

It might be the browser cache which is showing you the old version.

[jonathonfowler]

OK, that’s great, thank you for your help!

[Author]

Posts