Leaderboard

Welcome to the new Squarespace Forum! We’re excited to re-launch this peer-to-peer community and expand our focus to help our customers connect and share code, design, and business advice that will help you be successful with Squarespace. In addition to topics around building and customizing your site, we’ve added more around getting feedback and advice about your site’s design (Feedback and Ideas) and ways to increase your presence online (SEO and Marketing). Please read over our Forum Guidelines so we can make sure this is a helpful, inclusive space for everyone. If you encounter any technical issues or need assistance with your account, please reach out.

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.

I'm consistently surprised by how many Circle Members don't understand how to share their site while it's in development. Most times when members need help figuring out an issue, people in the community need to see the page and inspect the code in order to provide an assist. I've seen countless member share urls to admin pages, or sites in Private mode which nobody can see. Squarespace provides Site Visibility Settings to allow pages to be seen by others while in development. Please take a moment to read up on this feature before asking others for help. https://support.squarespace.com/hc/en-us/articles/360022365512

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

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.

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

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

@colin.irwin Content presets and layout copy in 1.0.56 opens in every area where editable blocks are. So Footers blocks, Prefooter, other SQS https://developers.squarespace.com/open-block-field should be able to copy. Same as Products Additional infos)) But yes, it will not copy such things while you cloning just page and block area connected with page (block has page id or item id), you will be needed to do this manually.

I would look into the Universal Filter by @michaeleparkour. You should be able to achieve what you want using either a gallery page or summary block with this plugin. https://www.squarewebsites.org/products/universal-filter

This puts a grey 'glow' behind your navigation links. Put it in your custom css. nav#main-navigation { text-shadow: 0px 0px 3px #aaa; } The parameters (in order) are Horizontal shadow offset - currently set to 0px so it sits behind the image) Vertical shadow offset - currently set to 0px so it sits behind the image) Blur radius - set to 3px so that it casts an omnidirectional shadow. Reduce this value to make the shadow sharper. Color - currently set to a mid gray

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)

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

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

Hi Leah 👋 The last I heard from Squarespace was.. As I understand it, Squarespace have a pretty old billing system that prevents them introducing new features, so since August they have been upgrading it. During the transition period, some sites will be on the old system and some on the new; if you are trying to move a domain from the old system to the new, you won't be able to do this yourself using the self-service tools. Bear in mind that I don't work for Squarespace, so it would be great to hear directly from them. I understand that transfers between Squarespace sites can still be done, but it is a painstaking manual process that the Squarespace Customer Care team must do for you. I would suggest you reach out to them using live chat (at the times when it is available) and see if they can work through your issue.

If you want to display 30 images or less, you can arrange your images in the desired layout by using a Summary Block in Wall mode. Add you images to an unlinked Gallery Page and then connect the Summary Block to it.

Hi there, I'm adding Latex equations to my blog posts using MathJax. It kinda works. I noticed that if I click "edit" and access the "edit post" window to make a change (eg update a tag) the post's text will be stripped of most of braces. For example \frac{num}{den} becomes \frac. This breaks my posts and forces me to painstakingly check each of them for errors every time I need to make an edit. Note that this problem exist even if you are not using Latex... all it takes is to have a work inside braces in a text block. Interestingly I have no problems if I edit the post by clicking the post's name -- without opening the "edit post" window. I believe that the issue is due to JSON-T trying to render the text as if it were code. Is there a way to escape the curly brackets or disable JSON-T render?

Create a hard new line by holding shift and enter So.. 'Coming[shift+enter]Soon

Hi there, Currently the product variant option is only allowing one character on iPad. Now that the iPad has had it's big update and Apple featured Squarespace in their presentation for the new iPad, I imagine this is just a teething issue. Apologies if this is the wrong place in the Ciricle Forum to post this. If anyone has any advice to help that would be great :) Mary

You can set a site password to prevent users from viewing your site whilst it is under construction. You can then customise the lock screen to show 'Under Construction'. See these support articles for more information: https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords https://support.squarespace.com/hc/en-us/articles/205815178-Designing-a-lock-screen

The answer will depend on many factors, including who hosts the domain names. If Squarespace hosts the domain names (in addition to the websites), you can simply release the original domain name from the first site and add it to the new one. Squarespace Customer Care can talk you through this. You can reach out to them here for live chat at certain times of the day.

This option is available in Site Styles. You can choose "Below Branding" or "Beside Branding" for a Tagline Position.

Also, check that your logo isn't laid onto a transparent background with lots of invisible padding - you should crop out the dead space.

Hey all, I’m using the Carson template and I’ve added a squarespace:block-field to the gallery.list code but when I add content to that block in the editor, the content gets added to every page that’s a gallery. Changing the block contents changes it on every gallery page. Anyone know why this is happening? My goal is to have an extra editable block in the gallery pages but have the contents of that block be specific to the page it’s on. Essentially make the block non-global.

That's great Jim - glad to be of help.

Set the default nav text color to black in site styles. Then add this to custom css: .homepage .Header-nav--primary .Header-nav-item { color: #fff !important; }

@jordandixon Add to Home > Design > Custom CSS .index-item:hover .index-item-title { display: none; }

@jpwelchux Add to Home > Design > Custom CSS .image-block-outer-wrapper { box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.5); } Explain 1px: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box 2px: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box 3px: The blur radius. The higher the number, the more blurred the shadow will be 4px: The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow rgba(0,0,0,0.5) The color of the shadow, you can use code (#000) or name (black) or rgb (rgb(0,0,0)) or rgba.

@conan99 Add to Home > Design > Custom CSS div#block-yui_3_17_2_1_1562824166618_6558 h1 { margin-bottom: 16px; }

Awesome .. thank you so much. Have a great day. Jan*

We were stuck in an error loop on Squarespace's side that I could not connect to my third party domain provider in this case Network Solutions. In our case this was caused by a former website that was nine years old and never used having been linked already to our domain name although it wasn't live. We solved it by: 1) Having Network Solutions reset our account with them to default settings. (it was pointed to our old site that had never gone live). Squarespace requires it to be default settings as per the pdf they send you for this problem. 2) Logging into original squarespace account (figuring out that name.squarespace.com we only needed name as the ID not the rest) and resetting our password - we were in! We had two separate accounts. We subsequently deleted the first account once we unlinked everything and knew all was working. 3) under websites saw that this old website was linked to our domain name and clicked "unlink" and save Then when we went back to squarespace to our new website account and followed their instructions for connecting to a third party we no longer got an error message and were provided the DNS records we sought. Then we could follow the directions provided by support on the website.

@nancyk You can add this code to Home > Design > Custom CSS @media screen and (min-width:641px) { /* Decrease Image Width */ .ProductItem-gallery { width: 40%; } /* Increase Detail Width */ .ProductItem-details { width: 60%; } }

I don't think hovering to translate is a good solution because it won't work on touch devices such as tablets and phones.

You can normally transfer a domain away from Squarespace yourself by going to Settings, and then Domains. Select the domain to transfer and then uncheck Lock Domain. There's a full guide here: Transferring a domain away from Squarespace. Note that you can only transfer a domain to another provider if it's been at least 60 days since it was registered or transferred to Squarespace. This is a restriction imposed by ICANN, not Squarespace.

@scottzakrzewski Use this code (home > design > Custom CSS) @font-face { font-family: fontname; src: url(example.com/resources/fonts/sansation_light.ttf); } h1, h2, h3, body { font-family: fontname !important; }

@duhmingo Insert this code to Header (or Footer) <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function () { $(".logo-image a[href]").attr("href", "http://www.google.com/"); }); </script>

This worked perfectly for 7.1 on inverting the logo on the homepage. Many thanks!

In the Pages panel click and drag the page from the Main Navigation to Not Linked. https://support.squarespace.com/hc/en-us/articles/206543897#toc-remove-a-page-from-navigation--move-it-to-not-linked-

@zato try adding to Home > Design > Custom CSS .sqs-block-content { color: white; }

For what it's worth, I'm not sure that Squarespace restors a "backup" of your configuration so much as it executes a standard set of instructions during the restoration of a template to its original state (while attempting to save as much of your "main content" as possible), in a similar manner as what happens when one switches templates. However, I've not tested this, so I can't speak from experience. Also, it is possible to work with a Circle member to export/import Style Editor settings (with some limitations...if you're switching templates then things might not work out how you'd want them to). Again, that perhaps doesn't help you much (especially not retroactively) but might be valuable for you to know later, if it becomes necessary. Currently, Squarespace "...isn't optimized for importing content between Squarespace 7 sites..." (reference). And for 7.1 sites, it's not possible. Some have had some success using the Wordpress export feature (see here and here). So, it seems none of these are a great nor comprehensive solution to the issues you describe. However, it is an answer to your question: "does anyone know how to back up all of this, export it, or something", so I thought it was worth posting.

This is exactly what I was looking for, thank you so much.

Try replacing your rule with the following: body:not(.homepage, #collection-5d33fd2aa550120001edc34c) #page { max-width: 100%; margin: 140px; padding: 0; }

Hi @mwaltonstudio! You'll just need to adjust the line height in Design > Site Styles. It's under Main Content: Headings and Line Height should be something like 1.2em, just play around with it to see what looks best. Tag me and let me know if you have any trouble. If this was helpful, please like the post (bottom right).

Hey @paul2009, Completely agree, I was hoping that with the hype at the Apple event that they would be more supportive in the iOS on iPad. Good shout, I've reached out to their team on Customer Support and Twitter who said they will pass it along already. They've said they don't support iOS which is a shame for the hype we've already mentioned. So fingers crossed they add it to the app. P.s. I saw on another post Paul that you said the emojis won't working for you in the forum - they aren't working for myself either. Hope you are well!

Hi Everyone! I know many are bummed that Squarespace 7.1 does not have parallax, so here is a tutorial on how to accomplish it with just a little bit of code (you can copy and paste it from the blog post in the description!). note: it does not work in IE. While it is not a perfect alternative to the parallax that was included in 7.0 Brine templates, it will at least make your websites a little bit more dynamic with a small parallax effect. And it is also very easy to install. Literally just a copy and paste into the footer code injection. Enjoy!

We'd like to help but we need a working link to the page on your site. If your site isn't live yet, please set a site password and tell us what it is.

I am using the Five template for my website, primarily because I wanted 3 columns in my blog. However, the text attributes for image captions are hard coded (weirdly enough) to be all uppercase and the text color is a dark gray. Problem is the background on my canvas is dark gray, so the image caption doesn't read very well, AND I don't like all uppercase. Now, I know how to go in and add custom css code, but I don't know what code I need to put in in order to change the image caption text color and have it be capitalized (rather than all uppercase). Thanks for any help!

I am looking to stop some images I have on my website showing in mobile view,I am using this code: @media only screen and (max-width: 620px) { div#yui_3_17_2_2_1506869794866_1346 { display: none; }} it works however when you refresh the page, the yui has changed so it stops working. Does anyone know if there is a way to get a more a more static block id so that on refresh the code hasn't changed and it always works? My site is not live yet, so can't attach link to it... but would be good to know how to find the block Id, so I can use it on future sites also. Hope someone can help. Andrew

To have this working for headings and body text be sure to add h1, h2, and h3 like this: p, h1, h2 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; }

This is not a feature of Markdown, so all you can really do in this case is use regular HTML <a href="http://example.com/" target="_blank">Hello, world!</a>