Title: Styling Pagination
Last modified: August 21, 2016

---

# Styling Pagination

 *  [ShelbyAnne](https://wordpress.org/support/users/shelbyanne/)
 * (@shelbyanne)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/)
 * I’ve added coding to my functions.php to change the “older posts” that’s displayed
   in 2012 theme to pagination.
 * But now I am having trouble styling it with css. I’ve tried using this: .page-
   numbers.current .page-numbers .next.page-numbers but it doesn’t work.
 * Here’s a link to one of my pages that shows the pagination: [http://www.totemag.com/category/lifestyle/](http://www.totemag.com/category/lifestyle/)
 * Any help would be greatly appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4262876)
 * Try:
 *     ```
       .page-numbers, .current, .next {
           color: red;
       }
       ```
   
 *  Thread Starter [ShelbyAnne](https://wordpress.org/support/users/shelbyanne/)
 * (@shelbyanne)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4262877)
 * That worked to change the color! I should have been more specific when asking.
   I would like to change the hover color and center the pagination at the bottom
   of the page. What should I do to achieve that?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4262886)
 * There’s not a great way to center those because they aren’t wrapped in a div,
   but see if this works:
 *     ```
       @media screen and (min-width: 600px) {
           span.page-numbers {
                   margin-left: 45%;
           }
       }
       ```
   
 * For the hover:
 *     ```
       .page-numbers:hover, .current:hover, .next:hover {
           color: green;
       }
       ```
   
 * Obviously, you can use whatever color(s) you want.
 *  Thread Starter [ShelbyAnne](https://wordpress.org/support/users/shelbyanne/)
 * (@shelbyanne)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4262887)
 * Perfect! That worked! Now one more question: seeing it now, I feel like it should
   rest up higher on the page so it is closer to the last post on the page. How 
   would I do that? Would margin-top work?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4263013)
 * I looked at it again – a negative top margin doesn’t work because those are not
   block level elements. The space is being created by margins and padding on the
   elements above – but if you change that, it also changes the spacing between 
   all posts.
 * The best solution would be to wrap the pagination in a div with a unique class
   or id when it’s output…then use that id or class in CSS to position the div.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Styling Pagination’ is closed to new replies.

 * 5 replies
 * 2 participants
 * Last reply from: [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/styling-pagination/#post-4263013)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics