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

colin.irwin

Circle Member
  • Posts

    3,517
  • Joined

  • Last visited

  • Days Won

    92

Everything posted by colin.irwin

  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. 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;} }
  4. 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.
  5. Try this @sectionpadding: 10px; .index-section:first-of-type .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }
  6. Which template are you using? Can you post a link to your site?
  7. 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.
  8. Do you mean you want it to be a different size on mobile? If so, adding the following to your custom css should help @media only screen and (max-width: 640px) { h4 { font-size: 88px; } } That should work - all you need to do is tweak the 88px to whatever value you want.
  9. You'll need to set a breakpoint at whatever stage the layout breaks (looks like roughly 1400px wide) At that breakpoint you should target the collection id to restrict the rule to one page and then for the columns that are 4 wide to span 100% of the available width. @media only screen and (max-width:1400px) { #collection-5cda8559cb2c42000142030b section#le-conseil-1 .sqs-col-4 { width: 100% !important; } }
  10. In the editor, scroll to the bottom of any page and edit Info Footer Content to remove the text.
  11. Try this input.field-element::placeholder { color: red !important; }
  12. Try turning off parallax scrolling in Site Styles if it is enabled.
  13. A link to your site would make it easier to provide a solution.
  14. Personally, I wouldn't use inline styles in a code block for precisely the reason that you have highlighted - it's difficult to make them responsive. However, you may be able to get things looking better with your inline styles if you use vw units rather than em. vw is relative to the viewport width. A better approach is to learn how to target a specific block for styling. This Chrome extension shows you block names that you can use in custom css. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Enabling the extension in your Chrome address bar will overlay the collection ID and block ids on a page. To style a text block containing the example you gave earlier you would create a normal text block and insert 4 centered lines of text. #the-block-id { p { font-size: 2vw; // the first para } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } Note that the vw values I have used may not be ideal but you can tweak them. Also, the way I have targeted the paras isn't the most elegant, but it should work and give you an idea. I would use the above to get the sizing correct for wide screens and then create breakpoints to tweak the size at smaller screen widths. #the-block-id { p { font-size: 2vw; // the first para @media only screen and (max-width: 640px) { font-size: 3vw; //increase text size for screens up to 640px } } p + p { font-size: 2.5vw; // para followed by a para, so 2nd para } p + p + p { font-size: 3vw; // para followed by a para followed by a para, so 3nd para } p + p + p + p { font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para } } The above shows an additional breakpoint for the first para on screens under 640px in width.
  15. Try adding the following to your custom css area (Design > Custom CSS) .html-block a:not(.sqs-block-button-element) { color: red !important; // standard link color &:hover { color: blue !important; // hover color } &:active { color: green !important; // color link goes when clicked } } Then insert the colors you need.
  16. I haven't worked with Revolution Slider but I have adapted other JavaScript utilities to work with Squarespace. If you have non minified code it's relatively straightforward, though can take some time, to go through the code and swap out all references to /assets/ /css/ /fonts/ and replace them with /s/. That sets the code to expect everything to be in one folder. You should now move everything from /assets/ /css/ /fonts/ into a single directory with your script and test it locally. If it all works you should be good to upload all of the files to the Squarespace site. This can be time consuming because you need to upload the files one at a time. Another option, if you are working in Squarespace 7.0, is to work in developer mode, where you have the flexibility to upload folder structures. This comes with a downside - your template is effectively locked the moment you engage developer mode - but it means there's no hassle in modifying folder structures.
  17. Squarespace sites are responsive. The aspect ratio of image and video banners is dependent on the user's screen dimensions and browser width. Typically you'll see the banner going from landscape to square and then to portrait as browser widths get smaller. You should think about it in the same way TV stations coped with the transition from 4:3 to 16:9 widescreen tvs. Editors used to work around the 'dead' areas where text would be cut off on a 4:3 screen and avoid having key action happening in those dead areas. For Squarespace to be as safe as possible the primary content should be in a central square on the video. You should consider optimising for the most popular screen dimensions used by your visitors. Also, the black bars are typically used to fit wider screen video into a 16:9 broadcast video aspect ratio. With the web you're not restricted to 16:9 so you can crop the output in your video editing package to remove the black bars and render it at exactly the aspect ratio you need.
  18. The safest way to do this is to create a new free trial to build the redesign in. If there are large amounts of content from the old site that need to be in the redesign you can use @michaeleparkour's chrome extension to copy content from one site to another. https://www.squarewebsites.org/squarespacewebsites-tools-extension-pro Once the redesign is ready to go live you have a couple of options. Disconnect domain from old site and reconnect it to new site. Temporarily password the old site, delete its content and use the chrome extension to copy the content for the new site into place. You'll also need to copy across code injections, site styles settings and custom css. Which of the above you prefer to do will be influenced by the following factors: If your current site is commerce enabled option 2 is preferable because otherwise you lose customer information and sales history Do you have a large amount of your subscription period to run? If so, option 2 is again preferable because it runs on your existing subscription. Note that Squarespace Circle members can get partial refunds for early subscription cancellations. Option 1 involves less work and, in my experience, switching the domains over is very fast. Most of the DNS settings are already in place so you typically only need to change one CNAME and everything kicks in.
  19. Are you trying to center the search interface within the page and then tweak the date picker height? If so, for centering the search interface you should wrap it in another div and then center the search within that. <div id="search-widget-wrapper"><div id="search-widget">..the script..</div></div> Then center it using the following inserted into the custom css area #search-widget-wrapper { width: 100%; #search-widget { margin: 0 auto; } }
×
×
  • Create New...