Free Squarespace Plugins: 11 Free Squarespace CSS Custom Code to spruce up SQSP
Free Squarespace CSS Code Snippets (Free Squarespace Plugins) - 2023 Update
What is CSS, and how does it affect Squarespace
Cascading Style Sheets (CSS) is a powerful programming language that plays a pivotal role in streamlining the presentation and appearance of web pages.
With CSS, you can easily modify the style, size, font, color, and spacing of your website content and add advanced features like animations. In this 2023 update, we introduce you to the Squarespace Fluid Engine, an innovative feature that allows for seamless adaptation of your website across different devices and screen sizes. Read on to discover free Squarespace CSS code snippets that will help you get the most out of the Fluid Engine.
What is the Squarespace Fluid Engine?
The Squarespace Fluid Engine is an advanced feature that enhances the responsiveness and adaptability of your website, ensuring a consistent and engaging user experience across various devices and screen sizes. This cutting-edge technology adjusts your website's layout, images, and typography automatically, making it easier for users to navigate and interact with your content, whether they're using a desktop, tablet, or mobile device.
A beginner Squarespace tutorial for newcomers to CSS and custom code.
From the PixelHaze Academy YouTube Channel:
Squarespace is a great website builder - but when you need to customize it for your own needs, working with CSS and custom code can get complicated. That's why in this video, I will teach you how to get up and running with custom code. We will take you through the very basics of how you can use custom code, and in particular, CSS, in your Squarespace websites. We'll be talking about how you can add in your custom code using the CSS editor.
Finally, we're going to take a look at our free Squarespace plugins and how you can install this custom code at any time to give it a more enhanced look and feel.
Feel free to use any Squarespace Plugins from this page (just scroll down)
Explore the PixelHaze Store for a wide range of low-cost plugins
We like CSS here at PixelHaze, it sits on the cusp of technical and visual work - uniting both sides of the brain (and both sides of our team).
We’ve developed numerous plugins utilising CSS, which you can check out here, but we’d also like to share some cool little snippets that can help personalise your site.
It’s worth noting that the subsequent CSS code needs to be placed in the Custom CSS editor under the Design settings and will affect all the elements of the same type throughout the site; if you want to target individual blocks, then you will need to find the associated Block IDs via the DOM Inspector, or this Chrome plugin.
1) Squarespace Button Colours
Button colours on a Squarespace site are normally dependent on the colour palette you’ve allocated your site; there are not a lot of options for customising button colours, which can be frustrating for you pedantic designers (I know you’re out there).
Using the code below, you can change the background colour and the text colour of your buttons!
/*Squarespace Button Colours*/ .sqs-block-button a{ color: #FFF !important; /*change this for the text colour*/ background-color: #1EAADA !important; /*change this for the background colour*/ }
2) Squarespace Button United Width
Continuing on with Squarespace buttons and how we can personalise them, the next is how we can set a permanent width.
By default, Squarespace will adapt the button’s size to its text.
But if you’re looking to keep your button’s size consistent (looking at you pedantic designers), then use the code below.
/*Squarespace Button Width*/ .sqs-block-button-element--small, .sqs-block-button-element--medium, .sqs-block-button-element--large{ width: 200px !important; /*change this for button width*/ padding: 20px !important; }
3) Squarespace Button change colour on hover
There’s a lot that we can achieve with CSS to make some unique style changes, but changing the standard hover animation is a good way to start setting your site apart from others.
Use the code below to add a custom hover colour to your Squarespace buttons.
/*Squarespace Button Hover Effect*/ .sqs-block-button .sqs-block-button-element--small, .sqs-block-button .sqs-block-button-element--medium, .sqs-block-button .sqs-block-button-element--large{ transition: .2s ease; } .sqs-block-button .sqs-block-button-element--small:hover, .sqs-block-button .sqs-block-button-element--medium:hover, .sqs-block-button .sqs-block-button-element--large:hover{ background-color: #0E0D39 !important; /*change the colour for the background on hover*/ color: #FFF !important; /*change the colour for the text on hover*/ transition: .2s ease; }
4) Fade in text on Squarespace Images poster blocks on hover
Sorry about the state of that heading, I couldn’t think of a better way to describe it…
Anyway let’s face it, animation is fun.
I genuinely spent about 2 minutes just hovering over the button above as it was strangely cathartic.
Animation can be very playful, and can definitely bring out a personalised touch to a website; this next bit of code will add a subtle animation over Squarespace Image elements!
Please note that this code will only work on poster image blocks.
/*Adding animation to Squarespace Images blocks*/
.image-block .design-layout-poster .image-card-wrapper,
.image-block .design-layout-poster .image-title-wrapper,
.image-block .design-layout-poster .image-subtitle-wrapper,
.image-block .design-layout-poster:hover .image-card-wrapper,
.image-block .design-layout-poster:hover .image-title-wrapper,
.image-block .design-layout-poster:hover .image-subtitle-wrapper {
transition: .2s ease;
}
.image-block .design-layout-poster .image-title-wrapper,
.image-block .design-layout-poster .image-subtitle-wrapper {
opacity: 0 !important;
}
.image-block .design-layout-poster .image-title-wrapper{
font-size: 10px;
}
.image-block .design-layout-poster .image-subtitle-wrapper{
font-size: 20px;
}
.image-block:hover .image-card-wrapper {
background-color: rgba(0%, 0%, 0%, 0.5);
}
.image-block .design-layout-poster:hover .image-title-wrapper,
.image-block .design-layout-poster:hover .image-subtitle-wrapper {
opacity: 1 !important;
}
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae nisl vel neque varius lacinia. Praesent dignissim, lectus in hendrerit dignissim, ipsum neque ultrices nisi, ac semper lacus velit at mauris.
5) Raising Image blocks on hover
Our creative director was ecstatic about the creation of this CSS snippet; I’m convinced the birth of his first child won’t come close to how happy he was at the creation of this simple bit of code.
“It just has so many uses!” he screamed as I hid under the table, fearing for my life.
Although, as I said before, animation is fun…or he’s easily pleased.
.sqs-block-image, .sqs-block-image:hover{ transition: .2s ease; } .sqs-block-image:hover{ margin-top: -30px; }
Give it a whirl!
6) Reducing the opacity of image blocks on hover
This was another one that our creative director wanted, and has been used on a few websites since its inception.
I often find that it’s the simplest changes have the biggest effect.
By making a slight change to an Image block on hover, you can subtly suggest to a user that the image can be clicked on.
.sqs-block-image, .sqs-block-image:hover{ transition: .2s ease; } .sqs-block-image:hover{ opacity: .6; }
7) Adding an overlay onto Squarespace Poster Image blocks
I don’t need to tell you that web design can be image heavy; that’s especially true for us as, our creative director loves to pump out graphics and use them throughout our own websites (see the image above for proof, and well, all of our sites I suppose).
Squarespace lets you change the overlay of a background image on a section; it doesn’t let you change the overlay of individual images.
Use the code below to change that.
Please note that this code will only work on poster image blocks.
/*Adding an overlay onto Squarespace Poster Image blocks*/ .image-block .design-layout-poster .image-card-wrapper { background-color: rgba(0%, 0%, 0%, 0.5); }
No overlay
Can you read me?
With overlay
I bet you can read me now!
8) Doubling the Squarespace Line block
The Line block is very useful for dividing content and as a way to break up text, but the default Squarespace line blocks cannot be customised outside of changing the colour.
So we use some nifty CSS code to add a personal touch to the websites we make.
/*Doubling the Squarespace Line Block*/ hr{ border-top: 4px solid #1997C0 !important; /*Change the colour of the top line*/ border-bottom: 4px solid #0E0D39 !important; /*Change the colour of the bottom line*/ height: 4px !important; background: none !important; }
Pretty cool, right?
9) Changing the height, width and colour of the Squarespace Line block
Going down the same vein as the snippet above, changing the dimensions of the line block is a cool way to shed that out-of-the-box feel of a fresh Squarespace site.
A good ~90% of the sites we make will have this code used on them because of how versatile and useful the code is.
/*Changing the height, width and colour of the Squarespace Line block*/ hr{ height: 4px !important; /*Change the height of the line block*/ width: 60% !important; /*Change the width of the line block*/ background: #0E0D39 !important; /*Change the colour of the line block*/ }
10) Creating a vertical line
This one does require a tiny bit of setup, but can definitely impact the personality of a site.
This can be used before a block of text to segment it; make it stand out.
Copy and paste the following code into a Squarespace code block:
<!--Creating a vertical line--> <div class="ph-vertical-line"></div>
Now copy and paste the following code in the CSS editor under the Design settings:
/*Creating a vertical line*/ .ph-vertical-line{ background: #0E0D39; /*change the background colour of the line*/ height: 100px; /*change the height of the line*/ width: 4px; /*change the width of the line*/ }
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium ut ipsum euismod vestibulum. Proin posuere malesuada semper. Duis nec nisl et ipsum posuere ornare. Integer et leo sapien. Etiam ut neque in arcu volutpat finibus at ac dui.
11. (2022 Update) Transforming an image into a different shape
Transforming an image into a specific shape could help tie your website into your branding, or it can ben used to individualise your site.
If a hexagon isn’t the shape you want, then head over to “Clippy” via this link.
You can choose from a variety of presets, or even design your own shape!
Simply design your shape, copy the new “Clippy” code, and replace it with what we have added in this example.
We’ve definitely used this CSS snippet in the past and we can attest to it’s usefulness!
/*use block ID to target specific images*/
img {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
A boring image
A cool image
That concludes our list of 11 Squarespace CSS code Snippets to personalise your site; I hope you found it useful.
If you have any questions regarding the CSS code above, or any questions regarding other potential CSS snippets, please leave a comment.
Thank you! :)
