Customize Pagination on One Blog

Site URL: https://www.vancouverpride.ca/performers-draft?rq=performers-draft

There are 2 blog pages on my client's website; one is a typical blog ("Blog A"), whereas the other one is being used to display performers ("Blog B"). I would like to change the pagination on Blog B without it affecting Blog A. Currently, the pagination on both blogs read as "Older Posts" and "Newer Posts", and I would like the pagination on Blog B to instead read as "View More Performers" or simply note the page number. How do I code this?

Link to Performer Blog "Blog B": https://www.vancouverpride.ca/performers-draft?rq=performers-draft

You mean rename both text to "View More Performers"? 

Yes, although I'm realizing that might be a bit confusing to keep track of pages as the performers list grows over time. Alternatively, it might be better to change the pagination to "Next Page" and "Previous Page" across all blogs. Are you able to help with that instead?

On 9/21/2024 at 1:07 AM, tobineliasart said:

Yes, although I'm realizing that might be a bit confusing to keep track of pages as the performers list grows over time. Alternatively, it might be better to change the pagination to "Next Page" and "Previous Page" across all blogs. Are you able to help with that instead?

You can use this to Website Tools > Custom CSS

/* blog pagination */
.item-pagination[data-collection-type^="blog"] h2 {
    visibility: hidden;
}
a.item-pagination-link.item-pagination-link--next h2:after {
    content: "next page";
    visibility: visible;
}
.item-pagination-link--prev h2:before {
    content: "prevous page";
    visibility: visible;
}

11 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS

/* blog pagination */
.item-pagination[data-collection-type^="blog"] h2 {
    visibility: hidden;
}
a.item-pagination-link.item-pagination-link--next h2:after {
    content: "next page";
    visibility: visible;
}
.item-pagination-link--prev h2:before {
    content: "prevous page";
    visibility: visible;
}

This worked on the blog post pages, but I'd like to do this on the overall blog page that lists all of the blog posts.

On 9/24/2024 at 6:14 AM, tobineliasart said:

This worked on the blog post pages, but I'd like to do this on the overall blog page that lists all of the blog posts.

Both links don't work now. Can you check again?

7 hours ago, tuanphan said:

Both links don't work now. Can you check again?

Apologies, things have been changing around quickly on the site to get pages published. Here is the new link: https://www.vancouverpride.ca/performers?rq=performers

Here is the area I'm referring to that I would like to change the pagination for:

On 9/26/2024 at 12:46 AM, tobineliasart said:

Apologies, things have been changing around quickly on the site to get pages published. Here is the new link: https://www.vancouverpride.ca/performers?rq=performers

Here is the area I'm referring to that I would like to change the pagination for:

Use CSS code like this

span.next-label {
    font-size: 0;
}
span.next-label:before {
    content: "previous page";
    font-size: 16px;
}
span.prev-label {
    font-size: 0;
}
span.prev-label:before {
    content: "next page";
    font-size: 16px;
}