Custom Codey

When you add a lot of code to a Squarespace website, you risk being redundant and confusing the browser with too many directions. If you already have custom CSS on your site, share this code with Custom Codey and ask them for help cleaning it up before you add more. Then can condense code, remove redundant code, and even add notes.

Pro tip: Custom Codey 2.1 on ChatGPT is the best model for this.

Squarespace 7.0 and 7.1 have selector & styling, so if you know which version you’re using, I can give the best advice!

A syntax error message is a fancy way of saying your code has a tiny hiccup. It could be a missing curly brace (the squiggly ones: { }), an extra space where it shouldn't be, or even a typo. Squarespace is just looking out for you, ensuring your code is grammatically correct in the world of web languages.

• The message sticks around until you close your code properly, making sure every curly brace has its matching partner (think of them as holding hands!) all the symbols are in the right places, and that it understands what your trying to say in your code. This ensures your custom code will be able to tell the web browser exactly what to do.

  This article has more about syntax errors and how to fix them: insidethesquare.co/syntax

Squarespace uses selector classes and IDs to identify elements. IDs are unique for individual items, while a selector class is a label for a specific type of item. You can use one or both in your custom code, and this blog post will teach you how: .insidethesquare.co/squarespace-id-finder

Squarespace doesn't provide a comprehensive list of all classes and IDs, but Custom Codey can help! Their brain was built based on my most up-to-date code collection. When chatting with Custom Codey, you can ask them for a specific selectors by clearly stating the content you want to edit. Here are two prompt examples you can try:

Write a custom CSS code to change the background color of my first heading on my homepage to blue.

Version: 7.0
Theme: Brine

I need CSS to make my secondary button larger. It's a button block on my About page. Using Squarespace version 7.1

Squarespace doesn't offer a live preview for CSS changes. However, you can make your changes in the custom CSS panel and not select save! The changes won't be visible on your site until you save them. This is where I test all the code I am going to add to Page Header Code Injection or a code block. Once you add CSS here, you’ll see the changes on your site, and you can easily copy your code from this space and paste it where it needs to be.

Squarespace only supports a limited number of web fonts. You can check their supported fonts list and upload your font if it's compatible; not all fonts or font file will be displayed in all browsers. Make sure you're using the correct font family name in your CSS. Here are a few example prompts you can use with Custom Codey:

Help me add the font 'Montserrat' from Google Fonts to my Squarespace site. I want it for all headings.

My custom font 'Playfair Display' isn't showing up in Squarespace and I need you to tel me why. Here's my current code, how can I fix it?
[paste your custom code in your prompt for more accurate feedback]

If you're not comfortable with CSS or want more complex customizations, you can consider hiring a Squarespace developer. I do want to take this opportunity to encourage you to try to create the code yourself! You can also hire an expert designer; you'll find a list of pro's that I love to work with at insidethesquare.co/pros

Sometimes browsers can be a bit stubborn and hold onto old versions of your site. Try clearing your browser's cache and cookies. If you're using Chrome, press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) to force a complete refresh. If that doesn’t do the trick, Custom Codey can help! Use a prompt like this for code feedback:

My CSS isn't working in Squarespace. I want my navigation menu items to be red on hover. I need you to tell me the correct code; here's what I tried: [paste code here]

I'm using Squarespace 7.1 and my custom code isn't working. Debug this Squarespace code for changing paragraph spacing: [paste code here].

Squarespace elements often have their own built-in spacing rules. To override these, you'll need to be more specific with your selectors. Try targeting the exact element class and possibly add !important to your spacing values. For example:

.sqs-block { margin-top: 20px !important; }.

Welcome to the world of responsive design! 😅 Squarespace uses different rules for mobile views. To make your custom code work on mobile devices, you'll need to use something called a media query. Ask Custom Codey to specific changes for a specific breakpoint or device and they will be able to create a media query for you.

Create Squarespace CSS to make my header image smaller on mobile. Current code: [paste code]. Need it to be 50% smaller below 640px

Write CSS to adjust my button spacing on mobile. I want 20px between buttons on desktop but only 10px on mobile screen.

Squarespace buttons are notorious for having an ego 😉 To change the style of a button, you’ll want to declare every value !important, like this code that changes the button background to blue & font to white on a hover.

.sqs-block-button-element:hover{
background: blue!important;
color: #fff!important
}

It’s also important that you tell Custom Codey the type of button you want to change. The code for your mobile menu button will be different than a newsletter submit button, an add to cart button on a product page, an item button inside a people section, etc. Be as specific as possible when you ask Custom Codey to create new code.