Title: Custom Styling
Last modified: September 1, 2016

---

# Custom Styling

 *  Resolved [LuisaDraws](https://wordpress.org/support/users/luisadraws/)
 * (@luisadraws)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/custom-styling-13/)
 * How to I make a custom styling like the screenshots you guys provided?
 * [https://ps.w.org/wp-pagenavi/assets/screenshot-1.png?rev=1206758](https://ps.w.org/wp-pagenavi/assets/screenshot-1.png?rev=1206758)
 * Thanks!
 * [https://wordpress.org/plugins/wp-pagenavi/](https://wordpress.org/plugins/wp-pagenavi/)

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

 *  Thread Starter [LuisaDraws](https://wordpress.org/support/users/luisadraws/)
 * (@luisadraws)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/custom-styling-13/#post-7702750)
 * Anyone?
 *  Plugin Author [Lester Chan](https://wordpress.org/support/users/gamerz/)
 * (@gamerz)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/custom-styling-13/#post-7702762)
 * That is based on Bootstrap theme, your theme need to be using Bootstrap CSS for
   that to work.
 * If your theme already uses it, this is the code I used in my theme
 *     ```
       if(function_exists('wp_pagenavi')) {
               wp_pagenavi( [
                   'before' => '<nav class="pagination pagination-sm visible-lg clearfix">',
                   'after'  => '</nav>'
               ] );
           }
       ```
   
 * and here is the CSS
 *     ```
       /* WP-PageNavi */
       .pagination .wp-pagenavi a,
       .pagination .wp-pagenavi span {
           float: left;
           padding: 5px 10px;
           text-decoration: none;
           border: 1px solid #ccc;
           border-left-width: 0;
       }
       .pagination .wp-pagenavi .pages {
           border-left-width: 1px;
       }
       .pagination .wp-pagenavi .current {
           color: #999999;
           background-color: #f5f5f5;
       }
       ```
   

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

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

 * ![](https://ps.w.org/wp-pagenavi/assets/icon.svg?rev=977997)
 * [WP-PageNavi](https://wordpress.org/plugins/wp-pagenavi/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-pagenavi/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-pagenavi/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-pagenavi/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-pagenavi/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-pagenavi/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Lester Chan](https://wordpress.org/support/users/gamerz/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/custom-styling-13/#post-7702762)
 * Status: resolved