Search the Community

I am an HTML greenhorn and I'm self-teaching on how to insert an HTML widget into my Squarespace site. The widget insert instructions I'm working with are here: https://docs.coachingcloud.com/integrations/your-website. I followed the directions and it worked fine. However when I try to customize the look of the widget with some CSS modifications, the changes won't publish to my site. I can see my beautifully formatted button on the back end, but on the front end it's still the generic formatting. Any tips?

Does anyone know how, and if you can add a hero banner to a Brine Template header?

Hi. I just added a html block to my website. It looks perfect on desktop. But, I don't know how to get it to display correctly on mobile. Anybody have an idea? Here's the css code. Thanks! // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 10px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }

Can you enable matrix text on scrolling instead of loading? Here's the code: <matrixText style="text-align:center"><h2>*A tale of family, survival, honor, brotherhood, and courage in the face of extreme evil.*</h2></matrixText> Also, I was wondering how to set the color. Thanks.

What would cause this gray block to be there? I can't figure out how to get rid of it. I've tried adjusting the padding and it didn't work. Thanks! Website: johnetterleebooks.com

I am trying to embed SVG code to use as my image rather than using a JPEG snippet of my SVG code. My photo page will be filled with SVG art images rather than photos, so I would much prefer to embed the actual code. Is there a way to do this on squarespace?

Hey everyone! I didn't have luck finding another thread about this topic. I've created a Twine project that I would like to host and link to on my SquareSpace site. Effectively it's a standalone .HTML file/page, nothing fancy. However I'm struggling to figure out how to simply add this as a page to my site and link to it from another page on my site. I tried uploading it through the media upload and clicking the link prompts a download instead of opening it as a web page. Has anyone tried to do the same? How did you figure it out? What would you recommend? Thank you in advance.

Can you easily link to an already created page inside a custom html snippet? My site is not published yet. So far I'm doing this, which I know will not work until I publish my site, but can I do something like <a href=".../about-us"> ? <a href="https://mysite.com/services/creative-engagement" class="service-card service1"> <h3> Creative<br /> Engagement </h3> </a>

Alright, I have built my project for web and have followed several tutorials including this: http://synersteel.com/blog/2015/5/12/unity3d-hosting-a-web-build-on-squarespace-using-dropbox to embed the Unity web player in my squarespace web page. I have hosted Unity 3D file in dropbox and changed the link after u.initPlugin in my HTML file. I did everything as instructed but when I load my web page I get this: This is frustrating as it will not load (the line will not go across). How can I fix this? I need to share my Unity project publicly with a link by tomorrow.

Hello everyone, how can I modify the following code so the 90 is displayed within a perfect square and in line with everything else.

Currently on line 226 of the HTML, it has: <a href="/advocate/action-items" class="Mobile-overlay-folder-item"> Action Center </a> BUT IT SHOULD BE: <a href="https://www.californiansforthearts.org/advocate/action-items" class="Mobile-overlay-folder-item"> Action Center </a> I can't figure out how to change a line and doing code injection is not working. Please HELP!!!

Hi! I just switched up to the Wells template. I want to change the Site Title and Navagation to a custom web font I have been using. I was able to do it to my old template, but that HTML/CSS is not working for this new template. I have the font code: @font-face { font-family: 'Recoleta'; src: url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d7047ee420001652090/1564544369780/39DCEF_0_0.woff2') format('woff2'), url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d739a4d4a0001fa3e70/1564544371195/39DCEF_0_0.woff') format('woff'), url('https://static1.squarespace.com/static/5928e31fe58c62d37df2a7d1/t/5d410d63a71ed100016bafe7/1564544355607/Latinotype+-+Recoleta+SemiBold.otf') format('otf'); } but none of the HTML/CSS I have found is working for me. I have tried each of these so far and nothing. (Each at one time, not together.) #headerNav nav a { font-family: 'Recoleta' !important; } .desc-wrapper p > strong { font-family: 'Recoleta' !important; } header h1.site-title { font-family: "Recoleta"; } .has-site-title .Header-branding { font-family: "Recoleta"; } Any help would be appreciated! Thanks!

I am having trouble getting my embedded constant contact form to display on a squarespace page. The page is: http://www.acafe.com/newsletter The code I have placed in using the code block is <!-- Begin Constant Contact Inline Form Code --> <div class="ctct-inline-form" data-form-id="6526d89e-0bcc-4a9e-94ce-200b84011472"></div> <!-- End Constant Contact Inline Form Code --> I have placed this code into the footer code injection area located at: settings > advanced > code injection > footer <!-- Begin Constant Contact Inline Form Code --> <div class="ctct-inline-form" data-form-id="6526d89e-0bcc-4a9e-94ce-200b84011472"></div> <!-- End Constant Contact Inline Form Code --> But it won't display. Maybe I'm missing some part of the code or am putting the footer code in the wrong spot. Or is it because I don't have access to a code injection unless I upgrade? Anyone got a tip or a workaround?

Need assistance again with html code iframe too small. I previously used forum and received code below which help solve when page was HOME page: div#block-yui_3_17_2_1_1572567603013_10718 iframe { height: 600px; } Need help with following: First I I duplicated the HOME page and renamed it FEATURED LISTINGS and moved it to not link tab. Then I created button on footer and linked the FEATURED LISTINGS page. When I changed the code for featured listing, the frame is once again too small. https://www.guardianrealestate254.com Password to view site is: help

Hi guys it would be great if anyone knows how to make the navigation header fixed to the top of the screen on the Haute template? The mobile header is already fixed but I cant manage to do it on desktop. I imagine there might be some simple css that I can add 🙏 Thanks!

Hello, I am trying to access the HTML code of a page to modify the code of a gallery block I added. How can I go about doing that? I can't find the "Code Block" all the articles talk about, besides, I am not trying to add code from scratch, but want to modify the existing HTML. I am very familiar with WordPress where you can switch between blocks and code through a simple tab. Is there anything similar on SquareSpace? I also tried accessing the developers' website for SquareSpace but it seems like it's for building websites from scratch, while I already have a template. Help please! PS: I have a Business Plan

i have an embedded script on my site's homepage that uses JQuery's ready method to execute a function whenever I load my website. The code executes when I load the homepage the first time. But if I navigate to another page on my site and then come back to the homepage, the function won't execute again. How can I fix this? Here's the code: <div id="api_text"> <script> $().ready(function() { $.get( "https://example_url_api.com/", function(data) { const results = JSON.parse(data.body); let print_string = ""; for (var result_key in results) { const result_string = results[result_key]; $("#api_text").append(result_key + " : "); $("#api_text").append(result_value + "<br/>"); print_string += result_string; } console.log(print_string); } ); }); </script> </div>

Hi all, This is probably too big of an ask, but I'll try anyways. If we can figure this out, I'm sure it'll be useful to a ton of people. I'm looking to add an identical sticky navigation to the very top of two different websites/templates. One being Farro, the other Brine. Basically, I'm making a child brand/website of a parent website/brand, and want an universal navigation at the top of both websites. An example of what I'm looking for can be found on Deciem's website (https://deciem.com/?lang=en&region=US). There, they have a navigation which allows customers to easily visit the websites of their various brands. Similarly, I'd like to have have a universal header on both websites, with a box for the parent brand linking to its homepage, and a box for the child company linking to its homepage. Visitors of either site would be able to quickly and easily switch back and forth, and clearly see that the two brands are interconnected. I've found some useful attempts online, but nothing sufficient. Any help is appreciated. Thanks in advance.

Hello, I would like to make my logo bigger and to overlap it on top of my content, let's say, so that the blank space under the logo is smaller than it should, and that the logo comes on top of content, I've been trying using CSS but so far not successful, could someone give me an advice?I am using York template. Thanks in advance.

I have applied a filter to my main blog page that filters and sorts by tags and classes. I've found you cannot add blocks or manipulate the main blog page much. Two of my sort features rely on copy that is placed in the excerpt. I'm not sure of a better solution on where to place the copy other than there to ensure it shows up on the main blog page. For my sort feature to work I am trying to add span class tags around the copy, so I can specify in the code injection what to sort. Has anyone done something similar or have any tips? If you have any advice, please email me at jenny.grant@bustle.com. This account is connected to my coworker's email. From there I can show you my site and further explain what I'm trying to do. Thank you!

Hi everyone, I've scoured the forums trying to find a solution to my problem. Here's the sample page I'm working on: https://www.mydryeyedata.org/symptoms-list/how-it-started I'm trying to embed an iframe element on my site (on a blog post, actually). I created a survey and want to have a blog post for summary data of each question, which is accessible by an embeddable link provided by the survey platform, which should go to this page: https://www.questionpro.com/t/ZRhJQhZGgEqYG. <iframe src='https://www.questionpro.com/t/ZRhJQhZGgEqYF' width='100%' height='600' frameBorder='0'></iframe> When I'm editing in Safari or in a private tab, I just see empty boxes. I tried chrome and once I allowed unsafe elements I got the grey frowny face saying "www.questionpro.com refused to connect". I've contacted them about why their embed isn't working, but I haven't ruled out that this is a Squarespace issue. Things I've tried: I know the url is https Putting the above code into a code block doesn't work; frowny face. Putting the url in an embed block says it's not valid. Using specific code in the embed block and adding custom CSS also doesn't work; small box and frowny face. I tried the following per a few help articles (e.g. https://answers.squarespace.com/questions/69710/why-cant-i-interact-with-iframe-content.html) Code in embed block (grey < / >): <div style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;"> <iframe src="https://www.questionpro.com/t/ZRhJQhZGgEqYG"></iframe> </div> Custom CSS: (is height: 100% valid? I'm embedding like 100 iframes on my site, and some are a lot taller than 600px. I could also choose some random value) my-iframe iframe { height: 100%; width: 100%; margin: 0; padding: 0; border-style: none; /* to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css: -webkit-overflow-scrolling: touch; overflow: auto; */ } Since chrome says www.questionpro.com refuses to connect, I've contacted them. I'm not sure if they'll be able to solve anything or if this is a square space issue. Btw when I put the embed code provided into something like https://html5-editor.net/ it also doesn't work, leading me to think that it's a QuestionPro problem. @alxfyv @Jay Wilson Jr @raptra @alxfyv Thanks in advance, I'll be sure to provide updates and let everyone know what worked.

Hello all, I have a site with two languages on same template. I'm in the process of adding hreflang tags but my translated pages still have HTML language in original language. My site is in ENG, but is there a way I can override this global setting and give page it's own HTML lang setting? Been looking for a fix but can't find one. Andrew

I am wanting to use something very similar to the tooltips/definitions that show up on nearly every page of the SquareSpace Support site. As an example: This is from the Getting Started page These seem to be using the dfn html tag, and appear consistently throughout the site. Were these manually added, or is there some css or othewise wizardry that can be done to dynamically add this type of tag to every instance of a word on a given site? I'd love to have a glossary of terms with definitions/links to those terms very similar to what is happening here, but adding them manually to every instance of each word will be nightmarish. Thanks!

Hello! My website which uses the Forte template isn't working correctly on iPads. The problem seems to be only with Vertical scrolling, which doesn’t work anymore on iPadOS (v13.1.1) with Safari. Please advise! Is there something that can be done to get it work again? Best wishes from Berlin, Jason

I'm trying to make my banner images responsive for different screens. So, I've injected SVG images with the svg tag into the page header, however, the image appears above the navigation, not below it in the banner section. How can I call out the image to appear in the banner?