Portfolio Pagination Links: Change from project name to <Previous Next >

Site URL: https://www.swissariknife.com/

Hi there,

Can anyone help me customize something on my site?

I am looking to change the bottom pagination links on my portfolio projects from the project names to: Previous and Next
I love everything about the styling, so I don't want that to change.

Secondary request (if possible) is that I'd like the links to have a hover state of the color #ef233c

My site password is: 7777
Any help is super appreciated.

- Ari

2 hours ago, Ariariari said:

Site URL: https://www.swissariknife.com/

Hi there,

Can anyone help me customize something on my site?

I am looking to change the bottom pagination links on my portfolio projects from the project names to: Previous and Next
I love everything about the styling, so I don't want that to change.

Secondary request (if possible) is that I'd like the links to have a hover state of the color #ef233c

My site password is: 7777
Any help is super appreciated.

- Ari

try

.item-pagination-link--prev .item-pagination-prev-next,
.item-pagination-link--next .item-pagination-prev-next {
  display: block;
  font-family: utopia-std;
  font-weight: 600;
}
.item-pagination-link--prev .item-pagination-title,
.item-pagination-link--next .item-pagination-title {
  display: none;
}
a:hover {
  color: #ef233c !important;
}

23 hours ago, bangank36 said:

try

.item-pagination-link--prev .item-pagination-prev-next,
.item-pagination-link--next .item-pagination-prev-next {
  display: block;
  font-family: utopia-std;
  font-weight: 600;
}
.item-pagination-link--prev .item-pagination-title,
.item-pagination-link--next .item-pagination-title {
  display: none;
}
a:hover {
  color: #ef233c !important;
}

Changing the words worked perfectly, thank you! 😊 For some reason the color hover state is not showing up. Any ideas?

Edit, I took it out of the snippet you gave me. It turns out it was targeting all my links, including my button text (messing with my button), but not applying to the new pagination on the bottom of the project case studies.

On 7/30/2021 at 5:26 AM, Ariariari said:

Changing the words worked perfectly, thank you! 😊 For some reason the color hover state is not showing up. Any ideas?

Edit, I took it out of the snippet you gave me. It turns out it was targeting all my links, including my button text (messing with my button), but not applying to the new pagination on the bottom of the project case studies.

Hi. Do you still need help?

Hello, is it possible to add Next and Prev on top of the project name for the portfolio pagination?

On 3/12/2023 at 9:12 AM, hikaricreatives said:

Hello, is it possible to add Next and Prev on top of the project name for the portfolio pagination?

Yes. Possible. If you use Business Plan/higher, add this code to Portfolio Page Header

<style>
  /* Move portfolio pagination to top */
body main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  body section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body #page section:first-child {
    padding-top: 10px !important;
}
</style>

If you use Personal Plan, add this to Design > Custom CSS. However this code runs on both Portfolio, Blog, Event Page. So if you share link to your site, we can adjust code easier

  /* Move portfolio pagination to top */
body main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  body section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body #page section:first-child {
    padding-top: 10px !important;
}

Can the arrows be removed and the text be centered in futura pt font and have it state "PREV / NEXT"? 

On 8/1/2024 at 11:13 PM, KarlKeil said:

Can the arrows be removed and the text be centered in futura pt font and have it state "PREV / NEXT"? 

Use this CSS code

.item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next {
    visibility: hidden;
}
.item-pagination[data-collection-type^="portfolio"] svg {
	display: none !important;
}
a.item-pagination-link.item-pagination-link--next .item-pagination-prev-next:after {
    content: "NEXT";
    visibility: visible;
}
.item-pagination-link--prev .item-pagination-prev-next:before {
    content: "PREV";
    visibility: visible;
}