Using the CSS Editor

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: 

  1. Log into your site
  2. Enter Style mode. 
  3. Click Custom CSS.

style-mode.png

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 (⌘ + S on a Mac) to save.

add-code.png 

Toolbar options

The toolbar has several options to help you as you format your CSS.

Use the drop-down on the right to choose a LightGrayscale, or Dark color scheme.

color.png

Use the search icon to find and replace text within your code.

find-and-replace.png

Use the arrows to undo and redo recent changes.

arrows.png

Use the $ icon to access the style variables for your site. This can help you match your custom code to existing style elements.

variables.png

Use the formatting tools to indent, add comment code, adjust font sizes, display line numbers, and add curly braces.

formatting.png

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.

minimize-pop-out.png

Squarespace 7 comparison

The CSS Editor in our current platform, Squarespace 7, displays syntax errors and has a built-in file upload area. Learn more on our Squarespace 7 help site.

If you're ready to switch, visit Moving from Squarespace 5 to Squarespace 7.

v7.jpg

Was this article helpful?
0 out of 0 found this helpful