Coding the heck out of Squarespace, one WTF at a time.
Hey there! I’m B. I’m a Squarespace customization expert who loves to support ambitious and creative designers in their coding endeavors.
I truly believe that understanding the logic behind code is the key to growing your customization skills. That’s why I focus so much on explaining what’s actually happening when facing an issue and what needs to be done to fix it. Because of that, I get really nerdy really fast when designers ask me for help, so I know that my teaching style isn’t for everyone.
However, if you already know enough about code to cause serious damage and want to learn even more, I’d love to help you keep rocking client projects, with less stress and in less time.
Hello, and thank you so much for this fantastic tutorial! I have it working flawlessly! Would you be willing to help me figure out how to make the rotating text "scalable" - that newish feature on SQSP that adjusts the text based on the word size? In any case, I've subscribed to your channel and have bookmarked your website! Thank you again for all the amazing SQSP customizations!
Hey Michael! I'm happy to hear you found the tutorial helpful and thanks so much for the support, I really appreciate it 🙌. That's a really great question, I love the idea. I'll look into it and see if I can cover it in an upcoming vid! In the meantime, you can check out this tutorial on creating "responsive" text with the clamp() function: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QzRGX2fPxFc.htmlsi=MQLKWc2gei88omx-
This is a great video! Can you please make one by displaying all categories and subcategories without going to another page. And if there's a possibility to select multiple options to narrow down the search even more, that would be lovely. Thanks!
I appreciate that, thank you! You'll need a hefty third-party plugin to make that happen, so I highly recommend checking out Squarewebsite's Universal Filter! It'll help you achieve exactly what you're going for and more: www.squarewebsites.org/squarespace-plugins/p/universal-filter
Nice, but for multiple pages it doesn't work. I added the most current html code, the second navigation menu doens't get clickable. Code Footer: <script> $(".header-nav-folder-title[href='/producten']").click(function() { window.location.href = "/alle-producten"; }); $(".header-nav-folder-title[href='/subsidies']").click(function() { window.location.href = "/alle-subsidies"; }); </script> Still the subsidies drop down is not clickable. @Beatriz Caraballo. Could you tell me why it doesn't work? Things I already tried: - switched the "subsidies" code with the "producten" code. Than producten was still clickable and subsidies not. - controlled the URL name of the subsidies page, this was right - I putted another URL of another page in the "new link section", still subsidies was not clickable.
Thanks for sharing your code and troubleshooting steps, that's really helpful! The code is correct so, unless there's a typo, that doesn't seem to be where the problem is coming from. I'm afraid I can't pinpoint the issue without seeing the site, however I would recommend testing on a Guest Mode or Incognito window to see if the problem remains. It could simply be an editor glitch. If it's still not working after that, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look at your site!
This was such a great tutorial! Quick Q - how would you take out the bounce/sliding from top effect and instead just have the words flash in? Is this a simple tweak in the code? Thanks!
Thanks so much! I'm glad you liked it. And that's a great question, you can absolutely do that. You'll need to: 1. Modify the original CodePen CSS code and remove aaaaaall the instances of the transform property (both with and without the -moz-, -webkit- and other prefixes) from every single @keyframes snippet. 2. Look for the top offset property inside the .sp-headline.slide b { } snippet and set it to 0 instead of .2em. 3. Adjust the padding: 15px included in the post code: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace as needed, if applicable. Hope that helps!
This is really helpful, thank you. My fields aren't expanding when I click on them. Is it because I have other scrolling behavior CSS in there? Or am I missing a step? This is the other code I have currenly implemented: html { scroll-behavior: smooth; } /* Hide scroll indicator */ .Index-page-scroll-indicator-line { visibility: hidden; } /* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #6aaa44; }
I'm glad to hear it! The code you're sharing doesn't affect the behavior of the form, so it's probably something else. Go ahead and double-check that you have all the code needed, including the jQuery library, inside your site: www.beatrizcaraballo.com/blog/collapsible-squarespace-form-sections Both jQuery parts need to go inside the Code Injection section, and the CSS inside the Custom CSS window. If that doesn't work, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look at what may be going on!
Hello - thank you for the tutorial. I am trying to limit the number of related products to 3 (total). Do you know how to do this using css? I've tried this code from another forum discussion, but it's not working. Thank you for considering. .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+4) { display: none; }
You're most welcome! 🙌 And that's a great question. The snippet you shared works for 7.1 shop pages, so perhaps it's just a glitch in the editor. Try refreshing the page after adding the code or looking at your site via Incognito or Guest Mode. If it works there, you're all set! If not, I'm afraid I can't pinpoint the issue without seeing the site. You can try 1) making sure there are no typos in your code and 2), double-checking you've added it to the Custom CSS window. If none of those troubleshooting steps work, feel free to reach out through beatrizcaraballo.com/contact so I can take a closer look!
Hi Beatriz, I'm trying to implement this code and Squarespace is telling me I have a syntax error on line 1. In fact, adding a simple line of code like <b>hello</b> gives me the same result. I got to about the 5:16 mark in your video and my page didn't go grey. In fact, nothing changed at all. From what I've googled, there are a lot of issues embedding html onto javascript sites. Am I just running into a fluke error? Should I just keep coding and wait for the page to populate? It should also be noted that when I right click on my page and search through the "Inspect" option, I can't find my initial code injection at all (mine matches yours exactly).
Hey Lynette! I'm afraid I can't be 100% sure of what's going on without looking at the site, but from what you're describing it seems like the HTML is being added inside the Custom CSS window. Is that correct? If so, keep in mind only CSS can be added in there so no HTML tags should be present. If something else is going on and/or you need more help, feel free to reach out through beatrizcaraballo.com/contact so I can take a look at your page!
Is it possible if I can communicate with you in regards of a website I'm trying to build for myself? I need a bit of help and I feel that you would be extremely helpful on my case about adding a loading screen to my website. Thank You!!
I'm confused - the title of the video says "in Squarespace (7.0 & 7.1)" but in the intro it is said that you have to use something else for 7.0 & 7.1? And it looks like the only difference is that you have to create a div for the anchor element within a code block on the page? According to your linked blog post. Idk. I'm going to try this out... but perhaps it's just the language used in the video - super confusing. Why not just include these details within the video, since it's literally about 7.0 and 7.1?? Love the content overall but this was just weird to me. Am I being dense??
Update: not being dense, I was able to apply some of the stuff from the video but had to look up a ton of other resources as none of the targeting worked the way it does in Brine. This video is NOT a tutorial on 7.1. It's a tutorial on Brine. You have to do your own homework to get it to work in 7.1. The title it is very misleading and should be changed.
You're not being dense at all, I totally get how the tutorial can be confusing. Sorry about that! When I recorded this it made sense in my head how I mentioned the difference between both versions and included the alternate code in the post. However, I now see that's not as clear as I thought. Thanks for brining this to my attention! I'll do my best to create an updated version with the step-by-step for 7.1 🙌
This was extremely helpful and clear. I have never done anything like this in my life and the instructions were perfectly clear and understandable for us that are not familiar at all with this stuff. Thank you!
Multiple kinds of headings? Absolutely! The original code will get rid of the space on top and under ALL h4s inside Code Blocks on the site. If you also want to target, let's say, all h2s inside Code Blocks, you can group the selector like so: .code-block h4, .code-block h2 { margin-bottom: 0; margin-top: 0; } And if you wanted to ALSO target, for example, all h1s, you can include that as well just by adding another comma and the corresponding selector: .code-block h4, .code-block h2, .code-block h1 { margin-bottom: 0; margin-top: 0; } Keep in mind this addresses the space under headings within Code Blocks but there may be extra spacing showing up if you're working with a Fluid Engine section! That may require resizing the block or using the alignment arrows toolbar that pops up during edit mode. Hope that helps!
To slant the scrolling block, you can use this plugin: www.ghostplugins.com/free-plugins/scrolling-block-tilted-style But if you had something more specific in mind, feel free to reach out through beatrizcaraballo.com/contact and we can check out your idea's doability!
Hello, I'm hoping you could help me out. I used the code you recommended to create the desktop nav menu. However, for mobile view, I have it set where the burger is on left, logo in center, and cart on right; and now when I add the code for the menu it shifts my logo to the left. Is there any way to set just the mobile logo to center?
I'd be happy to help you sort things out! However, in this case it'll be easier if I can see what's going on on the site itself. Go ahead and reach out through beatrizcaraballo.com/contact so I can take a look.
Yup! The corresponding code is inside the blog post: www.beatrizcaraballo.com/blog/folder-titles-clickable-squarespace Make sure to replace /NEW-LINK everywhere you see it in the snippet you decide to use. If you need more support, feel free to reach out through beatrizcaraballo.com/contact
Yes it does! If the code isn't doing what it should, feel free to send over a link to your site (plus trial password if it's not live) through beatrizcaraballo.com/contact so I can take a closer look at what may be going on.
The easiest way to do it is by setting the header as a fixed element too, and setting the top offset just under the new bar. You can use this to do that and alter the top: 30px value as necessary: .business-bar-wrapper { position: fixed; top: 0; width: 100%; z-index: 9999; } #header { position: fixed; top: 30px; } However, depending on how you have things laid out and how you want them to work, another approach may be necessary. Feel free to reach out through beatrizcaraballo.com/contact if you need more support.
Yes, totally! You can use flexbox to make that happen. There's a snippet for that inside the Snippet Directory if you're interested: beatrizcaraballo.com/blog/side-by-side-thumbnail-content-auto-layout-simple-list-squarespace
Depending on what you're looking to modify, you may need to adjust the selector and/or double-check if any other third-party code is overriding the change you're trying to make!
I'm happy to hear that! And yes, you can alter the "scrollingLogo" keyframes animation to make the image scale instead of rotate, to create your pulse effect. You can start off with this: @keyframes scrollingLogo { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } } And then adjust the scale values as needed to make the animation more or less obvious.
Hi Beatriz!! Thanks for this video, it solved my form problems! I was just wondering, since the form I'm making is all collapsible, it doesn't make sense for the 'submit' button to appear after it. Is there a way to include the button in the collapsible section? I tried changing the second '.underline' with the name of the element of the button but that didn't work and I'm not really sure that's correct. Also, I tried to change the font size of the title and it isn't working (I'm using font-size: 6em;). Is this because the code is wrong or because the font isn't sizeable? Thank you so much!
Heya! I'm glad to hear that. You're most welcome 🙌 And those are great questions. As for including the button inside the collapsible area, that needs to be tackled through additional code that goes beyond the one used in the tutorial. I'm afraid I can't offer that kind of support through here, but feel free to reach out through my site so we can chat about the possibilities: beatrizcaraballo.com/contact Regarding the font size, I highly recommend using the new Forms panel inside the Site Styles area of the site! If the specific text you're trying to modify can't be changed through there you can also check out this older post to test with that code: www.beatrizcaraballo.com/blog/customize-squarespace-forms And if that still doesn't work, feel free to include what you're wanting to do inside the contact form so we can look at what can be done.
For some reason i can't get this to work with the carousel. Any common mistakes that could be causing this? The menu simply won't retract or expand like it's supposed to.
You may want to check that you have the jQuery library inside your Code Injection section. The script usually says something like code.jquery or ajax.googleapis. If you don't see that, go ahead and grab the one inside the blog post where it says "JQUERY LIBRARY (IF NEEDED)" Add it to your Header Code Injection section and the code should work! If it doesn't, feel free to email me an email to your page + trial password (if the site isn't live) so I can take a closer look at the problem.
I'm so sorry to hear that! The code is for 7.1 Portfolio pages, and the two snippets available inside the post are for the Grid: Simple and Grid: Overlay options. Go ahead and double-check the code matches the layout you're working with! Hope that helps.
wow this code is great! I have it up and running although it works on PC the code doesn't support the mobile version of the website. I used the "TO MAKE FOLDER TITLES CLICKABLE ON DESKTOP AND MOBILE DEVICES (7.1)" footer code and CSS code but it still doesn't work for mobile. The folders won't open neither the folder name can be clicked.
I'm glad to know it's working right on desktop! 🙌 Hmmm, go ahead and double-check that the "OLD-LINK" is replaced in BOTH places inside the script and not just in the first instance. That's usually the cause of the issue! However, if the code still doesn't wanna work after that, feel free to send over a link to your site to hey@beatrizcaraballo.com (with the trial password if the site isn't live yet) so I can take a closer look!
Haven't used square space in 11 years and I've noticed it's more stable but also for more irritating. Following your tutorial I am trying to add the pound signs to get the H6. It does nothing. I have a piece of text that has 6 pound signs followed by more. So this: ###### read more. Any clue what I might be doing wrong? And of course, like every project, it was due yesterday!
Interesting issue! If you're copy/pasting the text with the space and the pound signs that usually doesn't work. Try pasting in the ######read more text and THEN adding the space inside the corresponding field to bring up the markdown style! Another thing to check for is that you're adding the h6 to the Description field of the slides. The title field doesn't accept any markup. Hope that helps!
I'm happy to hear that! ☺ And sure thing, you'll need to add your data-section-id before the selectors .user-items-list-banner-slideshow__arrow-button--right and .user-items-list-banner-slideshow inside their corresponding JS/CSS snippets in the code. That will look like this once you change them: body:not(.sqs-edit-mode-active) [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow__arrow-button--right [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow .list-item:not([aria-hidden="true"]) img [YOUR-DATA-SECTION-ID-HERE] .user-items-list-banner-slideshow .list-item img Hope that helps!
Hello! This tutorial has been a great help. I am having an issue where the text is wrapping, but instead of the end of the changing words wrapping and dropping down to another line, it is pushing down the rest of the sentence with it (I don't know if that's making sense?).
Heya! I'm happy to hear that! 🙌 And I believe I understand what's happening. You may want to try using the HTML restructuring I suggested to another commenter here (oksanapavlowsky8676) to see if that helps! If that doesn't do it, feel free to send over a link to your site to hey@beatrizcaraballo.com along with the trial password (if the site isn't live yet) so I can take a look at your particular case.
@@beatrizecaraballo Thank you for your reply! I was able to make a chanage to align the text to the top rather than the bottom of the line. That made it so that the whole sentence isn't dropping down. However, the words all stay grouped in a box together rather than filling out the sentence and then dropping down to the start of the next line. I don't know if there's a way to fix that part. I will send along the site link for you to take a look. Thank you so much!
Hello and thank you so much for this amazing course. But I have some concerns because I tried everything but I insert a gif instead of adding a regular picture and I didn’t add the first keyframs I just added the second but the screen loads so fast that I won’t be able to get to see the loading screen, so I just want to ask if there’s a way to delay it like for a second or two before it goes away thank you
Heya! You're most welcome! 🙌 And that's a great question. You can adjust the delay of the whole loading by modifying the inside the goodbyeScreen animation declaration, this one: animation: goodbyeScreen .5s forwards cubic-bezier(.5,-.75,.7,2); Hope that helps!
Hi - used this code (sticky sidebar) to great success on a 7.1 one site. I chose to make the side bar orange. I have it working - however there is a medium sized white space above the content-wrapper. I checked the section settings within squarespace and it just edited the content-wrapper. I'm not sure how to send you a link or show a screenshot. Please help if you can.
Glad to hear it! To change the background for the whole screen, you can modify the color value where it original says: background-color: #fafafa; But if you want to ADD a background right behind the logo you're uploading, you can do that by including the background-color property (with whichever value you want to use) under the .loading-screen-image selector instead, like so: //To style the logo or image .loading-screen-image { animation: scrollingLogo 1 3s linear; background-image: red; . . . } Hope that helps!
@@beatrizecaraballo doesn't work, I tried this - //To style the logo or image .loading-screen-image { animation: scrollingLogo 1 3s linear; background-color: black; background-image: url(logo.png);
Hmmm, there could be many reasons why it's not working, but you can try to reduce the background-size value inside that same snippet to 50% instead of "contain" to see if it's a matter of the image covering the color! If that doesn't work, feel free to send over a link to your site + the trial password (if the site isn't live) to hey@beatrizcaraballo.com so I can take a closer look.
I''m glad to hear it! 🙌 And that's such a great question. Since the process is similar but requires modifying additional containers, swapping selectors won't do the trick here so I've jotted this down for an upcoming tutorial!
I'm glad to hear it 🙌 You can totally center the text by either targeting the block's ID and then the type of heading you're using (h1, h2, h3, etc), or by adding a class of your choice to the heading in your HTML (regardless of if you're using h1, h2, or something else) and then target that via CSS! In either case, you'll need to use text-align: center to center the whole thing. Using the second approach, your HMTL would look something like this: <h1 class="my-typewriter-text"> Nulla fascilis <span class="typed-words"></span> </h1> And your CSS would look like this: .my-typewriter-text { text-align: center; } Hope that helps!
@@beatrizecaraballo Amazing! Success! This wasn't working for me with just the "text-align: center;" ...but after some googling it worked when I added "display: block;" So it now looks like this: My HTML: <p3 class="my-typewriter-text"> 9 Years <span class="typed-words"></span>later... <br> they are getting married </p3> My CSS: .my-typewriter-text { text-align: center; display: block; }
Awesome! I'm thrilled to hear you got it working and thank you for sharing the CSS you ended up using, that'll be really helpful for anyone with the same goal! 🙌
