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


Popular Content

Showing content with the highest reputation since 10/15/2019 in Posts

  1. 4 points
    Instead of cluttering the top of every page with several contact links, it may be easier to provide a single link to a contact page using the standard announcement bar. On the contact page you can then provide attractive links to the different contact forms. To prevent the bar from being hidden by users you can hide the 'close' button. You can do this by adding some CSS to your site at Design > Custom CSS: .sqs-announcement-bar-close { display: none; } Alternatively, a developer could code an alternative custom announcement bar very easily for you.
  2. 4 points

    Video Upload

    You need to embed your video urls in a video block. This will allow the videos to play in-place. https://support.squarespace.com/hc/en-us/articles/206544187-Video-Blocks
  3. 3 points
    If you're using a template that uses Ajax (the newer ones do) then you shouldn't add CSS using code injection like you have above. It won't work unless the page is refreshed. You could disable Ajax (in Site Styles) but you'll lose a bunch of helpful features. It's better to add the code to Custom CSS and refer to the page's Collection ID (#collection-5b1fae8eaa4a996d835b5da1) to limit the effect to that page. I've described how to use the ID here: https://sf.digital/squarespace/how-to-apply-css-to-specific-pages-in-squarespace
  4. 3 points
    Something to consider on the Hayden template: Using a fixed announcement bar may cover up the navigation undesirably when scrolled to the top of the site. Using a fixed announcement bar may cover up the navigation when the on-scrolled navigation shows up. To deal with these, you could use "sticky" instead of "fixed" and hide the navigation when the user is scrolled down the page. To do that, use the following CSS: .sqs-announcement-bar-dropzone { position: -webkit-sticky; position: sticky; top: 0; z-index: 10001; } .show-on-scroll-wrapper.show { display: none; } -Brandon
  5. 3 points
    As a test I created a gallery called test gallery. Then I gave some of the items in the gallery links I created a summary block on another page that uses the gallery as the source of its images. Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery). It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly. Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug .summary-item a[href^="/test-gallery"] { pointer-events: none; }
  6. 3 points

    here's some feedback for YOUR site

    This is directed at Squarespace, hopefully this is an acceptable section to place this complaint. I just wanted to say it is incredibly frustrating that, for the last week or so (maybe longer or shorter, I'm not sure) any time I google for a squarespace-related question and click on a search result, every single one of those links is now dead and I can't view the content unless I go into Google's cache. And none of the old topics were migrated to this forum as I discovered by searching for some of those old forum post titles. So if I really want help I have to ask the same questions all over again, which is a huge waste of time for everyone. Can you please bring back the archived support forum posts and/or figure out a better way to fix this?
  7. 3 points

    Trouble with code on webpage

    I'll confirm what Paul says. The height of the iframe is becoming zero (either intentionally or unintentionally) which causes the appearance of scrolling to the bottom (when really what's happening is the page simply shortens). Now I'm just some random developer on the internet, but glancing at the widget code, it appears that what's supposed to happen is the height of the iframe is to be reset to a new height and then the iframe sends a message to the parent (via window.postmessage()) to scroll to the desired location. If I had to guess, there's a race condition occurring between the setting of the height (or its animation) and the scrollto function in the parent window context. The "setIntervals/timeouts" in the code support this theory (they might be an attempt by the developers to work around the known race condition). So this isn't really Squarespace's issue. It may, however, be made more apparent when hosted within Squarespace due to exacerbated performance. This sort of use of iframes, postmessage and height-/scroll-setting can get very complicated. So again, take my once-over of the code for what it's worth. I understand the desire to keep the user experience within your own website/domain. However, I agree with Paul that the UI, as you have it within your site, is relatively confusing. In a case like this, I'd encourage a client to link to the third-party site and forego the complexity and confusion of the iframe (though obviously, I'm not privy to the myriad of considerations and evaluation that lead you to where you are).
  8. 3 points

    Trouble with code on webpage

    This is an issue with the widget code. It is changing the iframe height during the transaction, resulting in the strange effects that you see. I recommend placing the code on a page by itself, without the blocks above and below. These may be the cause of the issue (insufficient space) but even if they aren't, the button and text make the UI more confusing. Rather than providing the button linking to the other page, why not simply make the /scheduling link take users to the externally hosted site? You can do this by adding a 'link' to the Navigation instead of the page containing the code.
  9. 3 points

    Headline Animation w/ Custom CSS

    Hi @gramazlo. All that Colin is said, I agree with. Understanding you're probably not a developer, you do have a number of things out of place. However, I'm going to venture a guess that if you change these two lines in your code block: <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> to these two lines instead: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/CodyHouse/animated-headline/js/main.js"></script> you'll at least get your animation running. There are a number of other things that appear less-than-optimal about how you've roughly assembled this code -- things that may break on you going forward. So if things still give you trouble, you may consider hiring a developer to help you get things up and running. Note that the use of jsdelivr is to help make this as easy as possible for you, but even that is perhaps not the best approach. I hope that helps a bit. -Brandon
  10. 2 points
    Squarespace doesn't allow file uploads by visitors so you must be using a third-party service. You'll need to contact them to ask about their limits. It isn't possible for us to determine which service you are using without a working link to the page on your site.
  11. 2 points
    Hi @simon.cox I've built solutions like this before. Here's a recent client's site: https://www.moddesignbyngk.com/ If you visit the rental pages and select some items you'll see how it works. When you reach the submit page, please bear in mind it's a live site! 🙂 DM me if you're interested in more details, as it isn't listed as a plugin yet. -Paul
  12. 2 points
    I think Squarespace is down which is why we're getting the 503 message. As for the redirect message I do know how to do this I will just need to wait for Squarespace to backup and running. Did you still want the order confirmation information (order number, total...) to still display or would you prefer for this to stay hidden and just display the message?
  13. 2 points

    Fullscreen Slideshow

    Hi @Henry_lmb. In some cases this can be accomplished via CSS alone, setting the width of the block based on the viewport width, allowing overflow of the parent and adding the text via pseudo-elements. A link to the page in question with the gallery on it (and the view-only password set via site-visibility, if necessary) would help others provide more specific code. -Brandon
  14. 2 points

    Remove Business Hours placeholder

    It's actually a lot easier than that. You can go to the Design section, then to Site Styles, then select the "Hours" on your page and then deselect the 'Show business hours' option!
  15. 2 points
    This is not something that you can do inside Squarespace. The solution will depend on the product you are using for your email. The majority of business email solutions (including Gmail which can be customised for business domains) have filters and auto-response options that will enable you to reply to these messages based on the title or content.
  16. 2 points
    Are you referring to fully justified text? If so, I would warn you against using it. Justified text on screens reduces the ability of all people, but especially dyslexics and people using screens readers, to read and understand copy. There is a wealth of research to support this. https://accessible-digital-documents.com/blog/justified-text/ http://mediaaccess.org.au/accessibledocumentservice/2015/08/text-justification-is-a-key-accessibility-issue-in-documents/ https://www.w3.org/TR/WCAG20-TECHS/G169.html
  17. 2 points
    @rdreed Your code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script>
  18. 2 points

    Forte Site Title Alignment

    Try adding this to the custom css area after any other code that may already be there @media only screen and (min-width: 641px) { #headerWrapper header .wrapper { display: flex; width: 100%; justify-content: flex-end; #logo { display: inline-block; } #topNav { display: inline-block; } } }
  19. 2 points
    Try adding this to the your custom css after any other code that may be there main.Main.Main--blog-list .BlogList-filter { display: none; } If it doesn't work please provide a link to the site in question.
  20. 2 points
    Unfortunately, setting a minimum height (as suggested above) doesn't scale. It will only work above at fixed resolutions. See what happens when the code is applied: A better alternative is to use flexbox to create equal-sized containers. Add display: flex to the column container, and then for columns of equal height, add flex:1 to the columns themselves. Be careful about the specificity so that you don't inadvertently affect other elements on the same page. @romerodan to do this on your site, you'll want to put the three columns in their own section of your index page. This will enable you to target just these three columns. When flexbox is used on the page, the columns do this at different resolutions: @erin3 For specific advice for your site, please provide the URL of the page.
  21. 2 points
    Regarding the header background colour I’ve linked to the below support document which explains how the colour is set. If you’re using a transparent header then the scroll colour is set by the first sections colour pallet. https://support.squarespace.com/hc/en-us/articles/360028367571#toc-background
  22. 2 points
    @Kenni Yes, it is possible. Before Squarespace added the background videos feature, a number of articles were written explaining how to add MP4 and other types of video. For example, see this one by @colin.irwin from 2014. https://www.silvabokis.com/squarespace-tips/adding-autoplay-video-banners-to-a-squarespace-website
  23. 2 points
    This is a YouTube feature that isn't controlled by Squarespace and can't be disabled. The solution is to use a paid plan on another supported video service like Vimeo or Wistia. See https://support.squarespace.com/hc/en-us/articles/206542397-Adding-videos-to-your-site The video will always take some time to preload; the delay will depend on the visitor's download speed. This is what fallback images are useful for. They can be shown until the video is ready to play.
  24. 2 points

    Keep Menu While Scrolling

    Here you are. Insert this via the CSS Editor: @media only screen and (min-width: 767px) { #header { position: sticky; top: 0; z-index: 9999; background-color: #F0F4F4; } } A few notes: This doesn't affect the mobile header/navigation. To do that properly, you'd need to use JavaScript. If at some point your body background color becomes different than your header color, things would get more complicated. The code above will work in modern browsers, but not older ones. Older ones will simply have the non-fixed header (not a big deal).
  25. 2 points
    Olivia It concerns me that you may be using code you don't understand. If that's the case, please consider getting help from an expert who you can trust, rather than from forums like this. Adding JavaScript (anything with a <script> tag in it) can expose your website to security and performance risks, including malicious code and surreptitious tracking. In summary, if you don't understand the code, please don't use it. There’s no guarantee that a script is doing what you think it is.
  26. 2 points

    Social links button on Navigation

    Thank you! This tip helped me to add a site search to my header!
  27. 2 points
    You will need some sort of script that can calculate the number of elapsed days since whatever your start date is and then calculate each variable. It looks to me like that is already structured for an existing script. Where did you get it from?
  28. 2 points

    Social links button on Navigation

    I've added social links to the nav in the York family templates, so that same method may work for Wexley as well. It requires a bit of a workaround, but it's possible if you are on a Business plan or better. Step 1: Copy and paste the stylesheet code below into Settings > Advanced > Code Injection into the HEADER box. (You can check the fontawesome.com website to be sure this is the most recent CDN code to serve up the icons.) <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> Step 2: In Pages, click the + beside the navigation area you want to use (we used Secondary Navigation in the example above) and under Create New Page choose Link. For Link Title add the Font Awesome code for the icon from their site. For example, instagram is <i class="fab fa-instagram"></i> And for Link you’ll just paste in your social media url and remember to click “Open in New Window,” as it’s best practice to open a new window when linking to another website. More details with a video on this post.
  29. 2 points
    Do you want the book to be downloadable? Do you want to charge money for it? Or are you thinking of embedding the book in the page so that it can be paged through?
  30. 2 points
    Hi @Marta. Yes, there is a way to do this. You can find example code in varies places by searching this Forum (Google will also get you results from Answers), including one I posted here. It may require some adjustments to be made for your use case specifically. If that's the case, I'd guess it'd take a developer less than an hour to get you up and running.
  31. 2 points
    @ibamstrup Add to Home > Design > Custom CSS ul.folder-child { background: white !important; } .folder-child li a { color: black !important; } Reference: https://beaverhero.com/forte-squarespace/#Change_Navigation_Drop-down_Color Please Like if the answer is correct
  32. 2 points

    API Page Creation

    No php as @colin.irwin said but sometimes your rental API allows to fetch things with just browser JS, also if your rental API allows to export to CSV or XML - it may also be an option to upload that file somewhere and fetch it. What about me - I prefer 2 way I described - you just hit the button and got articles generated in seconds (or minutes if many). And you do not need to think about search engines and metatags/JSON-LD generating because you have regular Squarespace blog articles, so things are already there (or additional may be added in the moment of generation article)
  33. 2 points

    API Page Creation

    Yes, but it would require custom coding that exceeds the scope of free forum coding tips. I built something similar for a holiday company. The process was: Parse the api data and save it as session storage Build filterable price/availability grid Build various widgets that allow the stored data to be presented on category and product pages. The time to specify, design, build and test was significant. Days rather than hours. Here’s the site - https://www.bigweekends.com
  34. 2 points
    There is a min-height of 33vh set on sections. You need to override that to get the sections smaller. For all sections this would be: .page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools. Somethig like this: .page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
  35. 2 points
    The answer is to add CSS via the CSS Editor in order override your general setting for just that section. It's quite simple, but it does require some understanding of how Squarespace generates the underlying code for index sections such as that. Simply put, in your template, Squarespace creates a "section" element for each index page you create, and gives the section an "id" attribute based on the URL you assign to the page. Taking that all together, we have: section#video .Index-page-content { padding-top: 20px; padding-bottom: 20px; } Insert that via the CSS Editor and adjust to your liking. Note that you have a couple spacer blocks at the top of that section that you'll want to remove if you really want to close that gap. In the future, if you want to look into how this code is generated, get comfortable using your browsers developer tools and poking around with the inspector. Do let me know how this works for you.
  36. 1 point
    For clarity, this is for people purchasing through a Squarespace hosted ecommerce store. I am not looking to pay for my account on a payment plan.
  37. 1 point

    Background Color

    /* Product Items */ .collection-type-products.view-item .Main-content { background: #fff; } .collection-type-products.view-item .Header.Header--bottom { background: #fff; } .collection-type-products.view-item .Header.Header--bottom * { color: black; } .collection-type-products.view-item .Main-content * { color: black; } /* Cart page */ body#cart .Main-content { background: #fff; } body#cart .Header--bottom { background: #fff; } body#cart .Header--bottom * { color: black; } body#cart .Main-content * { color: black; }
  38. 1 point
    You need to share your site url or template name.
  39. 1 point
    What content? @jamesdesignsuite If only simple content, you can try adding to Home > Design > Custom CSS .collection-type-blog.view-list .main-content section:first-child:before { content: "Creating, elevating, createing, elevating,Creating, elevating, createing, elevating,Creating, elevating, createing, elevating,Creating, elevating, createing, elevating,Creating, elevating, createing, elevating,"; display: block; text-align: center; padding-bottom: 20px; font-size: 20px; color: #6a6a6a; font-family: monospace; }
  40. 1 point
    It could be a problem at the Vimeo side or on the Squarespace side. If I were you I would check with Squarespace Support to see if this is a known issue.
  41. 1 point
    If you change your images to Image Cards you can get a layout like you want, I think. https://support.squarespace.com/hc/en-us/articles/205814528-Image-Blocks#toc-image-block-layouts
  42. 1 point

    CSS code video background

    I guess I may turn off loop, not a big problem
  43. 1 point
    Absolutely, I have linked to a support document about creating anchor links below. https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links
  44. 1 point
    There's probably a more elegant way of doing this, but the following should get you there @media only screen and (max-width: 640px) { .homepage #block-yui_3_17_2_1_1572010646013_3853 { .slide img { height: 400px !important; width: 600px !important; left: -100px !important; } } } Play with the height and width, but keep the aspect ratio correct. Use the left setting to get the center of the images in view. NB. This only really works if all images have the same aspect ratio. Otherwise images will get stretched. For this reason you should put all your images (including portrait ones) on a 3:2 aspect ratio canvas.
  45. 1 point
    @michaeleparkour‘s Chrome extension has UI enhancements that make category and tag maintenance easier. https://www.squarewebsites.org/squarespacewebsites-tools-extension-pro
  46. 1 point
    @embroom You need to know HTML/CSS to use inspect element. If you don't know, you can still use Inspect, but in most cases you won't be able to use the right code. I wrote some custom code for 85+ Templates on Squarespace, You can read. You should share site url to community help.
  47. 1 point
    Those flip things can be embedded but with varying degrees of difficulty. On one system I've embedded all I needed to do was force the aspect ratio of the iframe holding the pages so that it worked correctly on desktop on mobile. That was a hosted service. This is pretty easy stuff. There are other solutions where the scripts need to be installed on the Squarespace site. That is more challenging because they usually have a folder structure that (without going into developer mode) would need to be rewritten to cope with Squarespace's single level /s/ directory structure. This is can be painful (and sometimes impossible) to implement without racking up time and money. If you're going to do it I suggest you post a few possible solutions up here to get guidance from myself and others as to which would be easiest to implement.
  48. 1 point

    Making logo bigger on York

    @eva2 try adding to Home > Design > Custom CSS @media screen and (min-width:641px) { #navigator .siteTitle img { margin-bottom: -150px; } }
  49. 1 point
    That's great Jim - glad to be of help.
  50. 1 point
    Add this to your custom css. You'll need to add your gradient and also the transition but the below will work. .homepage .slide a{ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); &:hover img { opacity: 0.5 !important; } } If this helps you please hit Like
This leaderboard is set to New York/GMT-05:00
  • Create New...