clayyount

Use the code, but change: window.open(this.getAttribute("data-clickthrough-url"),'_blank'); to window.open(this.getAttribute("data-clickthrough-url"),'_self');

can you post a link to your site?

It's technically possible, but the "+ Legg til fler/+Add More/" part of the dynamic form you linked isn't very easy to replicate. First the good news: dynamically changing input or hidden field values based on sliders, radio buttons, and so on is relatively easy with some JavaScript injection code to manipulate the DOM, the tricky part is dynamically adding new fields. When you create a form block, Squarespace registers its parameters with the backend, and will only recognize the set amount of input fields you used to build it on submit. You can use JavaScript to dynamically add fields to the form in the DOM, but Squarespace won't recognize them, and will submit the form without passing their values. HOWEVER, you should be able to create a hidden form field in the Squarespace form builder, use JavaScript to dynamically add/remove input fields, then set the newly created fields to concat their values and dynamically change the hidden field. It's not super elegant, and requires a good amount of custom JavaScript code, but it should be technically possible. Unfortunately, there is no out-of-the-box form builder solution that will work with Squarespace forms, so making this work will require you getting your hands dirty with JavaScript. Hope that helps.

No problem, I edited my answer above to allow for looping and speed control. Make sure you remove the old code so it works correctly. Change the duration variable to your desired milliseconds between transition. Unfortunately, there's no easy way to do a fade effect.

There is a way to do it using the default gallery. It requires doing an ajax load on the gallery json to get the clickthrough urls and then some DOM manipulation to change the thumb click event. Put the code below in your page header code injection for the page with your gallery: <script> var currentPageBaseURL=window.location.href.split("?")[0]; Y.on("domready",function(e){ Y.io(currentPageBaseURL+"?page=1&format=json-pretty", { on:{success: jsonLoaded} }); function jsonLoaded(err,data){ try{ var jsonResponse = Y.JSON.parse(data.responseText); var items=jsonResponse.items Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){ var thumbId=this.getAttribute("data-slide-id"); for(var i=0;i<items.length;i++){ if(thumbId==items[i].id && items[i].clickthroughUrl){ this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){ e.preventDefault(); e.stopPropagation(); window.open(this.getAttribute("data-clickthrough-url"),'_blank'); }) } } }) }catch(e){} } }); </script> EDIT: updated it to work on mobile too.

Can you post a link to your site?

Use this Custom CSS: @media only screen and (max-width: 800px){ .sqs-lightbox-meta{ opacity:1!important; z-index:100000001; background: rgba(0,0,0,.7); } }

I updated the code in my answer. It should work now.

Link to your site?

You can use this header inject code to get the summary block carousel on your page to autoplay: <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); </script> Getting it to loop is trickier though because the "loop" gallery attribute doesn't work correctly. Since Squarespace's carousel loop option doesn't work the way it's supposed to, I had to basically override Squarespace's gallery controls and set my own interval. Because there is only one carousel on your page, I changed it to only target the first summary carousel. <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 2000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.totalGroups; var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script>

Use the nth-child() pseudo class to target a specific node. For the page you linked, you would do: #collection-5513e13de4b05d27e68b6b79 .content .sqs-row>.sqs-col-6:nth-child(1) a.sqs-block-button-element { background-color: #ffffff; color: #000000; }

1) the padding you want to affect is for the #site element which is inside the #collection-550c1227e4b01f5b2b709f0e element, not the #collection-550c1227e4b01f5b2b709f0e element itself. Change your code to: #collection-550c1227e4b01f5b2b709f0e #site { margin: 0 auto; padding: 0px 0px; } to target the #site element withing the #collection-550c1227e4b01f5b2b709f0e element 2) Same thing for content width. Target it directly and add an !important if you want to make sure it isn't overridden, but you shouldn't need to because your custom css is loaded after the style editor tweaks: #collection-550c1227e4b01f5b2b709f0e #page{ max-width:800px !important; }

yeah, I assumed your first section had the id "intro". Change #intro .banner-thumbnail-wrapper:after { to .banner-thumbnail-wrapper:after { and it'll work.

Do you have a link to your site? My code probably wasn't working because I was using the default Hayden template page to get the css selector. Post a link to your site, and I'll get your the correct CSS code.

If you just want a non-interactive down arrow, you can use a pseudo-element to do it with pure css: #intro .banner-thumbnail-wrapper:after { content: "\e02d"; display: inline-block; position: absolute; z-index: 100; color: #fff; width: 100%; text-align: center; font-family: 'squarespace-ui-font'; transform: rotate(90deg); cursor: pointer; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin-top: 100px; } if you want the rollover effect, or for it to be clickable, you'll have to use JS to append an element to .banner-thumbnail-wrapper that can take a :hover state and a click event. EDIT:Get rid of the #intro and use this code: .banner-thumbnail-wrapper:after { content: "\e02d"; display: inline-block; position: absolute; z-index: 100; color: #fff; width: 100%; text-align: center; font-family: 'squarespace-ui-font'; transform: rotate(90deg); cursor: pointer; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin-top: 100px; }