daryll bellingham Hi
You can use this custom CSS:
p.counter {
text-align: center;
}
ul.pagination {
align-items: center;
display: flex;
gap: 8px;
height: auto;
justify-content: center;
flex-wrap: wrap;
margin: 0;
}
ul.pagination li {
list-style-type: none;
padding: 0;
}
ul.pagination li.active.page-item {
}
ul.pagination li.disabled.page-item {
opacity: 0.6;
}
ul.pagination li.page-item > a {
background-color: transparent !important;
}
ul.pagination li.active.page-item > a {
background-color: #c7d345 !important;
font-weight: 600;
}
ul.pagination li.page-item > a:hover,
ul.pagination li.page-item > a:focus,
ul.pagination li.page-item > a:active {
background-color: #c7d345 !important;
color: #fff;
}
ul.pagination li a,
ul.pagination li > span {
border: 1px solid #313131 !important;
color: #636262;
display: inline-block;
padding: 0 20px !important;
border-radius: 100px !important;
}
ul.pagination li a:hover,
ul.pagination li a:focus,
ul.pagination li a:active {
background-color: #f0f0f0;
text-decoration: none;
}
ul.pagination .icon-angle-double-left::before {
display: inline-block;
content: '\f100';
font-family: FontAwesome;
font-weight: 400;
}
ul.pagination .icon-angle-double-right::before {
display: inline-block;
content: '\f101';
font-family: FontAwesome;
font-weight: 400;
}
put into file: [your_site_root]/templates/shape5_vertex/css/custom.css
