3 Easy Ways to Add Your Unique Style to Squarespace
Sometimes, it’s the smallest details that make the biggest impact. Creative customizations can be used in the most intentional and stylish ways, and that’s exactly what we’re diving into in this week’s custom code tutorial.
In this Squarespace tutorial, you’ll learn how to recreate three subtle style changes that will give your Squarespace site a personal touch. We’ll be customizing your scroll bar, creating a fresh look for selected text, and colorful, eye-catching hyperlinks.
These are the little corners of your site that often get overlooked, but when you give them some love, they add a whole new layer of personality, making your site feel unmistakably yours. The video below will show you how to add these codes to your Squarespace site and how to customize them. The codes from the video are below, ready to copy and paste into your own website.
Be sure to check out the related content linked below to learn even more about all the cool things you can customize about your Squarespace site.
Below are the exact snippets I used in the tutorial, along with a quick explanation of what each one does. You can copy and paste these into your site wide Custom CSS & be sure to update the margins and border radius to match your own unique site style. Scroll down to explore them all, or use these links to jump ahead:
Customize your Squarespace scrollbar colors
Pro tip: in the video, I was able to reach my site wide CSS from my pages menu by clicking on custom code at the bottom of the pages menu, and then selecting custom CSS. If that option isn’t available for you, press the / key on your keyboard to open the program search and look for CSS so you can navigate their directly.
Custom scrollbar colors for Squarespace
The first part of this code changes the background color of the scroll bar itself.
After that, we’re customizing the color of the scroll bar indicator - that little bar that shows how far down the page you are.
To learn more about custom code color options, check out this article: insidethesquare.co/colors
The last part of this code changes the width of the scrollbar using a PX value.
/* custom scrollbar style from insidethesquare.co */
/* Scrollbar Track */
::-webkit-scrollbar-track {
background: #e5f5f6;
}
/* Location Indicator */
::-webkit-scrollbar-thumb {
background: #a1d9dd;
}
/* Scrollbar Width */
::-webkit-scrollbar {
width: 16px;
}Customize Selected Text in Squarespace
This code will change the color of the background and the text when you highlight it with your cursor.
Whatever colors you choose, make sure they have a high enough contrast to be legible!
/* Selected text style from InsideTheSquare*/
::selection{
background:#e5f5f6!important;
color:#333!important;
}Customize Hyperlinks in Squarespace
The first part of this code changes the style of the built in hyperlink underline. Were using code to change the color (#a1d9dd) and a px value to change the thickness (3px)
The second part o this code creates the hover effect, where the background color and the text color change. We also removed the underline on a hover so you will see a solid background color behind the text on a hover.
/* Hyperlink Hover Effect from InsideTheSquare */
/* Hyperlink Underline Style */
.sqs-html-content a{
text-decoration-color: #a1d9dd!important;
text-decoration-thickness:3px!important;
}
/* Hyperlink Hover Effect */
.sqs-html-content a:hover{
background:#e5f5f6!important;
color:#333!important;
text-decoration:none!important
}