Move portfolio pagination above or to the side of content

Site URL: https://parsnip-emu-fs7r.squarespace.com/paintings/winter-bush-and-snowdrift

Hello,

I would like to move the portfolio pagination that is currently way at the bottom of the page (and impossible to find for most visitors to the site) up to the top, or ideally, I would simply like to have scrolling arrows (with no titles) at the side of the portfolio images so that one can easily click through items. How can I accomplish this? 

Thank you.

On 4/27/2022 at 12:06 AM, BBmt said:

Site URL: https://parsnip-emu-fs7r.squarespace.com/paintings/winter-bush-and-snowdrift

Hello,

I would like to move the portfolio pagination that is currently way at the bottom of the page (and impossible to find for most visitors to the site) up to the top, or ideally, I would simply like to have scrolling arrows (with no titles) at the side of the portfolio images so that one can easily click through items. How can I accomplish this? 

Thank you.

Hi,

Add to Design > Custom CSS

/* Move portfolio pagination to top */
body.collection-62129c560e6b7b087d32985f.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;
}
  body.collection-62129c560e6b7b087d32985f.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body.collection-62129c560e6b7b087d32985f.view-item #page section:first-child {
    padding-top: 10px !important;
}

Thank you so much, that worked perfectly!

For some reason this didn't work for my site. Any chance you'd be able to give it a look?

URL: https://www.dbender-creative.com/workplace/research

@tuanphan - I've got another one I could use your help with if you've got the time. 🙂

On 5/25/2023 at 12:43 AM, BenderDC said:

For some reason this didn't work for my site. Any chance you'd be able to give it a look?

URL: https://www.dbender-creative.com/workplace/research

Use this new code for your site

/* Move portfolio pagination to top */
body.collection-644979913ea68148e08f8156.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;
}
  body.collection-644979913ea68148e08f8156.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 20px;
    padding-bottom: 5px;
}
  body.collection-644979913ea68148e08f8156.view-item #page section:first-child {
    padding-top: 10px !important;
}

Thank you! It worked! Which has now led me to a couple new questions.

1) Is there code I can add to alter the spacing above the pagination for mobile and desktop separately? I tried duplicating this and putting @media only screen and (max-width: 640px) and adjusting for mobile, then adding @media only screen and (min-width: 950px) and adjusting padding for desktop, but the mobile wouldn't change.

2) Is there a way to set a max width for the words in the pagination titles to have them push the next line? They sometimes look a little wonky when the left and the right are significantly different in length. A different idea would be to have them not center vertically but to be top aligned so there's some visual consistency.

Actually, my ideal would be to move the pagination below the section header description (see image). If that's possible, then I don't think I'll need answers to the above to questions.

On 6/3/2023 at 1:42 AM, BenderDC said:

Actually, my ideal would be to move the pagination below the section header description (see image). If that's possible, then I don't think I'll need answers to the above to questions.

I think we will need to use jQuery to move to this position. Do you use Personal or Business Plan?

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

7.1 fluid engine, portfolio sub pages

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

On 4/9/2024 at 7:58 PM, moonlitdesign said:

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

 

7.1 fluid engine, portfolio sub pages

 

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

The page doesn't work

On 4/13/2024 at 8:59 AM, tuanphan said:

The page doesn't work

www.moonlitdesign.uk/portfolio/fortheloved-photography

On 4/14/2024 at 11:26 PM, moonlitdesign said:

www.moonlitdesign.uk/portfolio/fortheloved-photography

Use this CSS code to CUstom CSS box

/* Move portfolio pagination to top */
body.collection-66056e10c29b080d49c9baed.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;
}
  body.collection-66056e10c29b080d49c9baed.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body.collection-66056e10c29b080d49c9baed.view-item #page section:first-child {
    padding-top: 10px !important;
}

I'm trying to solve a somewhat similar problem - www.josemanuelvelez.com

I have a transparent footer, but on the portfolio pages the navigation is not working, because I guess it's covered by the transparent footer. I would like to add some padding at the bottom of the navigation, or if that doesn't work, to move it to the top or side.

Here is the CSS code I used for the transparent footer:

/* Footer transparent */
body {
    position: relative;
}
body footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body footer.sections section, body footer.sections .section-background, body footer.sections .section-border {
    background: transparent;
}

body {
    background-color: #121212;
}

Any help would be great!

Just an update, I solved it with this code

.item-pagination {
    margin-bottom: 75px;
}

@tuanphan hi I’m using fluid engine 7.1. This didn’t work for me - is there any way to make the pagination appear at the top and the bottom of the page? 
 

On 7/23/2024 at 3:19 AM, ShreyaK said:

@tuanphan hi I’m using fluid engine 7.1. This didn’t work for me - is there any way to make the pagination appear at the top and the bottom of the page? 
 

Above code contains Portfolio Page ID. You can use this tool to find ID. Or share link to your site, I can adjust code easier.

https://banjo-rhino-35g9.squarespace.com/casestudies/soezi
pass:123
trying to get the pagination buttons on the top as well as the bottom so its easier for the users to toggle between case studies

@tuanphan 

Same issue with trying to move the pagination to the top. I tried all of the above codes but am admittedly still a relative novice and nothing seemed to work.  The goal is to have the Previous and Next blog posts arrows show below the main navigation panel but above the blog content rather than at the very end of the blog content.

https://www.25datesofchristmas.com/

https://buttercup-fish-y3z6.squarespace.com/config/pages/652555a593f8ca7728b7ce05/content

On 7/26/2024 at 3:27 AM, ShreyaK said:

https://banjo-rhino-35g9.squarespace.com/casestudies/soezi
pass:123
trying to get the pagination buttons on the top as well as the bottom so its easier for the users to toggle between case studies

Use this code to Case Studies Page Header Injection.

DO NOT USE CODE TO CSS BOX.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('section#itemPagination').clone().insertBefore('article>section:first-child');
});
</script>
<style>
  article#sections>section#itemPagination {
    padding-top: 140px;
}
section#itemPagination+section, section#itemPagination>section .content-wrapper {
    padding-top: 0px !important;
}
</style>

On 7/28/2024 at 1:21 AM, BenSommerfeld said:

@tuanphan 

Same issue with trying to move the pagination to the top. I tried all of the above codes but am admittedly still a relative novice and nothing seemed to work.  The goal is to have the Previous and Next blog posts arrows show below the main navigation panel but above the blog content rather than at the very end of the blog content.

https://www.25datesofchristmas.com/

https://buttercup-fish-y3z6.squarespace.com/config/pages/652555a593f8ca7728b7ce05/content

/config is url in edit mode, I can't access it.

You mean pagination titles on these blog posts?

https://www.25datesofchristmas.com/blog/2023activities

On 7/30/2024 at 4:09 AM, tuanphan said:

/config is url in edit mode, I can't access it.

You mean pagination titles on these blog posts?

https://www.25datesofchristmas.com/blog/2023activities

@tuanphan Sorry about the link. I'm not sure what format it needs to be in to be accessible.

https://buttercup-fish-y3z6.squarespace.com/

But you are correct with what you showed. Instead of this at the very bottom...

The arrows would be at the top like this....

On 8/2/2024 at 6:32 PM, BenSommerfeld said:

@tuanphan Sorry about the link. I'm not sure what format it needs to be in to be accessible.

https://buttercup-fish-y3z6.squarespace.com/

But you are correct with what you showed. Instead of this at the very bottom...

The arrows would be at the top like this....

 

You can use this CSS code

/* Move portfolio pagination to top */
body:has(.item-pagination[data-collection-type^="blog"]) 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: 200px;
}
.item-pagination[data-collection-type^="blog"] {
    padding-top: 0;
    padding-bottom: 5px;
    background-color: #5f090a
}
body:has(.item-pagination[data-collection-type^="blog"]) #page section:first-child {
    padding-top: 10px !important;
}
body:has(.item-pagination[data-collection-type^="blog"]) header#header, body:has(.item-pagination[data-collection-type^="blog"]) {
    background-color: #5f090a !important;
}

10 hours ago, tuanphan said:

You can use this CSS code

/* Move portfolio pagination to top */
body:has(.item-pagination[data-collection-type^="blog"]) 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: 200px;
}
.item-pagination[data-collection-type^="blog"] {
    padding-top: 0;
    padding-bottom: 5px;
    background-color: #5f090a
}
body:has(.item-pagination[data-collection-type^="blog"]) #page section:first-child {
    padding-top: 10px !important;
}
body:has(.item-pagination[data-collection-type^="blog"]) header#header, body:has(.item-pagination[data-collection-type^="blog"]) {
    background-color: #5f090a !important;
}