Site logo

Archived topic

Woo Pagination - Increase size, change colors

3 replies · Started by Scott on February 10, 2023

Viewing posts 1–4 of 4

I’ve increased the text size and the background color for the pagination with some css.

It seems to work well but there’s one thing I haven’t figured out. There’s a little grayish line underneath the page numbers I haven’t been able to figure out where it comes from.

Here’s a screenshot:

screenshot

I don’t see anything in the customizer or in GP Pro settings that might effect the pagination so I assume it’s not really a GP issue. But if anyone knows where that underline is coming from please let me know.

Here’s the css i’m using:

/* Woo Pagination */

.woocommerce-pagination{
    margin-top: 1em;
}
.woocommerce-pagination .page-numbers .current, .woocommerce-pagination .page-numbers li a:hover {
padding: 10px 10px 10px 10px !important;
background: #990000 !important;
color: #ffffff !important;
font-size: 24px !important;
}

.woocommerce-pagination .page-numbers a:link, .woocommerce-pagination .page-numbers a:visited {
display: inline !important;
text-decoration: none !important;
background: #990000 !important;
color: #ffffff !important;
padding: 10px 10px 10px 10px !important;
}

/* .woocommerce-pagination .page-numbers li{
    font-size: 24px !important;
    display: inline;
    margin: 0px;  
}
*/

.woocommerce .woocommerce-pagination { width:100%;
float: none;
font-size: 24px !important;
text-align: center !important;
}

/* End Woo Pagination */

Hi there,

try this CSS to remove the woo border style:


.woocommerce nav.woocommerce-pagination ul {
    border: 0 !important;
}

Bingo! Thank you David.

You're welcome

This archived topic is closed to new replies.