6 Must-Have CSS Codes for your Squarespace Site!
Small businesses Rock!! Save on Pinterest if you like these Codes! :)
The information provided is from my own experience and may not work for everyone. I am not a professional nor claim to be. Please read my disclaimer for more information.
Okay, so I know how it is when you start a new business, you have never entered code before, but you got your new website, and now you are like… Now what?
Well, I am here to help because I get it! I was there - right where you are!
But first! I have to provide you with a disclaimer… Squarespace states that, “You should only use CSS to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site.”
That being said, you can add CSS to your site, and you can do it without damaging your site. You DO have to be careful when you are adding code no matter what and you want to pay attention to what you are adding and how it is being added - do a little CSS education and research. You might actually love it! ❥
What I am about to share, I have tried and/or using all of them and you can copy and paste! Of course, you still want to be careful not to add any extra characters or symbols that do not belong. CSS can be very picky!
Also, I am using the Squarespace 7.1 platform and am not familiar with any other platform when it comes to adding CSS. I have heard that you can use these with 7.0 but I do not know the instructions or how far they differ (if at all). I also want to add that in the case that you do break something, Squarespace may not be able to help with your custom code and may not be able to fix it.
BUT DON’T LET THAT SCARE YOU! You just have to pay attention! And it wouldn’t hurt to learn about the code you are putting on your site!
LET’S GET STARTED!
First, most of these will be on your Custom CSS page (Design - Custom CSS - Add or copy & paste - change a little here and there (color, BlockID, size, tilt, etc.), and save. There are 1 or 2 that will go on the Advanced section in the actual settings page code injection section as well, but I will let you know!
Now - just a really quick lesson on CSS, HTML, and Javascript. DON’T WORRY! The only one we are using here is CSS, but want to help you understand all 3.
HTML, CSS, and JavaScript are three essential web technologies that work together to create dynamic and interactive web pages - but you can start with, they all have different functions.
HTML stands for HyperText Markup Language and is used to structure the content of a web page. It provides the basic building blocks of a web page, such as headings, paragraphs, lists, and links.
CSS stands for Cascading Style Sheets and is used to style the content of a web page. It allows you to control the appearance of elements on a web page, such as colors, fonts, layout, and animations.
JavaScript is a programming language that is used to add interactivity and dynamic functionality to a web page. It allows you to create interactive forms, manipulate the content of a web page, and respond to user actions, such as button clicks and mouse movements.
In summary, HTML provides the structure, CSS provides the style, and JavaScript provides the interactivity for a web page - we are styling! ⇜
Alright! Let’s dive in!
DROPDOWN MENU COLOR
Go to: Custom CSS in Design.
Here you can change the color to match your site! Change the rgb to whatever color you would like (or use hex code.)
/*dropdown menu color*/
.header-nav-folder-content {
background-color: rgb(255, 87, 106) !important;
}
.header-nav-folder-item a {
color: rgb(255, 255, 255) !important;
}
ANIMATED LINKS
Go to: Custom CSS in Design.
Here you can change the color to match your site! Change the rgb to whatever color you would like (or use hex code.)
/*animated link*/
.sqs-block-html a {
text-decoration: none !important;
box-shadow: inset 0 -1px 0 0 rgba(255, 87, 106, 0.3) !important;
color: inherit !important;
transition: box-shadow 200ms !important;
background-image: none !important;
}
.sqs-block-html a:hover {
box-shadow: inset 0 -12px 0 0 rgba(255, 87, 106, 0.3) !important;
}
2 FONTS ON 1 LINE
One of my favorites!! So, you can have two different fonts on one line! Highlight the text you want to change and select Bold. Now save the page. Switch out the font below to the font family you want it to be - this is for the second font. Make sure that it is a font that you have used on your site already (if you have extra fonts h5, h6, h7 - you can use those as well). However, this does change that font you have selected on every page.
/*two font-one line*/
:is(h1, h2, h3, h4) strong {
font-family: Times New Roman !important;
}
VERTICAL TEXT (ANOTHER FAVORITE!!)
Go to: Custom CSS in Design.
I actually use this one of my extra fonts that I added (h6) but you can do this with the current fonts (h1-h4) that you have in there already!
Just change the heading you want on the code, h1- h4.
// h7 vertical text//
@media screen and (min-width: 640px) {
h7 { writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0 auto;
position: relative;
right: 10px; }
}
SOLID SHADOW BUTTON COLOR CHANGE
Go to: Custom CSS in Design.
Change the #333333 to the color you want! You can also change the how far the shadow comes out or in.
/*button solid color change*/
.sqs-block-button .sqs-block-button-element--medium {
box-shadow: 5px 5px #333333;
transition: all ease-in .05s;
}
.sqs-block-button .sqs-block-button-element--medium:active {
box-shadow: none;
transform: translateY(4px) !important;
transition: all ease-in .05s;
}
See below where the shadow is extended!
SOCIAL SHADOW COLOR CHANGE **** EXTRA FOR YOU!
Go to: Custom CSS in Design.
/* social link wrapper */
.sqs-svg-icon--wrapper {
box-shadow: 5px 5px #9E576C;
}
WANT MORE?? I have 5 more for you that really make your site look AMAZING! Have fun with them!
You Get:
REMOVE HEADER AND FOOTER ON PAGE
ANNOUNCEMENT BAR ANIMATION
CHANGE COOKIE BANNER
REMOVE UNDERLINE FROM BLOCK
ROTATE BLOCKS ON ANY PAGE
I hope you enjoyed these!! If you need help, don’t hesitate to connect with me here! I would love to hear from you!
Meet the Course Instructor & Creator of Inspire Purpose
Hey! I’m Rachel Hall and I created Inspire Purpose - a website devoted to helping others start their online business & provide web design services that get you to the next level. We created a method that allows you to start a business and/or earn extra income. And although, I cannot guarantee anyone’s success, the opportunities are endless online.
Our mission is to provide you with the tools and resources needed to develop your business and achieve success, such as our marketing courses and our web design services! We strive to make our courses engaging, inspiring and full of helpful insights that you can apply to your own venture. I'm so excited to help you discover the power of web design and marketing courses.
If you want to learn more about me and my journey, click Read More below. If you want to start your own journey, check out Your Journey to find out how!
