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


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


colin.irwin last won the day on August 21 2020

colin.irwin had the most liked content!

Personal Information

Recent Profile Visitors

4,746 profile views
  1. I think you can see it on the screenshot. That is a version for Vimeo embeds.
  2. I implemented autoplay videos with non standard aspect ratios on this site - https://www.inthewhiteroom.com/#home-about-us You use a video block but rather than inserting the video URL you instead use the Embed Data option to insert IFRAME code. The IFRAME code includes the height and width of the video. It can be larger than the slot it fits within because the surrounding video block sets its actual size.
  3. Hey Colin, hope you are well. I am having trouble understanding your advice on this article from 2014. You mentioned that "you can use scripting and the YouTube API to go to another page once the video ends."

    I am working with Vimeo, and was hoping to understand how I might be able to do this. I created a "landing page" in SS V7.1 buy removing the header and footer in that specific pages "Page Header Code Injection". I have inserted the video I want as the background, but I would love for it to push right to the "home" page. Right now I put an "Enter" button in there. I was hoping to just skip that step so people are brought right to the site.

    Thank you in advance,


    For reference: www.terranorbital.com

  4. Try inserting this in your Custom CSS area and experiment with the increasing / decreasing the 1.5s animation value until you get the effect you want. .homepage #block-yui_3_17_2_1_1611067680935_4040 { animation: fade-me-in 1.5s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} }
  5. The code below is part of a larger function that manages breadcrumbs for multiple sections of a client's site - blog collections, index pages and regular pages. This is just for the news section, which is a blog. First the JavaScript (this requires jQuery to be installed). Also, it's for a 7.0 site with Ajax loading enabled. For 7.1 sites or 7.0 sites with Ajax disabled you would swap out the window.Squarespace.onInitialize(Y, function() for $(document).ready(function(){ window.Squarespace.onInitialize(Y, function(){ processBreadcrumbs(); }); function processBreadcrumbs() { var thisPath = window.location.pathname; var thisPage; var breadcrumbLink; if (thisPath.includes('/news')) { $('.BlogItem-title').addClass('pad-site'); thisPage = $('.BlogItem-title').text(); $('.Main--blog-item .Main-content').prepend('<div id="breadcrumbNewsArticle"><div><a href="/">Home</a> &#187; <a href="/news-and-insights">News</a> &#187; <span class="truncate">'+thisPage+'</span></div></div>'); } } Now some Custom CSS. The first class, .pad-site, is just to format the blog post title to make it consistent with the rest of the site. The second class, .truncate, tidies up long post titles so that the breadcrumb doesn't look too long. It stops the text at 320px wide and inserts an ellipsis to indicate it has been truncated. It looks like this: The third CSS rule that begins with [id^="breadcrumb"] contains the styling for the breadcrumb links. The Custom CSS .pad-site { padding-top: 34px; font-size: 28px; } .truncate { display: inline-block; width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } [id^="breadcrumb"] { font-size: 16px; font-weight: 400; font-style: normal; font-size: 16px; letter-spacing: .1em; a { color: @black; border-bottom: 1px dotted @black; &:hover { opacity:0.8; } } } Finally, a caveat. I haven't tested this code on 7.1 sites. It's probable that it won't work by simply pasting it into your site and would need some editing to make it function correctly.
  6. Sir. I just wanted to say God bless you and your helpful code.

  7. Try this @sectionpadding: 10px; .index-section:first-of-type .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }
  8. Hello Colin,

    May i reach out to you about a Linkedin authentication failure? On different post in SQSPC forums this problem is mentiond. Is there any workaround or solution for?

    I have a few cliënts for witch this is really important...


    With kind regards,


    Lammert van der Wal

  9. Which template are you using? Can you post a link to your site?
  10. I would advise against justifying web text. It's a big usability problem. It makes copy very difficult to read particularly, but not only, for dyslexic readers.
  • Create New...