The documentation on CSS pagination style customizations specific to your GeneratePress theme will help you pinpoint how you styled your pages pagination with CSS.
Pagination is of importance when it comes to user experience and site navigation. Thanks to our simple step by step process, you will easily achieve your desired pagination style to fit your website design and functionality.
You will not need any coding experience for this modification. We have structured our documentation so that you get specific code snippets which you will easily copy and past into your GeneratePress theme files. This tutorial will help you change the pagination layout, change the style, and change functions to work seamlessly on all devices and browsers.
Adding such custom styles to your website will improve its aesthetics as well as its user experience. Visitors will enjoy the easy navigation and browsing, which will result in better site engagement and increased conversions.
There is no need to use any plugins to achieve your pagination style since it is achievable using the Generatepress theme. Follow this tutorial to discover how easy it is to customize pagination.
How to add Pagination Style CSS Code Generatepress
- Log in to your WordPress dashboard.
- Navigate to “Appearance” and click on “Customize.”
- In the Customizer, look for the “Additional CSS” or “Custom CSS” option.
- Click on it, and a code editor will appear where you can add your custom CSS code.
- Write or paste your CSS code into the editor.
- After adding your code, click on the “Publish” or “Save & Publish” button to apply the changes.
Generatepress Theme Pagination Style 1
/* Paging navigation style */
.paging-navigation .nav-links > * {
padding: 7px 15px;
margin-right: 0px;
border-radius: 0px;
display: inline-block;
border: 1px solid #34393f;
background: #ffffff;
}
.paging-navigation .nav-links a:hover {
background-color: #34393f;
border-color: #34393f;
color: #ffffff;
}
.paging-navigation .nav-links .current {
background-color: #34393f;
border-color: #34393f;
color: #ffffff;
}
.paging-navigation .nav-links .current {
font-weight: 700;
}
.nav-links > * {
border-width: 2px;
border-style: solid;
border-color: #34393f;
text-decoration: none;
color: #34393f;
}Generatepress Theme Pagination Style 2
/* Paging navigation style */
.paging-navigation {
display: flex;
}
.paging-navigation .nav-next, .paging-navigation .nav-previous {
display: block;
}
.paging-navigation .nav-previous {
margin-right: 5px;
}
.paging-navigation .nav-next {
order: 1000;
margin-left: 5px;
}
.page-numbers.prev,
.page-numbers.next {
display: none;
}
.page-numbers,
.paging-navigation span {
padding: 5px 10px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid;
text-align: center;
}
Generatepress Theme Pagination Style 3
Paging navigation style */
.paging-navigation .nav-links>* {
padding: 10px 16px;
background-color: lightgrey;
color: black;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: blue;
color: #ffffff;
}Generatepress Theme Pagination Style 4
/* Paging navigation style */
.paging-navigation .nav-links>* {
padding: 10px 16px;
background-color: #ffe9e9;
color: black;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: #1762d1;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}
Generatepress Theme Pagination Style 5
/* Paging navigation style */
.paging-navigation .nav-links {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Add padding to prev and next links */
.paging-navigation .nav-links .prev,
.paging-navigation .nav-links .next {
padding: 0 15px;
}
/* Style nav links */
.paging-navigation .nav-links a.page-numbers,
.paging-navigation .nav-links .current {
line-height: 36px;
min-width: 36px;
margin: 0 4px;
text-align: center;
border-radius: 4px;
text-decoration: none;
color: #000;
border: 1px solid #ccc;
}
/* Style Current link */
.paging-navigation .nav-links .current {
background-color: #00f;
color: #fff;
}
/* Style Nav link hover */
.paging-navigation .nav-links a.page-numbers:hover {
border-color: #00f;
}
Generatepress Theme Pagination Style 6
/* Paging navigation style */
#nav-below .nav-links > *:not(.dots) {
display: inline-flex;
justify-content: center;
margin: 0;
padding: 0 10px;
line-height: 40px;
min-width: 40px;
border-radius: 6px;
background-color: #f00;
color: #000;
}
#nav-below .nav-links > *:not(.dots):hover,
#nav-below .nav-links .current {
background-color: #00f;
color: #fff;
}GenerateBlocks Pagination Style CSS Code
/*Button Style*/
.uws-button,
a.button,
.pagination-bt,
.wp-block-search__button,
input[type="submit"] {
font-size: 14px;
padding: 10px 25px;
transition: 0.5s;
background-size: 200% auto;
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
background-image: linear-gradient(to right, #1fd1bf 0, #07b0a2 51%, #1fd1bf 100%);
border-radius: 50px;
}
.uws-button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
a.button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
input[type="submit"]:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.pagination-bt:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.wp-block-search__button:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}We hope you will like How to add Pagination Style Generatepress Theme Without Plugin? You must have liked the information, you can boost the morale of us and our team by sharing this post with your friends and social media. If you have any question related to this post, then you can ask us through the comment box below.
