Jump to content

Reverse / Inverse Pagination links on project pages

Recommended Posts

Hello,

Hoping someone can help me with this, when you click into a project, you get the pagination link at the bottom right and that link takes you to the previous project in the list, and if you click on the pagination link at the bottom left that takes you to a more recent project. Does anyone happen to know the CSS code so I can invert the pagination links.

I would like the pagination link on the bottom right to allow you to move towards the more recent projects, just like how when you read a book or a magazine on an iPad you flip from the right of the page to go to the next page. It doesn't feel natural the current way Squarespace has it by default that to go from say Project 2 to Project 3 in the list you're clicking the pagination link in the bottom left. 

Screen Shot 2023-03-28 at 2.00.14 PM.png

Link to comment
  • Replies 14
  • Views 394
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 3 weeks later...
On 5/5/2023 at 12:58 AM, HankCo said:

Thanks. Sorry for the delay, for some reason I never got email notification on this and forgot to check back.

https://okra-gar-f7xf.squarespace.com
password: Happypencilclub

I think I misread the question. You want to change position of these paginations: left item to right and right item to left?

Screen Shot 2023-03-28 at 2.00.14 PM.png

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!)

Link to comment

Exactly. I get you change those by rearranging the order of projects on the homepage but I want to keep the order of projects on the homepage showing the latest project first. So I was wondering if there’s a way to change the project pagination without messing up how they display on the homepage. 

Link to comment
On 5/8/2023 at 12:53 AM, HankCo said:

Exactly. I get you change those by rearranging the order of projects on the homepage but I want to keep the order of projects on the homepage showing the latest project first. So I was wondering if there’s a way to change the project pagination without messing up how they display on the homepage. 

Add to Design > Custom CSS

section#itemPagination {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
section#itemPagination>a:first-child {
    margin-right: 0;
}
section#itemPagination>a:last-child {
    margin-left: 0 !important;
    margin-right: auto;
}

 

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!)

Link to comment
On 5/10/2023 at 1:52 AM, HankCo said:

Thanks so much! Seems to be working, except for the first image it still clicks backwards, and is there a way to tweak it slightly so the arrows don't point in the opposite direction? 

 

Screen Shot 2023-05-09 at 2.50.50 PM.png

No automatic way to change these items url, you will need to change manually on each page

If you still need, I can give code, you can repeat it & change url for all

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!)

Link to comment

Yes but have them point in the opposite direction. The arrow on the right points to the left. But since we’ve inverted the pages, how do we get the arrows to also invert, so the arrow on the right for example should point to the right 

Link to comment
On 5/14/2023 at 3:35 PM, HankCo said:

Yes but have them point in the opposite direction. The arrow on the right points to the left. But since we’ve inverted the pages, how do we get the arrows to also invert, so the arrow on the right for example should point to the right 

Do this?

image.thumb.png.3f1e3a76841bfccc8d6aa9da17a85753.png

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!)

Link to comment

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.