Here are some tips on Squarespace Project Pages (Portfolio Pages) in Squarespace 7.1 version.
In this post
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