DPruitt

I know this is an older post, however, if you still need assistance with this, I can tie video blocks, image blocks, slideshow blocks you name it into "Brine" type Index Slideshows with a bit of Java/CSS. No HTML needed. I haven't tried in 7.1, but I'm sure it can be accomplished. On a side note, does anyone know why the Index Slideshow within Brine resets to the first image when someone scrolls on mobile?

If you find yourself frustrated with saving updated color or other styling's this is the proper process with less glitches: 1. Click Edit on your page. 2. Click the Paintbrush in the top right. 3. Edit your styles. 4. Click close on the right-hand site styles editor. 5. Click Done/Save in the top left. Furthermore, if you don't do the exact process, after you hit Done/Save, you can simply hit the ESC key and it will back out of the editor into the main Squarespace Panel.

The best way to reduce the white space is to select the ratio upfront that you want the container to be. This is probably 1:1, so you might switch the container to a 3:2 instead. This will however, give more spacing on the sides to the portrait images.

The best way to accomplish this so you can get neat with customizations is to: 1. Scrap the dang gallery section. 2. Crop all the images you were going to load into your gallery to be the same ratio if you were wanting a even rows or if you wanted a wall format keep ratios as is. 3. Create a image block, click design, select inline, turn on lightbox. 4. Write in your captions below the image. 5. Style accordingly. 6. Create the "grid format" in your own way.

@media screen and (max-width: 767px) { section.page-section:first-child .section-background{display:none} }

------------- Code is now updated for mobile*

Here you go everyone. This fixes both the Product Slideshow image and the lightbox image to be 100% height of the container: /*Product Image Fix*/ .products.collection-content-wrapper .ProductItem-gallery-slides-item-image { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; } .gallery-lightbox-item img { object-fit: contain !important; object-position: middle; width: 100% !important; height: 100% !important; position: static !important; } .grid-item img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: middle; } /*END Product Image Fix*/

This should be able to assist you in making the specific change: #collection-5e7116a5d59115318c711877 #page {background-color: #FFFFFF;}

For the cart specifically: @media (min-width: 768px) { #cart .header .header-announcement-bar-wrapper { padding-left: 9%; padding-right: 9%;} .system-page { padding-left: 9%; padding-right: 9%;} } .CartTableRow-itemPrice-26eXS { white-space: pre-wrap;}

Here you go everyone. This is a free work around to get your share buttons on all of your blog posts within Squarespace 7.1 below your Blog h1 Title: 1. Sign-up with sharethis.com 2. Copy the sharethis.com code snippet and paste it within the Blog Header Injection. 3. Also add this code snippet to the Blog Header Injection: <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> $(document).ready(function() { $('<div class="sharethis-inline-share-buttons"></div>').appendTo('.blog-item-title'); }); </script> 4. Add a little CSS: #st-1 {margin-top:20px;} ----------- You can play around with other CSS styling: .blog-item-wrapper .blog-item-title h1.entry-title {max-width: 750px;} @media screen and (min-width: 1150px) { #st-1 {width: 27%; float:right; margin-top:-7%;} } @media screen and (max-width: 1149px) { #st-1 {margin-top:20px;} }

-The Process is now updated with Javascript to accomplish same window functionality for the first social link within the header.

Yep, you can do the same thing with your social links: 1. First enable your social links in your header.2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search3. Add your Font Awesome Script to your Header Injection.4. Add your css: /*Custom Search Bar*/ .header-actions--right .header-actions-action--social .icon:first-child {visibility:hidden} .header-actions--right .header-actions-action--social .icon:first-child:after { content: '\f002'; font-family: FontAwesome; position: absolute; margin-left:-1vw; margin-top: 3px; font-size: 15px; color:lightgray; visibility:visible} .sqs-svg-icon--list a:first-child {display:none} /*END Custom Search Bar*/

Anyone using Font Awesome wanting the search icon within the DIV Social Icon Wrapper of the header, here you go: 1. First enable your social links in your header. 2. Add a Link to the beginning of your Social Link List https://www.yourdomain.com/search 3. Add your Font Awesome Script to your Header Injection. 4. Include this Javascript within the Header to make the first link open in the same window: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.header-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); $('.header-menu-actions-action--social a:first-child[target="_blank"]').prop("target", "_self"); }); </script> 5. Add your css: /*Custom Search Bar*/ .header-actions--right .header-actions-action--social .icon:first-child {visibility:hidden} .header-actions--right .header-actions-action--social .icon:first-child:after { content: '\f002'; font-family: FontAwesome; position: absolute; margin-left:-1vw; margin-top: 3px; font-size: 15px; color:lightgray; visibility:visible} .sqs-svg-icon--list a:first-child {display:none} /*Mobile*/ .header-menu-actions-action.header-menu-actions-action--social:first-child {visibility:hidden} .header-menu-actions-action.header-menu-actions-action--social:first-child:after {content: '\f002'; font-family: FontAwesome; display: inline-block; position: absolute; margin-left:-15px; margin-top: -25px; font-size: 22px; color:#0db14b; visibility:visible} /*END Custom Search Bar*/ If you're wanting to have it within the navigation instead of the social links, just write your CSS accordingly and leave out the nasty javascript.

An easy Javascript Solution for overriding and enabling Folder Title Links in Squarespace 7.1: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-nav-folder-title[href="/original-url"]').attr("href", "/new-url"); window.addEventListener('load', function(){ document.querySelector('[href="/new-url"]').addEventListener('click', function() { window.location = "/new-url"; }) }) }); </script>