Add Custom Code to Enhance Your Website with Code Blocks & CSS Integrations

Add Custom Code to Enhance Your Website with Code Blocks & CSS Integrations

By Michael Turner

November 22, 2024 at 07:53 AM

Adding custom code to your site can significantly enhance its style and functionality. Here's what you need to know about implementing custom code effectively:

Basic Custom Code Options

Squarespace supports client-side code implementation through:

  • CSS for styling
  • HTML for content structure
  • JavaScript for interactive features
  • Markdown for text formatting

Code Blocks vs. Embed Blocks

Code Blocks:

  • Best for advanced, customizable code
  • Renders HTML and Markdown
  • Useful for embedding documents and MLS searches
  • Supports HTML, JavaScript, and CSS implementations

Embed Blocks:

  • Perfect for third-party content using oEmbed Standard
  • Ideal for Facebook posts and external videos
  • Simpler implementation process

CSS Customization Guidelines

You can customize:

  • Fonts
  • Colors
  • Backgrounds

Avoid using CSS for:

  • Padding
  • Margin
  • Float
  • Size adjustments
  • Alignment

Note: Custom CSS has a 128,000-character limit

Troubleshooting Custom Code

If code doesn't display:

  1. Refresh your browser
  2. Check if you're logged in (security measure may hide code)
  3. Ensure code isn't on an index page
  4. Disable Ajax loading if conflicts occur

CORS Error Solution:

  • Ensure requests originate from server-side application
  • Note that CORS requests are outside support scope

Recommended Learning Resources

For coding education:

  • W3Schools
  • Codecademy
  • Mozilla Developer Network
  • Stack Overflow
  • Shay Howe
  • SitePoint
  • Treehouse

Important Considerations

  • Test code thoroughly before implementation
  • Consider hiring a Squarespace Expert for complex customizations
  • Join Squarespace Forum for technical assistance
  • Remember that server-side code (PHP, Ruby, SQL) isn't supported
  • Always backup before major code changes

Related Articles

Previous Articles