
CSS FOR SQUARESPACE
custom code tutorials
step-by-step tutorials to help you customize your squarespace website design with code

How to add a background image to a Squarespace form
Learn to enhance your Squarespace forms by adding a custom background image.

How to customize the file upload field in a Squarespace form
Learn how to easily add a file upload feature to your Squarespace form. This step-by-step guide includes CSS customization tips for a seamless user experience. Boost your form functionality today!

How to customize Squarespace contact form fields
In this tutorial, you’ll learn how to customize the colors used in a Squarespace contact form block.

How to customize the donation block in Squarespace
Learn how to use custom CSS to customize the content inside a Squarespace donation block, including alignment and colors.

How to customize the digital product block in Squarespace
In this tutorial, you’ll learn how customize the digital product block in Squarespace using CSS.

How to customize chart blocks in Squarespace
Learn to enhance Squarespace buttons with custom icons using CSS. This guide covers multiple button types, sizes, and includes unicode character tips for better design.

How to change the calendar colors in Squarespace
Learn to enhance Squarespace buttons with custom icons using CSS. This guide covers multiple button types, sizes, and includes unicode character tips for better design.

How to add an icon to a Squarespace button
Learn to enhance Squarespace buttons with custom icons using CSS. This guide covers multiple button types, sizes, and includes unicode character tips for better design.

How to create gradient buttons in Squarespace
Transform your Squarespace audio players with these simple CSS customizations. Learn to change colors, fonts, and styles to match your site's design. Perfect for beginners and pros alike!

How to customize a Squarespace audio block
Transform your Squarespace audio players with these simple CSS customizations. Learn to change colors, fonts, and styles to match your site's design. Perfect for beginners and pros alike!

How to add bullet points to an archive block
Enhance your Squarespace archive block with unique unicode characters. This tutorial shows you how to add custom bullet points to group names and item links using simple CSS.

How to customize archive block links
Learn how to modify font size, color, and weight of Squarespace archive block links using custom CSS.

How to customize accordion block divider lines in Squarespace
In this Squarespace tutorial, you'll learn how to customize the accordion block divider line, creating a unique line.

How to add a button to an accordion block in Squarespace
This tutorial will teach you how to customize the style of an active link inside an accordion block so it looks like a button, hover effects and all!

How to use an image for a button background in Squarespace
This tutorial will show you how to use an image for a button background in Squarespace and works for both version 7 and 7.1

How to embed an Instagram reel into Squarespace
In this Squarespace tutorial, you'll learn how to add an Instagram reel to a blog post. I use a 7.1 version site in this tutorial, but the process is the same for older versions of Squarespace.

How To Use A Google Font on Squarespace
This Squarespace tutorial will show you how to install a Google font on your Squarespace site and how to use it in your custom code.

How to add an image inside an accordion block
This video tutorial shows you how to embed & customize multiple images within Squarespace accordions using simple code.

How To Customize Bullet Points in Squarespace
Are you tired of using those same boring bullet points on your Squarespace website? Have you ever wished that customizing them was as easy as changing font color, style and something a little more unique than a dot? Well, now it is!

How to use vertical video in Squarespace 7.1
You can display a vertical video on your Squarespace site - this tutorial will teach you how!