The Custom CSS editor in Style Mode offers you unprecedented control over your custom CSS code in a beautiful editing environment.
Step 1 - Access the Custom CSS Editor
Click the Custom CSS tab in Style Mode to access the CSS Editor.
Step 2 - Write Custom CSS Code
Begin adding your own custom CSS code below any CSS already added for the default style. Make sure to click the Save button to save your changes, or use CMD+S (Mac) or CTRL+S (PC) to save your changes here.
Features & Options
This option allows you to select from light or dark color schemes for CSS editing as well as a grayscale option.
Minimize and Pop-Out
You will notice that two small icons display on the far right of the CSS Editor; an arrow and a couple of boxes. The arrow allows you to minimize or maximize the editor while the boxes icon allows you to actually pop the CSS Editor completely out into a separate window or tab.
Find & Replace
The Find & Replace icon offers you the ability to search for specific text within your custom CSS code and then automatically replace it in one click.
A familiar feature which allows you to undo or redo recent changes.
The $ icon gives you access to the current available style variables for your site. This can come in handy for setting custom element widths to match those of existing style elements. Just select a variable from the list to place it within your code.
The CSS editor also includes options (left to right in the screenshot below) for Outdent/Indent, Commenting, Font Sizes, Line Numbers and highlighting curly braces. These are all accessible with a single click.
Note: Adding or modifying code within your Squarespace site is an advanced modification that will require coding knowledge to complete successfully. Squarespace cannot troubleshoot your custom or 3rd-party code modifications, so we do recommend you use caution when making these types of changes.