To access and use Squarespace's CSS Editor for custom styling:

The CSS Editor allows you to apply custom styling beyond Squarespace's built-in options. Use it specifically for modifying fonts, colors, and backgrounds to avoid potential site damage.

Key Limitations:

• Custom CSS doesn't transfer when switching templates in version 7.0
• Code must pass the built-in syntax checker
• Some browsers may handle CSS differently

Adding Custom CSS:

1. Open the custom CSS panel
2. Click "Open in new window" for a larger view
3. Add your code
4. Click Save to publish changes

The editor displays line numbers and syntax errors in red at the bottom.

Working with Custom Files:

1. Click "Custom Files" in the CSS Editor
2. Upload files by clicking "Add images or fonts" or drag and drop

Supported File Types:

• Images: .jpg, .png, .gif
• Fonts: .ttf, .otf, .woff
• Note: .svg files are not supported

Using Custom Files in CSS:

1. Write your code up to where you need the file URL
2. Place cursor at the URL insertion point
3. Click the uploaded file to auto-insert its URL

SSL Compatibility: If you change SSL settings, update file URLs accordingly:

1. Open CSS Editor
2. Click Manage Custom Files
3. Click the file
4. Update URL protocol (http/https)
5. Save changes

Best Practices:

• Review code recommendations in FAQ
• Ensure proper formatting
• Test across different browsers
• Consider hiring a Squarespace Expert for complex customizations

Related Articles

Previous Articles