Welcome! To use this support forum, please Login or Join Today!

   

How to edit pagination background color?

{name}
Rank

Total Posts: 1

Joined 2011-05-09

PM

 

Hi Casey,

How to edit pagination’s background color and how to add

< Prev and Next >

button next the page number?

Thank you

Yaakob
Akobear.com


Attachments:

https://www.filepicker.io/api/file/FB2myothRrmx7xJ42Tdp

{name}
Rank

Total Posts: 23

Joined 2015-08-06

PM

 

Hi @yaakob83,

Fellow forum member here.

In your screenshot example, the HTML for pagination will look like this:

<div class="pagination">
  <
span class="current">1</span>
  <
a href="http://yourwebsite.com/blog/page/2/" class="inactive">2</a>
  <
a href="http://yourwebsite.com/blog/page/3/" class="inactive">3</a>
  <
a href="http://yourwebsite.com/blog/page/4/" class="inactive">4</a>
</
div

So, you can target the current page and inactive (i.e., previous and next) page number classes with the following example CSS. In this example, the current page number is black with no background and inactive pages are white with black backgrounds.

.pagination .current {
    background
transparent;
    
color#000;
    
text-shadownone;
}

.pagination a.inactive {
    background
#000;
    
-webkit-box-shadownone;
    -
moz-box-shadownone;
    
box-shadownone;
    
color#fff;
    
positionrelative;
    
text-shadownone;

Put the CSS at the bottom of your child theme’s style(x).css file or in the “Custom CSS” field.

Hope this helps. Let me know if you have any questions.