How to add an outline to your Squarespace shape blocks
Squarespace has made some really big improvements to its built-in design capabilities over the past year (see our posts about Squarespace's new Fluid Engine Editor and Member Areas!) One smaller, but really powerful, update they made was introducing the Shape Block for Fluid Engine.
Shape blocks are a great way to add fun graphic elements to your site that you previously either needed to code or build separately in a graphic design program.
Tip: If you want to learn more about how you can add use shape blocks on your website check out our post here 🙂
While there are many ways you can use shape blocks in your design, there are limitations to what and how you can customize them using Squarespace’s built-in features.
That’s why we’re excited to share this tutorial with you! We’ll walk you through how to add a border to a shape block in Squarespace using just a couple lines of code. I promise it’s super easy and will take you less than 10 minutes, so let’s dive in and see how you can give your designs a little extra detail!
Adding CSS to Create the Shape Block Outline
Important note! Squarespace is currently working on this code in their back-end which means the original code in the post and video no longer works. But it means that they are probably soon to launch a built-in shape block border, so that’s good news! In the meantime, you can this code instead. The rest of the instructions apply though.
.sqs-shape > * {
stroke-width: 10px!important;
stroke: black!important;}
First, copy the code below and paste it into Squarespace's custom CSS panel (Design > Custom CSS).
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}Instantly you will see an outline around all of your shape blocks!
You can customize the border width, style, and color to your liking by adjusting the values in the CSS code! Let's walk through these in a bit more detail.
How to change the border color
To change the color of the border, you can adjust the stroke property in the CSS code.
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}
In the code snippet we've shared, the border color is assigned as hex code #000000, which is the same as black. Just swap this hex code out for any other hex color code you want or you can also simply type standard color names, like "red" or "blue" to change the stroke color.
How to change the border width
To change the thickness of the border, you can adjust the stroke-width property in the CSS code.
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}
In our CSS code, we've assigned the stroke to have a width of 1px, but you can decrease this by entering a decimal, like 0.5px or 0.7px to create a thinner border. If you'd like to have a more prominent border, increase this number!
Change the border to dashed
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
stroke-dasharray: 2 5;
}
The first value (2) is the length of the dash. The second value (5) is the space between the dashes. The stroke-width value will affect the width of the dashed line.
Adding an outline to Specific Shape Blocks
Instead of adding the border to ALL shape blocks around the site, we can use a Block ID to target individual shape blocks. This means we can add different borders to different blocks.
Step 1: Find your Squarespace Block ID
To add a border to a specific shape block we’re going to use a small bit of CSS to target a specific block using its unique block ID.
Just follow these steps using the Squarespace ID Finder Google Chrome extension:
Using Google Chrome, install the Squarespace ID Finder extension to your workspace.
Head over to your website and go to the page where the shape block you want to customize is located.
Click on the Squarespace ID Finder icon in your browser toolbar to activate it.
When you click on the ID that pops up, it will copy it to your clipboard.
Step 2: Add your CSS
Head back over to your CSS panel (Design > Custom CSS)
Paste in the following code. Note: It is slightly different than the code that targets all shapes!
Change out the #INSERT-BLOCK-ID-HERE with your chosen block ID.
#INSERT-BLOCK-ID-HERE {
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}}
Once you've added your ID, it will look something like this:
#block-01fa75d08c2f9ee8e6e8 {
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}}
In the code above, we’re targeting a specific shape block using its unique ID (which you can find using the Squarespace ID Finder extension). We’re then adding a solid black border that is 1px wide.
Use the instructions in the last step to customize the stroke color and width for your specific shape!
How to target more than one shape block
You can add multiple of these codes into your CSS. So if you wanted to target separate blocks and give them different stroke colors and widths, you could add 2 pieces of code with 2 different block ID's and values. Eg:
#block-01fa75d08c2f9ee8e6e8 {
svg.sqs-shape {
stroke: #ffffff;
stroke-width: 10px;
overflow: initial;
}}
#block-20s19358s267548323a5 {
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}}
Or, if you want to target multiple blocks and give them the same width and color values, but still not ALL shape blocks, you can add multiple block ID's separated by comas. Eg:
#block-01fa75d08c2f9ee8e6e8, #block-20s19358s267548323a5 {
svg.sqs-shape {
stroke: #ffffff;
stroke-width: 10px;
overflow: initial;
}}
Important note:
With most blocks in Squarespace, like an image block, we're able to add a border by using the border property, which is pretty straightforward. But since the shape blocks in Squarespace are actually SVGs they require a different code property to target them, which is why we're targeting the stroke in the code.
This is where the importance of including the overflow designator becomes important!
svg.sqs-shape {
stroke: #000000;
stroke-width: 1px;
overflow: initial;
}
Without the overflow designator, the stroke will overrun the container block and get cut off.
The following shapes do not have the overflow: initial property applied and you can see the stroke is cropped along the edges.
Adding the overflow to the code essentially tells the border that if there is any overflow on the shape it should extend beyond the original container to prevent any cropping.
Here is an example where we've created a really thick border, but having the overflow in the code extends it beyond the original shape container outlined in blue.
Since this does push part of the shape outside of the container's walls, just keep in mind that this could potentially cause some overlapping issues. It shouldn't interfere too much, but I would encourage you to take a close look at this when interacting with other blocks or on smaller-sized devices.
And that’s it! Just a few lines of CSS code can go a long way to add a special touch to your website! While it's not a perfect solution, it works well until Squarespace adds the option to add a border to shape blocks. I'm hoping comes sooner than later 🙂
Now that you know how to add a border to a Shape block, you can repeat these steps as many times as you need to for any other shape blocks across your website.
If you want to check out some more fun things you can do with a little copy + paste code, check-out the blog posts below! 👇
6 fun code snippets for your Squarespace web design
How to upload custom fonts to Squarespace
How to change the font color in one text block on Squarespace
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a full width Instagram feed in Squarespace 7.1
If you liked this post, Pin it to Pinterest! 👇🏻
