Jump to content

Move Portfolio Pagination to Above Content

Recommended Posts

  • 3 weeks later...
On 2/22/2022 at 8:43 PM, kvanlent said:

@tuanphan Whoops, I ended up commenting on another thread, but I still have a question. I was able to update to be at the top of the page, but I would like to adjust to have it be within the content, in the column. Where the blue box is in this screenshot:

arrow-placement.png

What is site access password?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 4/27/2022 at 8:54 AM, BBmt said:

Could you share how you were able to move pagination from the bottom to the top of content? I am trying to do this but cannot find instructions anywhere. Thank you.

Depend your site. Can you share site url?

Or add this code to Portfolio Page Header

<style>
.view-item 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;
}
  section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  .view-item #page section:first-child {
    padding-top: 10px !important;
}
</style>

If you use Personal Plan, please share link to portfolio page, we can give new code easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 4/30/2022 at 11:06 AM, tuanphan said:

Depend your site. Can you share site url?

Or add this code to Portfolio Page Header

<style>
.view-item 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;
}
  section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  .view-item #page section:first-child {
    padding-top: 10px !important;
}
</style>

If you use Personal Plan, please share link to portfolio page, we can give new code easier

Is there a way to move the pagination to be after the first section?

I currently use the first section as a title with an image background and I would like the pagination to be between the title and the rest of the content.

Thanks!

 

Link to comment
3 hours ago, liorshva said:

Is there a way to move the pagination to be after the first section?

I currently use the first section as a title with an image background and I would like the pagination to be between the title and the rest of the content.

Thanks!

 

Can you share page url? Do you use Personal or Business Plan? We can give the better solution

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/30/2022 at 5:29 PM, tuanphan said:

Can you share page url? Do you use Personal or Business Plan? We can give the better solution

liorshvanew.squarespace.com/recommendations/london/asian

Password: Migdal

It is a business account. Already using loads of custom CSS and a bit of javascript.

Having the pagination buttons as the 2nd section on the page would make the most sense. I tried your code from above and it moved the pagination above the header, which doesn't make any sense.

Any help is appreciated!

Thanks!

Screenshot 2022-09-01 at 10.09.56.jpg

Link to comment

The second option, sort of.

Below the title section but above the content section. Some of the project pages have text boxes that go quite close to the edge of the screen so the pagination would need to push the 2nd section down a bit to prevent overlapping.

Thanks

Edited by liorshva
typo
Link to comment
23 hours ago, liorshva said:

The second option, sort of.

Below the title section but above the content section. Some of the project pages have text boxes that go quite close to the edge of the screen so the pagination would need to push the 2nd section down a bit to prevent overlapping.

Thanks

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('section#itemPagination').insertAfter('body.collection-630c1cdb9447cc046a9f627b article section:first-child');
	});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 9/9/2022 at 5:23 PM, liorshva said:

That worked great, thanks.

Just checking, is there a way to apply this to all portolio collections at once? Or do I need to repeat this code with a unique collection ID for each portfolio?

No way. You can add this to all Portfolio Page Header, so no need to find id.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('section#itemPagination').insertAfter('body.view-item article section:first-child');
	});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.