13 EASY CSS Codes to Level Up Your Squarespace Website
* Please note this article contains some affiliate links, which help to support our company, but do not have an impact on the price you pay for any given product.
It’s no secret that I am team Squarespace when it comes to building a website for your small business or personal brand. It is the most intuitive and user-friendly platform to date and DOES NOT require any CSS or other coding to look and function professionally.
Being able to quickly create a custom website, specific to your brand, has never been easier. Squarespace allows you to showcase your business in a stylish way without needing to be a tech wizard.
That said, sometimes you WANT to make that one little tweak to the button or add that cool animation that isn’t naturally integrated into Squarespace.
No problem!
I am going to teach you how to add that special custom code to your website without needing a tech degree. Remember, adding custom CSS is NOT a requirement for a Squarespace website. It can simply enhance the design, and thus add to the appeal of your website.
GETTING SETUP TO ADD CSS
Before we get coding, I want to make sure you understand and do a few things along the way.
1. Always remember your CSS code reads from top to bottom. CSS stands for ‘Cascading Style Sheet,’ so think of a waterfall. If you write a code to change your button color to red, and then later write a code changing it to purple, it will be purple because that is the last color you told the button to be.
2. For any code you write or copy, do not omit the colon, semi colon, quotations, parentheses, or brackets. The code will not work if you miss any of these items. Typos happen, so just be careful. If something isn’t working as you expected, check your code for those elements first.
3. CSS is case sensitive. Do not change any characters to upper or lower case. Type or copy them exactly as shown.
4. Label what each code snippet is for. This will help you stay organized, and should you ever have trouble with a code it will be much easier to find and fix it.
To make a note in your CSS file that will not appear on your website do this,
/* write your note here */
5. Download the FREE Squarespace ID Finder chrome extension. This tool will help you easily find the block id’s (names) given to each element on your website. Adding CSS to these id’s and other properties is what makes them change their appearance. When you click on the extension while in your Squarespace backend, it will give you a block or section id for every element. Simply click the id you want, and it will copy it so you can then paste it into the CSS code.
6. Log into the backend of your Squarespace website. Click on ‘Website’ and under Utilities click on ‘Website Tools.’ Click on ‘Custom CSS,’ this is where we will be working today.
7. Have the element you want to customize visible in the edit window when you add the CSS code. That will allow you to view the change when you add the code. Don’t forget to check the mobile view.
8. You will notice some code has ‘!important’ included in it. This helps to override certain Squarespace coding. The need for this addition does change, so if your code is not working try adding or removing it from your custom CSS.
9. Do not forget to click ‘save’ after adding any custom code.
TAILOR HORIZONTAL LINES
In Squarespace you can add a horizontal line to break up a section or add it as a simple design technique. But other than adjusting how long it is you can’t alter it with the built-in settings.
Use this code to adjust the thickness and/or color of the line (change the thickness by changing the number of pixels to meet your preference).
CSS Code
/* Customize Horizontal Line */
.sqs-block-horizontalrule hr {
background: orange;
height: 3px !important;
}
HEADER LINE
Sticking with lines, maybe you like the look of a simple line separating your header from the body of your website. This is an easy CSS code that can have a definite impact on the look of your website.
CSS Code
/* Add line under header */
#header {
box-shadow: 0px 0px 2px 0px #000000 !important;
}
The 1px in this code indicates a bottom border to the header and the #333333 is the color of the line. You can adjust the px up to 2px, 3px or so on to make the line thicker and insert the color you wish to have.
It is so simple, but effective.
CHANGE OPACITY OF ANY BLOCK
I use this technique quite a bit in my website projects. It can be hard to find just the right background image because the colors don’t match your theme, or the image is too busy.
This can easily be changed by adjusting the opacity of the photo. You can lighten it up, so text stands out more or to soften the overall feeling.
CSS Code
/* Change opacity on homepage image */
Put your block id here {
opacity: 80%;
}
The lower the percentage, the more transparent your image will be.
CHANGE BUTTON COLOR ON HOVER
Demo of button color change on hover
Having a button change color when someone hovers over it is a simple but effective way to let customers know to take action.
In Squarespace you have three styles of buttons available with each color theme. Though it is possible to change all the buttons on hover with one CSS code, it is not likely to work with all your themes. And to add CSS for each button type can clog up your CSS file. So, it is best to use the block id to add this code to only specific buttons.
CSS Code
/* Button color change on hover */
Put your block id here .sqs-block-button-element:hover {
background-color: #000;
color: #fff;
}
The ‘background-color’ obviously changes the button background color while the ‘color’ changes the font color.
ROTATE BLOCKS
A fun way to add some difference to your website is to rotate or angle an element. This could be an image, special icon, or product being showcased. It is nice to break up the straight lines with some visual interest and this simple code does the trick.
CSS Code
/* Rotate featured product */
Put your block id here {
transform: rotate(-20deg);
}
You can easily adjust how much the item is rotated by changing the degrees.
SPIN ANIMATION
Mockup of a slowly spinning element on a webpage
Add a little action to your site with this spin animation code. This technique can draw attention to a new product, service, or important content. Warning don’t overdo it. Too much motion can trigger or deter people.
CSS Code
/* spin animation on circle */
Put your block id here .sqs-block-content {
animation: spin-forever 15s linear infinite;
}
@keyframes spin-forever {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
This code has the element continuously spin, but you could certainly google other values for the spin animation. You can also adjust the speed and direction of the spin.
CUSTOM BULLET POINTS
Then, find a symbol you like and get its CSS code. On UNICODE it is the ‘U+’ code under the symbol. On other sites it could be a four-digit number that you would add a ‘\’ in front of. I simply like to copy and paste the actual image. You will add this to your code, and if you’d like, you can also change the color and weight of the symbol.
CSS Code
/* Insert Unicode */
ul[data-rte-list] li>*:first-child::before {
content: "Unicode symbol or code goes here"!important;
font-weight: 400;
color: coral;
}
This code will change all the bullet points throughout your website. To target only a specific set, change the ‘*’ in the code (‘ul[data-rte-list] li>*:first-child::before’) to ‘h1’ for header 1, h2 for header 2, ‘p’ for paragraphs, etc. It is not likely you will have an abundance of bulleted lists on your website, so generally speaking using the code above and just changing all bullets is okay.
CENTERING TEXT ON MOBILE
It’s pretty likely that you will have a header left aligned somewhere on your website. It looks great on a laptop or desktop but when viewing it on mobile it would make more sense to have it centered. The key to customizing anything on mobile is to use a media query. These can look quite confusing, and you don’t want to put a media query in the wrong place, or it could alter all your other code. So ALWAYS remember to put media queries at the bottom of your CSS file.
What does a media query do
A media query targets certain screen sizes; causing a certain element to look different on a smartphone versus a desktop.
CSS Code
/* Text align center on mobile */
@media only screen and (max-width: 640px) {
Put your block id here {
Text-align: center;
}
}
HIDE FOOTER ON MOBILE
For some businesses their website footer contains lots and lots of navigation links. Though these are important to have, they can be pretty unsightly and cause extreme scrolling when being viewed on a smartphone.
In this situation you will want to hide the footer for mobile users. Follow these steps to do that.
CSS Code
/* Hide Footer for Mobile */
@media only screen and (max-width: 640px) {
footer {
display: none !important;
}
}
Note; Once you have one media query setup for a specific screen size, simply add the new code into that segment.
For example:
@media only screen and (max-width: 640px) {
/* Text align center on mobile */
Put your block id here {
Text-align: center;
}
/* Hide Footer for Mobile */
footer {
display: none !important;
}
}
*Make sure your :, ;, and {} are in the right places.
REMOVE UNDERLINE ON FOOTER LINKS
Perhaps you are like me and prefer a little cleaner look for your website. The footer can already be a very busy place, so removing the underline on any links can really help to clean it up. The above image shows only two items with links, but obviously, the more links you have/need in your footer, the more this CSS trick will help.
CSS Code
/* Remove link underline in footer */
footer .sqs-block-html a {
background-image: none !important;
background-repeat: no-repeat !important;
text-decoration: none !important;
}
What this is saying is: in the footer, all the hyperlinks (a) within text blocks (.sqs-block-html) will not have a line under them.
VERTICAL TEXT
Easily create vertical text on your website. This is a design you will only want to use on larger screens, so we will add this code to a media query for laptops and desktops only.
CSS Code
/* Create vertical text */
@media only screen and (min-width: 800px) {
Put your block id here {
width: auto !important;
writing-mode: vertical-rl;
text-orientation: sideways-right;
transform: rotate(180deg);
font-style: normal !important;
}
}
GIF MOBILE MENU BACKGROUND
Mobile mockup of a GIF background added to the menu page of a website viewed on mobile
I’m not gonna lie, the Squarespace mobile menu leaves much to be desired. Adding this cool CSS code will make you stand out from the average Squarespace website. Choose your favorite GIF to layer behind the menu, adding more interest to this basic but necessary page.
CSS Code
/* GIF mobile background */
.header-menu-bg {
background: url(PUT YOUR GIF-URL-HERE);
background-size: cover;
background-position: center;
}
IMAGE SHADOW
Squarespace hasn’t caught on yet that we want to customize our images more directly on their platform. This simple code will add a shadow behind your image, giving a sense of depth to the page.
CSS Code
/* image shadow */
Put your block id here {
filter: drop-shadow(5px 5px 8px #000000);
}
You can change the color to any hex code you want, as well as the depth of the shadow by adjusting the pxs.
CAVEATS ABOUT USING CUSTOM CSS IN SQUARESPACE
When done correctly, custom CSS can give your website a more polished look and feel, presenting more professionally to your clients. But there are a few things you should keep in mind before you go ‘hog wild’ adding CSS all over your website.
•Squarespace support is limited to how much help they can offer when you add custom CSS to your site. Don’t count on them if you run into problems with your CSS code.
•Squarespace does not consider custom CSS when they do updates. So, if they change an id or class and it breaks your code, then you need to find and fix it yourself.
•Don’t go overboard. Only add CSS that brings real value to your website.
•If you are using Squarespace 7.0 and want to change templates, you will need to reload all your CSS, it does not transfer between templates. (it WILL transfer if you are using version 7.1).
•Keep your CSS snippets short and sweet. The more you add, the more likely it is you will run into problems somewhere down the line.
•It is a good idea to copy and paste your custom code into a notes app, word doc, or something similar. Glitches happen and keeping a backup off the platform is always a good idea.
PLUG-INS: AN ALTERNATIVE TO CUSTOM CSS
Maybe you want to add the above features or have other ideas of how you’d like your site to look or function. BUT you’re not feeling so comfortable adding the code yourself. That’s okay. There are several companies that offer Squarespace plug-ins.
Don’t know what a plug-in is?
A plug-in, also called an add-on or extension, is a software that will add function or visual effect to your website. Each plug-in has its own purpose. Some might make a visual change, like spin or shake an image, and others add content like tax calculations or integrate a third-party tool, like a content management system.
A few of my favorite Squarespace plug-in sources are Spark, SquareKicker, and Ghost. These and other similar companies offer free or low-cost plug-ins to help enhance your Squarespace website. In my experience they all have great customer support to help you find the right plug-in and get it set up correctly. I suggest using plug-ins that include an auto update feature. If you’re not ready to do your own CSS coding, plug-ins are a safe alternative.
CONCLUSION
If you are a solopreneur or small business owner who has built a basic Squarespace website, I hope you can use some of these simple CSS codes to give your site an upgraded look. Many of these are small tweaks but will enhance how professional your business appears online.
If you’d like to learn more CSS tricks, drop us a line at info@accessdesigns.net, and I’ll be happy to add more to a future article.
Want some help building that standout website?
Let me take that task off your to-do list. You focus on your customers and I’ll focus on your website.
