Jump to content

Pagination Customization

Recommended Posts

Posted

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!

Posted

Hi lindsey123

Please make your site public so we can help

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Posted

@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;
}
}

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

  • 4 months later...
Posted

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"

Posted
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

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

  • 4 months later...
  • 8 months later...
Posted
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

Posted
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.