BBmt Posted April 26, 2022 Posted April 26, 2022 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.
tuanphan Posted April 29, 2022 Posted April 29, 2022 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; } moonlitdesign and BBmt 2 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!)
BenderDC Posted May 24, 2023 Posted May 24, 2023 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
BenderDC Posted May 25, 2023 Posted May 25, 2023 @tuanphan - I've got another one I could use your help with if you've got the time. 🙂
tuanphan Posted May 28, 2023 Posted May 28, 2023 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; } 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!)
BenderDC Posted June 2, 2023 Posted June 2, 2023 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.
BenderDC Posted June 2, 2023 Posted June 2, 2023 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.
tuanphan Posted June 3, 2023 Posted June 3, 2023 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? 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!)
moonlitdesign Posted April 9 Posted April 9 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
tuanphan Posted April 13 Posted April 13 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 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!)
moonlitdesign Posted April 14 Posted April 14 On 4/13/2024 at 8:59 AM, tuanphan said: The page doesn't work www.moonlitdesign.uk/portfolio/fortheloved-photography
tuanphan Posted April 18 Posted April 18 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; } 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!)
JMVelez Posted June 6 Posted June 6 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!
JMVelez Posted June 6 Posted June 6 Just an update, I solved it with this code .item-pagination { margin-bottom: 75px; } moonlitdesign and tuanphan 2
ShreyaK Posted July 22 Posted July 22 @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?
tuanphan Posted July 25 Posted July 25 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. 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!)
ShreyaK Posted July 25 Posted July 25 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
BenSommerfeld Posted July 27 Posted July 27 (edited) @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 Edited July 27 by BenSommerfeld
tuanphan Posted July 30 Posted July 30 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> 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!)
tuanphan Posted July 30 Posted July 30 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 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!)
BenSommerfeld Posted August 2 Posted August 2 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....
tuanphan Posted August 4 Posted August 4 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; } BenSommerfeld 1 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!)
BenSommerfeld Posted August 4 Posted August 4 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; } @tuanphan You are amazing! Thank you!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment