Here are some tips on Squarespace Project Pages (Portfolio Pages) in Squarespace 7.1 version.
Remove Pagination Title, Keep Arrows
Add to Home > Design > Custom CSS
/* remove pagination title */ .item-pagination[data-collection-type^="portfolio"] .pagination-title-wrapper { display: none; }
Remove Pagination Title, Add Previous/Next
Add to Design > Custom CSS
.item-pagination[data-collection-type^="portfolio"] h2.item-pagination-title { display: none; } .item-pagination[data-collection-type^="portfolio"] .item-pagination-prev-next { display: block !important; }
Change Pagination Title Size (Mobile)
Add to Design > Custom CSS
@media screen and (max-width:767px) { h2.item-pagination-title { font-size: 20px !important; } }
Change Pagination Arrows size
Add to Design > Custom CSS
.item-pagination-link .item-pagination-icon svg { width: 10px !important; }
Add Project Links under Pagination
- Edit Site Footer > Add a Text Block > Insert text links > Enter project links
- Contact me with site url. I will give the code (Each site needs different code)
Add a Button under Pagination
Add to Settings > Advanced > Code Injection > Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<div class="sqs-block-button button-block"><div class="sqs-block-button-container--center"><a href="https://beaverhero.com" class="sqs-block-button-element--small sqs-block-button-element">BACK TO ALL PROJECTS</a></div></div>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script>
Pagination Custom Font
@font-face { font-family: 'font-name'; src: url(paste font file url here); } h2.item-pagination-title { font-family: 'font-name' !important; }
Remove Draft Project on Preview/Live Mode
First, add this code to Design > Custom CSS
/* Hide Draft Portfolio */ div.portfolio-grid-basic .grid-item[href*="draft"] { display: none; } a.item-pagination-link[href*="draft"] { display: none; }
Next, Edit Project >> Add this into URL: draft
Assuming project has url is /artists/dawn-waters-bake
change it to /artists/dawn-waters-bake- draft
Above code will hide all projects whose urls contain text “draft” in portfolio page
Above code will hide all projects whose urls contain text “draft” in portfolio page
Show Portfolio Title over Image on Hover
a.grid-item { position: relative; } .portfolio-text { position: absolute !important; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); text-align: center; z-index: 999; margin-top: 0 !important; transition: all 0.3s; opacity: 0; } a.grid-item:hover .portfolio-text { opacity: 1; }
Featured Image: Pixabay.com
I need help removing or overriding the 40-page limit with the portfolio feature of Squarespace.
I have built this site for my client, and they need to have all of the pages portfolio pages on a single page, as per the current website. http://www.fsci.com.au/hospitality/
Below is the link for the existing issues I have a 40-page limit.
https://wisteria-yellow-km9c.squarespace.com/hospitality01
https://wisteria-yellow-km9c.squarespace.com/hospitality02
https://wisteria-yellow-km9c.squarespace.com/hospitality03
https://wisteria-yellow-km9c.squarespace.com/hospitality04
I need them all on one page.
Thanks & regards
Jai