5 FREE CSS code snippets for your Squarespace website
New to Squarespace and wanna try it out? You can sign up for a free trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
Squarespace is an amazing platform and one I feel confident recommending to authors to build their website on. It's packed with great features, is easy to use and update yourself and the Squarespace team takes care of all the backend tech stuff so you don't have to.
That said, there are obviously some limitations on what you can accomplish, design wise, without knowing how to code.
Now on the positive side, the majority of users will never need to add any code to their website.
However, as a Squarespace designer who works in Squarespace day in and day out, I often find some instances where I need to change something with some css code.
And that's where Squarespace plugins come in.
What are Squarespace plugins?
Squarespace plugins are snippets of code that you can paste into your website to change an element of your website. Usually it's some CSS code that tweaks or adjusts a particular element style of the website. Sometimes it's more complicated and you'll have to use html or javascript.
But generally speaking most of the free plugins available are CSS adjustments only.
And that's what I'm going to share with you today - my top 5 FREE Squarespace CSS plugins/code that I use in my designs.
These are codes that I've gotten from other Squarespace designers and developers, so I'm going to link to their blog posts where they explain exactly how to use their code and how to add it to your own website.
How to AUTOMATICALLY Update Your Copyright Year by Kerstin Martin
In the footer of your website there should be a copyright notice. Usually it's something like this showing the current year:
© 2022 Copyright She Is Moxie. All rights reserved.
Or it has a date range like this:
© 2020-2022 Copyright She Is Moxie. All rights reserved.
It's a tiny little piece of a website design that needs to be in the footer of a website and needs to be up to date. But it can be hard remembering to update it every year.
And that's where Kerstin's amazing piece of code comes in. With it, you don't have to remember every year to adjust your text - it will automatically update to the correct year or year range.
That means when the 1st of January rolls around, you don't need to do anything, it will automatically update. Like magic!
This may just be one of my favourite little hacks ever. I don't know about you but I hate having to remember every year to update the copyright notice in the footer of my website.
Go ahead and try it on your own website.
Remove the active underline links in the footer
Speaking of the footer, if you add links to other pages or websites in this section then those links will show with an underline beneath them. This is to indicate that it's a clickable link for your site visitors to make it easier for them.
However, since I usually add these links as a text link in the footer then they automatically update to be the link colour that I've set for that colour theme.
That means that the link already looks clickable in this section because it's a different colour than the normal text. Therefore I find the underline isn't needed, so I choose to remove that with some CSS.
If you follow Rebecca Grace's guide, you'll be able to easily remove the active underline for any links in the footer.
She also goes through how you can remove it from other sections of your website too. Like your header navigation, site wide on all text etc.
Remove the underline on the header navigation & add active colour plus hover effects
Along with having an underline under an active link in the footer, in Squarespace 7.1 the header navigation also has an underline on active links.
Unfortunately, this isn't something you can remove via the site style settings and you'll need CSS to do that.
Christy Price has a great tutorial that I've linked to that shows you not only how to remove that underline from the header navigation but also how to change the colour of an active link.
The active link is the page that your website visitor has clicked on to view. See the reason why I like to change this to an actual colour is to make it easy for your site visitors to clearly see what page they are on by seeing the coloured link in the header.
This makes for a much smoother experience for your website visitors.
Another piece of code that Christy gives you the option to add is the ability to have the main navigation links fade when you hover over them with your mouse. Thus making it easier for your website visitors to see at a glance what they can click on easily.
When I add this to a website I usually use all three CSS styling options that are shown as they all work together perfectly to create a menu that is user friendly and also looks good for your website viewers.
Change the colour of your dropdown menu
When you create a drop down menu in Squarespace 7.1, the background colour of the drop down defaults to the same colour as your website header navigation. That means if you have a white header menu then your drop down defaults to white too.
And while this may look good in some cases, you may also want to choose a different colour too so that your drop down navigation stands out from the rest of your page. Thus making it easier for your website visitors to view it.
This is a great tutorial by Becca from Inside The Square showing you not only how to change the background colour of your drop down menu but how to make some more design tweaks if you want. Like adding a gradient effect, rounding the edges, changing the link alignment or adding a border etc.
I usually combine this code to change the folder colour with the above code from Christy Price to change my active link colours which usually creates a much more visually appealing website navigation than the default from Squarespace.
Bonus: In Squarespace 7.1 the top level navigation for a drop down menu is clickable even though it doesn't take you anywhere. Use this code from Christy Price: Drop Down Menu Navigation to remove that function and make it more user friendly for your website visitors.
Make your website buttons the same width
Squarespace gives you three button options: small, medium and large. You can adjust the font and padding for these buttons.
However, when you add your call to action text on the button link, the button expands to showcase the text. That will sometimes leave you with different sized buttons even if you used the small button design for all of them simply because of what the button says on it.
In this case, you need a little more control over the look of your buttons and that's where this next little CSS snippet comes in handy.
Kerstin Martin guest posted on Christy Price's blog and shared her CSS code for how to make all buttons the same width.
I love using this code on websites as it allows me to have a more uniform look and feel to all the buttons on a website design - either on one page or site wide.
Now that you know how to tweak your website's design with a little CSS, I encourage you to play around with it a little.
And just remember - if you end up not liking one of the changes you can simply delete the CSS and your site will go back to the way it was :)
LIKE THIS POST - THEN YOU’LL ALSO LOVE…
Have I made you curious? You can sign up for a free Squarespace trial here << Yes, that’s an affiliate link - thanks for supporting my book obsession, my kindle and I thank you ;)
