Leaderboard

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.

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

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

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.

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; }

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?

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.

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

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?

Yes, just place the below into your websites global CSS. #siteWrapper {border: 10px solid white}

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

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!

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.

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

@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>

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; } } }

@luke2 /* remove date single post */ .collection-type-blog.view-item .entry-dateline { display: none; } /* fix padding left */ .collection-type-blog.view-item .entry-morefrom:before { display: none; }

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.

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

@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

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.

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).

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.

Thank you! This tip helped me to add a site search to my header!

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?

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.

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?

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.

@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

You're charging for this service? On top of what we pay for our site? I've been a loyal customer for many years, and am very reluctant to switch, however, Shopify offers this service included in their price. I feel this should be an added feature included in the ecommerce plan.

Hey Tuanphan, I realized the summary blocks and other content is indeed accessible by clicking on entry points as in 7.0. Problem solved for now thanks for all your help!

Having the same issue here. Contacted support and waiting for response.

Can you please share a link to your website (and pwd if it is pwd protected)? And what template are you using?

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.

I have added our state and local tax percentages in the 'Tax' section of Commerce on the back end of the site. I also checked to make sure that the 'tax is included in price' is NOT checked, however when I go to the front end of our website and simulate a purchase tax line reads zero. Am I missing a step?

That's not where you inject it.. Put it in Design > Custom CSS

Excellent!

@LivAils Add to Home > Design > Custom CSS /* Hover */ nav.main-nav a:hover { border-bottom: 1px solid currentColor !important; } /* Active */ nav.main-nav .active-link a { border-bottom: 1px solid currentColor; } You can also use text-decoration: underline; but i like border-bottom

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

Thanks Christyprice for answering my question. Maybe on day Squarespace can do that, so we don't have to write it out manually.

I guess I may turn off loop, not a big problem

Do you mean this kind of thing? [Put it at the bottom of your custom CSS]. .collection-type-blog.view-item { .Blog-meta.BlogItem-meta { flex-direction: column; text-align: center; order: 7 !important; .Blog-meta-item { .Blog-meta-item--author { display: block; // show author name } } } }

You can use custom code, but you should share site url first

@Satori2046 Can you share site url?

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.

Extension has all things in one box, but if you really need particular UI Tweaks (you need Tags and Categories editing looks better) - you @mpalmer may look at https://www.squarewebsites.org/products/squarespace-admin-ui-tweaks only

Ok. That being the case, the function of the UI is relatively simple to do. I think there's more work to be done in the design than the actual development, in this case. I'd suggest you do a mockup of what you want it to look like, and have an idea of how it would function. Including: The intro sentence/paragraph if there is one. The input field (for example is this 5 digit zip or zip + 4, etc.) The submit button (if there is one, or maybe you want to automatically check once the input reaches 5 characters?) The messages (and corresponding calls-to-action), both for "Yes...' and "No..." The message that appears if the input is invalid (hopefully could be avoided by limited the field to numbers, but best to have it in the code just in case) As I said, from there I think the actual coding of it would take coder/developer less than 30 minutes to do. For example

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.

A few questions / points: Are you using the Squarespace provided subdomain rather than your own domain name? This could have a negative SEO impact Your name only appears in the site name. That's not a lot for Google to go on when it's working out an authority score. It seems like you're shying away from providing a lot of content, However, at present you have hardly any content and that's not a good thing. Links from old sites have a tendency to stick around, especially if they are from large authority sites. To Google most recent is less important than most relevant. You should consider creating links from your social site profiles (LinkedIn, Twitter, etc) to your new site. Have you told Google that your site exists? Google can behave strangely for new sites. They may initially be indexed and then suddenly disappear, only to return weeks later once Google has decided on a ranking. Even then, there is no guarantee you will reach the top. Consider setting up and maintaining a Google My Business profile

@jodineufeld .collection-type-products.view-list .Header-nav-item:first-child:after { content: ''; background: #f6d4ce; height: 6px; width: 0; display: block; margin-top: -6px !important; transition: width 1s; margin: 0 auto; width:100%; } body#collection-5d6596a273f1e00001d6fec0 .Header-nav-item:first-child:after { content: ''; background: #f6d4ce; height: 6px; width: 0; display: block; margin-top: -6px !important; transition: width 1s; margin: 0 auto; width:100%; }