How To Change Pagination Buttons Text And Background Color

If you have your website in one color scheme and pagination buttons in other it will look strange. Hence, you need to know how can you change their color too. That is why we are here. It is very easy and straight forward. Here is how to do it.

Method 1:

Step 1:
Go to
main directory / styles / your theme / theme / css and open main.css

Step 2:
Place the following code in main.css . This will effect pagination button all over your website.

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color:    your color ; //background color of buttons. Blue by default
  border-color:         your color; // color or borders. Also blue by default
  color:               your color; // text color of buttons which is white by default
  cursor:pointer;
  z-index:2;
}

Or if you only want to effect buttons on videos page and no where else follow steps below.

Method 2:

Step 1:
Go to
main dir / styles / yourtheme / layout and open videos.html

Step 2:
Place the following code at bottom of it.

<style>

 .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
      background-color:    your color ; //background color of buttons. Blue by default
      border-color:         your color; // color or borders. Also blue by default
      color:               your color; // text color of buttons which is white by default
      cursor:pointer;
      z-index:2;
    }
</style>

This will effect button on videos page only. Save it and you are done.

Blog