How to Add Custom CSS Code in Squarespace Editor: Step-by-Step Guide

How to Add Custom CSS Code in Squarespace Editor: Step-by-Step Guide

By Michael Chen

February 1, 2025 at 06:48 AM

You can use CSS to customize your site's styling through the CSS Editor. Follow these simple steps:

Adding CSS Code:

  1. Open the Custom CSS panel
  2. Click "Open in New Window" for expanded view (optional)
  3. Add your CSS code
  4. Click Save to publish changes

The editor shows line numbers on the left and flags syntax errors in red at the bottom.

Code syntax error in editor

Code syntax error in editor

Working with Custom Files:

  1. Click "Custom Files" (or "Manage Custom Files" in v7.0)
  2. Upload by clicking "Add images or fonts" or drag files
  3. Supported file types:
    • Images: .jpg, .png, .gif
    • Fonts: .ttf, .otf, .woff
    • Note: .svg files not supported

Using Custom Files in CSS:

  1. Write your code until you need the file URL
  2. Place cursor where URL should go
  3. Click the uploaded file to insert its URL automatically

Yellow arrows indicate text field

Yellow arrows indicate text field

Important Notes:

  • CSS should only modify fonts, colors, and backgrounds
  • Custom CSS doesn't transfer between templates in v7.0
  • If using SSL, ensure file URLs start with https
  • Test your code thoroughly to avoid potential site issues

For best results, consider consulting the Squarespace Forum or hiring a Squarespace Expert for complex customizations.

Related Articles

Previous Articles