LJSpace

@JonJonJon I think I'm just going to purchase this plugin instead. I need it anyway to have a summary block gallery display more than 30 items. from @michaeleparkour We have it now in Lazy Summaries https://www.squarewebsites.org/products/lazy-summaries Edited December 22, 2019 by michaeleparkour

@JonJonJon I did this by creating multiple summary blocks with the exact number of items I wanted per row at each screen width and then showing and hiding them using media queries. But I noticed that it impacted my page speed, so I'm trying to find a better solution.

Here you go: /*SquareSpace Lightbox*/ .sqs-lightbox-overlay.light { background: rgba(255,255,255,.98) !important; color: #3e3e3e; } .yui3-lightbox2 .sqs-lightbox-close:before { position: absolute; color: #445b6d; font-size: 40px; right: 5px; width: 40px; height: 40px; font-weight:900; line-height: 100%;} .yui3-lightbox2 .sqs-lightbox-previous:before, .yui3-lightbox2 .sqs-lightbox-next:before { color: #0ab0ff; font-size: 33px; font-weight: 900;}

Ghost Plugins strikes again: https://www.ghostplugins.com/secret/841l164f I think you may need a business account to use this SS feature. P/W for GhostPlugins secret plugins is "whisper" I highly recommend subscribing to their list, they are awesome! From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Header Code Injection box. <script> Y.on('domready', function(){ var mobileSocial = Y.one(".Header-social").cloneNode(true).addClass('.mobile-social'); Y.one(".Mobile-overlay-menu-main").append(mobileSocial); }); </script>

Update: I also did the same for the links in my header. And I realized I didn't need the "!important;" tags since this is a new element --can you guys tell I'm new at this?! Hopefully this will help someone somewhere. Also note that I needed to decrease the font size to match the corresponding icons since the social icons in my header are a lot smaller. Alllso, for anyone wondering why I didn't just do font awesome icons in my secondary menu or tagline, I'm using a double header with a logo in the middle and navigation on either side. So this was pretty much the only option I could think of. .SocialLinks-link.url { visibility: hidden; } .SocialLinks-link.url:after { visibility: visible; display: block; position: absolute; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 0.8em; color: #455b6d; content: "\f879"; background: white; text-align: center; line-height: 28px; width: 28px; overflow: hidden; }

Don't have an answer for this question. But for anyone trying to add custom social icons to the SquareSpace social icons block, I used @tuanphan's code with FontAwesome instead and am really happy with how it turned out. It's definitely not perfect (as mentioned in the above question), but will do until SquareSpace adds the additional icons we need such as Phone and Whatsapp. *Ahem* @SQUARESPACE FYI I am using the XL Circle Knockout icons! .sqs-svg-icon--wrapper.url { visibility: hidden; } .sqs-svg-icon--wrapper.url:after { visibility: visible !important; display: block !important; position: absolute !important; font-family: "Font Awesome 5 Pro"; /*for some reason writing "Font Awesome 5 Free" didn't work even though I have the free plan, this solved the problem for me*/ font-weight: 900; font-size: 1.3em; color: #728291; content: "\f879"; /*This is the unicode number from whichever font awesome icon you select, make sure you leave in "\" before the number otherwise it won't work*/ background: white; text-align: center; line-height: 48px; /*This number is VERY important in order to get it to align correctly in the circle, square or whatever size icons you have, I got the size from doing inspect on Google Chrome and looking at what size SquareSpace was using for knockout circle icons I am using*/ width: 48px; overflow: hidden; }

@eugeneoei Strange, maybe try again, I think SquareSpace made some updates. I also started using a different code for this, which I found in an earlier post since I wanted to target a specific gallery. Remember to add this to the page header code injection OR the header code injection for the Index if it's in an Index. Also it may not work in preview. Try testing it from an incognito window in your browser. <script> Y.on('domready', function () { try { var container = Y.one("#reviews"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":9000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script>

@bheiberg change from 10000 to something like 5000 the lower, the faster "timeout":10000,

--I'm not a coder-- but I mixed code from a couple of answers and got this to work in the updated 2019 SS. Note: It does not work in the preview and you have to view your site from an incognito window (aka signed out of the backend to see it). PLUS you need to add this to the page header code injection section. If the page is in an Index, you need to add it to the Index's header code injection. <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i < galleries.length; i++){ galleries[i].setAttrs({ "autoplay": true, "autoplayOptions": { "timeout":10000, "randomize": true } }) } }); </script>