Pagination Customization

Site URL: https://kangaroo-polygon-sn6z.squarespace.com/config

Hello,

I'm trying to do some customization to my pagination. I'd ideally like it to be transparent instead of the automated white block that gets dropped behind it. Additionally, I'd like the right side of the pagination to be white text instead of black text. Lastly, I'd love for the pagination text to scale down for mobile. 

If anyone can help with this, I'd appreciate it!

Thanks!

Hi lindsey123

Please make your site public so we can help

@lindsey123 is this the effect you're after?

 

@lindsey123 You can add this to your custom CSS

 

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

.item-pagination-link--next h2,.item-pagination-link--next svg {
    color: white !important;
    stroke: white !important;
}

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

@media(max-width:767px) {
section.item-pagination.item-pagination--prev-next h2 {
    font-size: 16px;
}
}

@RyanDejaegher - thank you so much, that worked perfectly!

Does anyone know how to change where the pagination title (breadcrumb) LINKS to? I want it to go to my own custom-designed store page as opposed to the Squarespace default "all item page"

On 11/3/2020 at 1:46 AM, curtis594 said:

Does anyone know how to change where the pagination title (breadcrumb) LINKS to? I want it to go to my own custom-designed store page as opposed to the Squarespace default "all item page"

Can you share site url? We can help easier

I found the answer to my own question.  To change where the "home" breadcrumb links to, insert this code to the Code Injection section.  This worked on my 7.0 site on the Feed template:

<script>
  $(function(){
    $(".ProductItem-nav-breadcrumb-link:first-child").attr("href", "/store/");
});
</script>

replace /store/ with where you want to direct

On 6/16/2020 at 11:30 AM, RyanDejaegher said:

@lindsey123 is this the effect you're after?

 

 

is there a way to make it completely transparent? instead of a colour?

18 hours ago, rrttsy said:

is there a way to make it completely transparent? instead of a colour?

Can you share page url? We can check easier

Is there a way to just make the pagination background transparent?? Keep the black links but just remove the white background as shown. link to site in progress: https://cyan-oriole-hy6e.squarespace.com/health-investing-pulse/blog-post-title-three-b62sh

On 12/31/2020 at 6:29 PM, curtis594 said:

I found the answer to my own question.  To change where the "home" breadcrumb links to, insert this code to the Code Injection section.  This worked on my 7.0 site on the Feed template:

<script>
  $(function(){
    $(".ProductItem-nav-breadcrumb-link:first-child").attr("href", "/store/");
});
</script>

replace /store/ with where you want to direct

On 6/16/2020 at 8:33 PM, RyanDejaegher said:

@lindsey123 You can add this to your custom CSS

 

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

.item-pagination-link--next h2,.item-pagination-link--next svg {
    color: white !important;
    stroke: white !important;
}

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

@media(max-width:767px) {
section.item-pagination.item-pagination--prev-next h2 {
    font-size: 16px;
}
}

 

@RyanDejaegher Is there a way to just make the pagination background transparent?? Keep the black text  links but just remove the white background as shown. link to site in progress: https://cyan-oriole-hy6e.squarespace.com/health-investing-pulse/blog-post-title-three-b62sh

9 hours ago, Lillayla said:

 

@RyanDejaegher Is there a way to just make the pagination background transparent?? Keep the black text  links but just remove the white background as shown. link to site in progress: https://cyan-oriole-hy6e.squarespace.com/health-investing-pulse/blog-post-title-three-b62sh

Add to Design > Custom CSS

section.item-pagination.item-pagination--prev-next.white {
    background-color: transparent;
}