CSS can help customize your site's appearance beyond built-in Squarespace options. Here's how to use the CSS Editor effectively:

When to Use CSS

• Modify fonts, colors, and backgrounds
• Make style adjustments that aren't available in standard settings
• Customize specific design elements

Adding CSS Code

1. Navigate to the Custom CSS menu
2. Click "Open in New Window" for an expandable editor
3. Enter your CSS code
4. Click Save to apply changes

Note: The editor shows line numbers and flags syntax errors in red.

Uploading Custom Files

1. Click "Custom Files" below the CSS editor
2. Click "Add Images or Fonts" or drag files
3. Supported formats:
   • Images: .jpg, .png, .gif
   • Fonts: .ttf, .otf, .woff (.svg files not supported)

Using Custom Files in Code

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

SSL Considerations

• File URLs format changes based on SSL status
• Update file URLs when changing SSL settings:
  1. Open CSS editor
  2. Click Manage Custom Files
  3. Click file
  4. Update URL (https for SSL-enabled sites)
  5. Save changes

Important Limitations

• CSS changes don't transfer between templates in v7.0
• Only use CSS for styling elements, not functionality
• Test thoroughly across browsers
• Consider consulting Squarespace experts for complex customizations

Related Articles

Previous Articles