taylorroy

Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
 
Checked & Wrote by tuanphan

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

Thank you for lending your expertise! Glad to know I wasn't missing an obvious trick, and happy to receive the Orders API suggestion.

I agree, I see the same issue daily. It is VERY frustrating that you cannot look through the orders panel and quickly see which "product" each customer has purchased. There is good news coming but I'll DM you about this.
For the moment here are the only two workarounds that would allow you to easily view what each customer purchased in a table style format:
1. Export to a CSV 
Yes, I know! This isn't what you want - me neither! It is far from ideal but it does save all that clicking. Problems: It's a single snapshot, it requires a separate tool and there are many more columns than you need, and so on. I see the same problems and would prefer a better solution.
2. Connect an RPA tool using the Orders API
As each order comes in, the order data could be exported to a "live" document where the required details are shown in a table format, allowing you to view the data that you need. Squarespace has an Orders API that allows a third party Robotic Process Automation (RPA) tool like Parabola or Make (formally Integromat) or hire a developer to connect to Squarespace and check for new orders (or be notified of them). The required order information can be retrieved from each order and placed somewhere as simple as a Google Sheet or as complex as a Customer Relationship Management (CRM) system.
I hope this helps.
Did this help? Please give feedback by clicking an icon below  ⬇️

Updated, works great now. Thanks so much for your help.

update the code, kindly update accordingly

Oops, let me check later in the day

@Jprood
I think I have the answer to your issues.
First remove (make a copy) or comment out any code that you added in previous attempts.
Add the following to Design > Custom CSS.
@media ( hover: none ) {   .cursor {        display: none !important;          }   } * {   cursor: none;      } .cursor {   --size: 10px;      height: var( --size );   width: var( --size );      border-radius: 50%;   pointer-events: none;   position: absolute;   transform: translate( -50%, -50% );   z-index: 99999999999;      } .cursor.cursor-dot {   background: #ffffff; /* This defines the color of the cursor */   mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */   transition: width 0.6s, height 0.6s, background-color 0.6s;   transition-timing-function: ease-out;      } .cursor-dot.active {   --size: 50px;      background-color: #ffffff;      } Add the following to Settings > Advanced > Code Injection > HEADER. 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER. 
 
<script>   $( ( ) => {        $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );        $( window ).mousemove ( function ( e ) {            $( '.cursor' ).css ( {                left: e.pageX,         top: e.pageY                  } );                } );            $( window ).mousemove ( function ( e ) {            $( 'a' ).on ( 'mouseenter', function ( ) {                  $( '.cursor' ).addClass ( 'active' );                  } );                } );            $( window ).mousemove ( function ( e ) {            $( 'a' ).on ( 'mouseleave', function ( ) {                $( '.cursor' ).removeClass ( 'active' );                  } );                } );            } );        </script> You will need to change the colors to match your color scheme.
Let us know how it goes.

try add this code injection, footer
<script> const overlayCls = 'is-mobile-overlay-active'; document.addEventListener('mousedown',(e) => { if (!(e.target.closest(".Mobile-overlay") || e.target.matches(".Mobile-overlay")) || (e.target.matches('.Mobile-overlay-close') || e.target.matches('.Mobile-overlay-close')) { if(document.body.classList.contains(overlayCls)) { document.querySelector('.Mobile-bar-menu').click(); } } return true; }) </script>  

this one?

@bangank36 yep!

I would like to apply this sort of feature to my Mobile Menu forced on desktop. As in, this menu opens on the right side and I'd like to be able to exit by clicking outside. What code could I use to close the menu when user clicks outside of the menu / over the main body, without using the 'x'?
site: https://tjr-new-site.squarespace.com/portfolio/
pw: troytroy
Thx!

Hi,
Sorry for the delay. Overloaded.
You want it to appear always on the right, not slide from left to right

Move code to HomePage Header

I can help create it using summary block or gallery section so you can edit the content later easier, kindly pm me for detail

Site URL: https://tjr-new-site.squarespace.com/slider
I’m looking to create an accordion / slider where each section expands on hover, as demonstrated in the gif mockup. I'm having trouble adapting the code snippets I'm finding to have the right animation, and formatting the content within each section (most I've seen use full background images with caption). 
The code I started with: https://www.cssscript.com/pure-css-horizontal-responsive-image-accordion-slider/
pw for my scary first attempt: troysitehelp
I'd love anyone's input on how to "hack" this for squarespace—i.e. laying out content in SS editor, and adjusting the code to reference this, or if anyone would like to quote an estimate to build this.

Add new code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> const lnames = document.querySelectorAll('.last-name input') const lnameFields = document.querySelectorAll('.last-name') $(document).ready(function(){ lnames.forEach(lname => { lname.value = "-" }) lnameFields.forEach(lnameField => { lnameField.style.display = "none" }) }); </script>