tuanphan

Did you solve it?

Add to Homepage Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('article section:nth-child(1)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/lucyhawkes"; window.location.href=href; }); $('article section:nth-child(2)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/delirious"; window.location.href=href; }); $('article section:nth-child(3)').click(function() { var link = $(this).text(), href = "https://perimeterpics.com/colossus"; window.location.href=href; }); }); </script>

You need to add that code to Settings > Advanced > Code injection or Code Block If you add to Custom CS (your code is not CSS), you will get above error

Some code for Portfolio Page - Grid Simple in 7.1. All code: Add to Design > Custom CSS <style> <script> you need to add to Page Header or Code Injection #1. Change Overlay Color /* Show dark overlay on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); /* chage overlay color here */ transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } #2. Add Subtitle First, find subpage [url slug] Next, use this CSS /* Add subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01"; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 01"; } Repeat for other sub pages #3. Add Multi Subtitle /* Multi subtitle */ h3.portfolio-title:after { font-size: 20px; color: black; display: block; white-space: pre-wrap; } a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "subtitle 01 \A second subtitle \A third subtitle "; } a.grid-item[href="/grid-simple/project-two-yttz3"] h3:after { content: "subtitle 02 \A second subtitle \A third subtitle 2"; } #4. Change to 5 items/row (Desktop) /* Portfolio 5 columns */ @media screen and (min-width:992px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #5. Change to 2 items/row (Mobile) /* Mobile 2 columns */ @media screen and (max-width:767px) { div#gridThumbs { grid-template-columns: repeat(5,1fr); } } If you need to apply this for specific portfolio page, you will need assign page id to the code. Just share page url in comment, I will give the exactly code. #6. Add “new” badge to next to title /* new badge */ a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: "New"; position: absolute; top: -5px; font-size: 14px; background-color: red; color: white; line-height: 20px; padding: 2px; margin-left: 10px; } #7. Add an icon next to title a.grid-item[href="/grid-simple/project-one-m2y26"] h3:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; width: 50px; height: 50px; display: block; float: right; } Replace with [URL Slug] (see screenshot in first code) #8. Zoom in image on hover /* Zoom in image on hover */ .grid-image img { transition: all 0.3s; } .grid-image-inner-wrapper { overflow: hidden; } a.grid-item:hover img { transform: scale(1.3); transition: all 0.3s; } #9. Add “view” text when hover image /* Add view text on hover image */ .grid-image:before { content: "view"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } #10. Show Overlay + Title over image when hover (Desktop only) /* show overlay title on hover */ .grid-image { opacity: 1 !important; position: relative; } .grid-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all 0.3s; opacity: 0; } .grid-item:hover .grid-image:after { opacity: 1; transition: all 0.3s; } .grid-image:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; display: block; width: 100%; z-index: 999999; color: white; opacity: 0; transition: all 0.3s; } a.grid-item:hover .grid-image:before { opacity: 1; } .portfolio-text { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999999999; width: 100%; text-align: center; transition: all 0.3s; opacity: 0; } a.grid-item { position: relative; } a.grid-item:hover .portfolio-text { opacity: 1; } .portfolio-text { margin: 0 !important; } h3.portfolio-title { margin: 0 !important; } #11. Change Aspect ratio on sepcific portfolio page First, find [page id] Next, use this CSS /* aspect ratio 2:3 */ body#collection-622f619622029655b91503a8 .grid-image { padding-bottom: 150% !important; } 2:3 = (100 x 3)/2 = 150% #12. Remove Pagination /* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; } #13. Remove Pagination Title Only /* remove pagination title */ .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { display: none; } #14. Remove Pagination Arrows Only /* remove pagination arrows */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke { display: none; } #15. Replace Pagination Title with text Prev/Next /* Pagination title */ [data-collection-type*="portfolio"] { h2.item-pagination-title { display: none; } .item-pagination-prev-next { display: block !important; }} #16. Repalce Pagination Arrow with custom icon /* Custom pagination arrow icon */ [data-collection-type*="portfolio"] .item-pagination-icon.icon.icon--stroke svg { display: none; } [data-collection-type*="portfolio"] .item-pagination-link--next .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } [data-collection-type*="portfolio"] .item-pagination-link--prev .item-pagination-icon.icon.icon--stroke { background-image: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; } #17. Add all projects under Pagination Add to Project Page Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<section class="item-pagination item-pagination--prev-next under-pagination"><div class="sqs-block html-block sqs-block-html"><div class="sqs-block-content"><p><a href="/work" target="_blank">All</a> / <a href="/work/meccaandmedina">Mecca &amp; Medina</a> / <a href="/work/street">Street</a> / <a href="/work/humansofstlouis">Humans of St. Louis</a> / <a href="/work/charis">CHARIS</a></p></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> <style> section.under-pagination { justify-content: center; padding-top: 10px; padding-bottom: 10px; } </style> #18. Add Last Project/First Project on First Page/Last Page Pagination Add to Page Header or Code Injection Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio/12" class="item-pagination-link item-pagination-link--prev"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Previous</div><div class="item-pagination-prev-next">- PREV</div><h2 class="item-pagination-title">12 | PRIVATE EVENTS</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> #19. Add Button to Pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<a href="/portfolio" class="item-pagination-link item-pagination-link--prev portfolio-backto"><div class="item-pagination-icon icon icon--stroke"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></div><span class="pagination-title-wrapper"><div class="visually-hidden">Back to Work</div><div class="item-pagination-prev-next">- BACK TO WORK</div><h2 class="item-pagination-title">BACK TO WORK</h2></span></a>').insertBefore('a.item-pagination-link.item-pagination-link--next'); }); </script> <style> /* Portfolio back to button */ a.portfolio-backto .item-pagination-title { background-color: black; color: white !important; padding: 10px; } </style> #20. Add “Back to all projects” under pagination <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('<section id="back-to"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="/portfolio" class="sqs-block-button-element--small sqs-block-button-element sqs-button-element--primary">Back to all project</a></div></div></section>').insertAfter('.item-pagination[data-collection-type^="portfolio"]'); }); </script> #21. Move Pagination from bottom to top Add to Page Header <style> 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 .item-pagination[data-collection-type^="portfolio"] section:first-child { padding-top: 10px !important; } </style> #22.Change Pagination Title size (mobile) /* pagination title mobile */ @media screen and (max-width:767px) { .item-pagination[data-collection-type^="portfolio"] .item-pagination-title { font-size: 14px; } } #23. Change Pagination Color on hover /* pagination hover */ .item-pagination[data-collection-type^="portfolio"] h2:hover { color: #f1f; } .item-pagination[data-collection-type^="portfolio"] .icon:hover svg { stroke: #f1f; } -- Checked by @tuanphan

With blog, use this code body[class*="collection-type-blog"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg); }

Hi. Can you share link to a page where you have problem? We can check easier

Can you share link to page in screenshot?

I see you used 2 Text Blocks to add Heading 2 + H3 List Whey dont you use 1 text block to add both?

I see block on homepage is fine. With other pages, if you share links, we can check & help easier. Each case will need a different code to solve.

What is password?

Your code contains some invalid character, try this new code @font-face { font-family: 'Voyage-Regular'; src: url('https://static1.squarespace.com/static/621aa033aad7b8050d96b508/t/6231081bfba010528435a9d8/1647380507864/Voyage-Regular.otf'); } h1,h2,h3 { font-family: 'Voyage-Regular' !important; }

Which page are you referring to? I don't see it on homepage

#1. What is access password? #2. Screenshot 2 or 1 is FontAwesome? If (2), I think you can use Squarespace Font Icon. SS has a similar icon. See list here: https://tuanphan.squarespace.com/ss-ui-fonts?noredirect pass: abc

Use this code /* center mobile logo */ .header-display-mobile .header-title-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9999; }

You can setup password & share url. We can help easier

Add to Design > Custom CSS /* Disable Map Marker Title clickable */ .info-marker-title { pointer-events: none; }

You mean Facebook chat?

Add to Design > Custom CSS /* Our favorite Glam style */ @media screen and (max-width:767px) { div#page-section-61c0b2469abc8d6ded1ed073 { p:empty { display: none; } .image-block { padding-bottom: 0px !important; padding-top: 0px !important; }} }

Add to Design > Custom CSS /* Let work together images */ div#block-yui_3_17_2_1_1645672729526_28334 figure { background-color: #f1f2f3; padding-left: 10px; } div#block-yui_3_17_2_1_1645672729526_29501 figure { background-color: #f1f; padding-right: 10px; } div#block-yui_3_17_2_1_1645672729526_30488 figure { background-color: #f2f2f2; padding-left: 10px; } Find image block id with https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Can you share link to page where you have problem? We can check easier

You mean reduce image height + remove arrows or reduce image height?

Just, just remove body.homepage

This code for first image Try adding t oDessign > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1634566319563_3329 .has-aspect-ratio { padding-bottom: 50% !Important; } }

try using 800px & 500px instead of 800 & 500

Try remove this code from Custom CSS a.header-nav-folder-title:hover+div, .header-nav-folder-content { text-align: left !important; position: absolute; left: 60% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-25%); } and this code a.header-nav-folder-title:hover+div,.header-nav-folder-content { text-align: left !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-25%) }