
Add Custom Code to Enhance Your Website with Code Blocks & CSS Integrations
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:
- Refresh your browser
- Check if you're logged in (security measure may hide code)
- Ensure code isn't on an index page
- 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