How to add a background to a code block only in Squarespace 7.1

If you would like to display your source code, but make it stand out on the page, you can add a background that targets the Code Block only.

This elevates it from being regular plain text, to something that is eye catching.


Add the following to your Custom CSS

.sqs-block-code {
  background: #191919;
  padding: 3%;
}

Customise:

Adjust the colour by changing #191919 to a hex colour of your choice.

Find a hex colour, use the following -> https://www.color-hex.com/color/000000

Adjust the amount of padding around the block by changing the percentage number.

Previous
Previous

The Website Designer Summit 2024 - Starting and Running your Squarespace Agency

Next
Next

How to modify the form text - Sign up for news and updates - Squarespace 7.1