If you have coding knowledge and want to customize your site beyond the adjustments you can make in the Style Editor, you can add CSS code to your Squarespace 5 site using the CSS Editor.
CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site.
Note: Custom code, including CSS, falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. CSS customizations can also cause display issues with future updates to our platform.
Before you begin
Custom CSS should be used only for changing fonts, colors, and backgrounds. If you decide to apply custom CSS to your site, it should be used sparingly.
Custom CSS can be used to modify:
- Fonts
- Colors
- Backgrounds
Custom CSS shouldn't be used to adjust the layout of your site. These site areas shouldn’t be modified with CSS:
- Padding
- Margins
- Floats
- Sizes (images, banners)
- Positioning
These changes can conflict with the default template code and may interfere with improvements our developers make to the platform.
Step 1 - Open the CSS Editor
To open the CSS Editor:
- Log into your site
- Enter Style mode.
- Click Custom CSS.
Step 2 - Add CSS code
Add your code to the gray editor area. Use the toolbar at the top to search, undo changes, and format your editor.
When you've finished making changes, click Save. You can also use the keyboard shortcut Ctrl + S (or ⌘+S on a Mac) to save.
Toolbar options
The toolbar has several options to help you as you format your CSS.
Use the drop-down menu on the right to choose a Light, Grayscale, or Dark color scheme.
Use the search icon to find and replace text within your code.
Use the arrows to undo and redo recent changes.
Use the $ icon to access the style variables for your site. This can help you match your custom code to existing style elements.
Use the formatting tools to indent, add comment code, adjust font sizes, display line numbers, and add curly braces.
Minimize or pop out
You can also minimize the Style Editor with the arrow icon, or click the boxes icon to open the CSS Editor in a separate window.
CSS and switching templates
CSS doesn't transfer when you change template styles. The CSS remains in the original style's CSS Editor, so it will still be there if you switch back.
CSS and site layouts
To preserve your site's layout, Squarespace adds the following code to your custom CSS.
3 Columns / Content Right
#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: block; float: left; width: $Sidebar2Width$; padding: 0; padding-left: $ContentPaddingInternal$; }
#contentWrapper { float: right; width: $ContentWidth$; }
3 Columns / Content Center
#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; padding-right: $ContentPaddingInternal$; }
#sidebar2Wrapper { display: block; float: right; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: left; width: $ContentWidth$; }
3 Columns / Content Left
#canvasWrapper { width: $(ContentWidth+Sidebar1Width+Sidebar2Width+ContentPaddingInternal+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: right; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: block; float: right; width: $Sidebar2Width$; padding: 0; padding-right: $ContentPaddingInternal$; }
#contentWrapper { float: left; width: $ContentWidth$; }
2 Columns / Content Left
#canvasWrapper { width: $(ContentWidth+Sidebar1Width+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: right; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: none; float: left; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: left; width: $ContentWidth$; }"
2 Columns / Content Right
#canvasWrapper { width: $(ContentWidth+Sidebar1Width+ContentPaddingInternal)$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: block; float: left; width: $Sidebar1Width$; padding: 0; }
#sidebar2Wrapper { display: none; float: right; width: $Sidebar2Width$; padding: 0; }
#contentWrapper { float: right; width: $ContentWidth$; }
1 Column
#canvasWrapper { width: $ContentWidth$; padding: 0 $ContentPaddingExternal$ 0 $ContentPaddingExternal$; }
#sidebar1Wrapper { display: none; }
#sidebar2Wrapper { display: none; }
#contentWrapper { width: $ContentWidth$; }
Squarespace 7 comparison
The CSS Editor in our current platform displays syntax errors and has a built-in file upload area. Learn more on our Squarespace 7 Help site.
To learn more about switching, visit Squarespace 5 vs. newer versions.
