Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by clayyount

  1. You don't need anything in the content string, but you need to change our the css selector to match your images's classes. .image-block-wrapper:hover img.thumb-image[data-image="IMAGE_URL'] was for hannamathilde's site, and probably doesn't apply to yours.
  2. Use the code, but change: window.open(this.getAttribute("data-clickthrough-url"),'_blank'); to window.open(this.getAttribute("data-clickthrough-url"),'_self');
  3. It's probably someone in developer mode. It may be based off a current template, but it looks like when you switch to developer mode, your site gets a unique template id.
  4. This Custom CSS will vertically align the text in a consistent button height and gives the text a nice line-height. Good for a grid: .sqs-block-button{ display:table; min-height:60px; } .sqs-block-button .sqs-block-button-element--small{ display: table-cell; vertical-align: middle; line-height:1.2em; }
  5. Sorry, I edited it again to target the specific image URLs so you can move the content around on the page without breaking the code.
  6. Edited my answer to allow for multiple background images
  7. Custom CSS code. This increases font size of the list of selectable items: .form-wrapper .field-list .field .option{ font-size:18px; } This increases the text in the message area: .form-wrapper .field-list .field .field-element{ font-size:18px; } Change the font size from 18px to whatever your preference is.
  8. 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.
  9. 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.
  10. You can't change the spacing of the text-decoration underline since that is determined by the font. However, you can use a 1px bottom border instead like so: #main-navigation ul li.active-link>a{ border-bottom: 1px solid YOUR-LINK-COLOR; color:YOUR-LINK-COLOR; padding-bottom:1px; }
  11. 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.
  12. 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); } }
  13. You can do this with just Custom CSS: EDIT:I realized it's probably better to just target the actual image urls as opposed to their row: .image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace0be4b05d27e545eaf5/1427820045453/flagship.jpg"]{ content:""; display:block; background-size:cover; /* FIRST IMAGE*/ background: url(YOUR_IMAGE_URL) no-repeat top left; } .image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace62e4b01144c47b8ffd/1427820132658/78.jpg"]{ content:""; display:block; background-size:cover; /* SECOND IMAGE*/ background: url(YOUR_IMAGE_URL) no-repeat top left; } .image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace30e4b01144c47b8e4d/1427820082298/"]{ content:""; display:block; background-size:cover; /* THIRD IMAGE*/ background: url(YOUR_IMAGE_URL) no-repeat top left; }
  14. 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>
  15. Use this in your Custom CSS, changing YOUR-LINK-COLOR with your desired color. #main-navigation ul li.active-link>a{ text-decoration:underline; color:YOUR-LINK-COLOR; }
  16. 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; }
  17. 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; }
  18. 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.
  19. 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.
  20. 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; }
  21. Hi, My template is the one linked above. If you have any questions about how to implement it, please contact me, and I'd be happy to help you out!
  • Create New...