Squarespace CSS Cheat Sheet
1. Install a custom font
1 - COPY + PASTE
2 - UPLOAD FILE
- At the bottom of the CSS window, you’ll see ‘Manage Custom Files’. Click that and find your font file to upload it.
3 - FILL IN QUOTATIONS
Fill in the first set of quotation marks (after “font-family:”) and name your font.
Next, Click between the second set of quotation marks in the “url(”)” and then click on the file you uploaded and you should see the file name added in.
4 - Assign your font to text classes
Now that your font is uploaded you’ll have to assign it to specific text classes to start using it on your website.
Copy + paste a code snippet below where you’d like to use your custom font.
- Insert the name you assigned to your font between the quotation marks.
// Heading 1
h1 {font-family: ’FONT-NAME’;}// Heading 2
h2 {font-family: ’FONT-NAME’;}// Heading 3
h3 {font-family: ’FONT-NAME’;}// Heading 4
h4 {font-family: ’FONT-NAME’;}// paragraphs
p {font-family: ’FONT-NAME’;}
I found this video that does a good job of explaining this process.
2. Use background banners to add dimension.
This doesn’t just happen with Squarespace. I see it happen with any platform. You know those solid bands of color that can get kind of repetitive as your scroll the page? An easy way to add visual interest within Squarespace is to use background banners.
Use half backgrounds.
Here's how it looks
When you stack these two images on top of each other, it’ll create a section that has waves on the top and bottom. You can use this to highlight important sections of your website. You can also do split backgrounds, add in background graphics that align with your brand, or add fun patterns that will make your brand stand out. Check out my personal site for some examples or visit this client site in progress.
3. Create Custom Image Styles
Another way I like to create visual interest is through imagery. I personally like creating collages that align with a client’s brand in Canva so they can easily access and edit them for later use. Here are some other options for image styles built into Squarespace using a Squarespace template I’m designing.
Collage:
Inline:
Card:
Poster:
Overlap:
Stacked:
4. Add a background color to your headlines!
You may have noticed in some of the above photos that I have this bright green background/underline behind some of my headlines. I do this with some CSS to style any headlines I put in bold. Just copy and paste this code, change the hex code to one in your brand palette, and put your headline in bold to see your work.
// underline headlines
h1 strong, h2 strong, h3 strong, h4 strong {
text-transform:none;
font-weight:inherit;
background: linear-gradient(180deg,rgba(251,167,248,0) 50%, #dfde81 50%);} /* change #dfde81 to a hex code of one of your choice */
5. Add a marquee to highlight an important part of your site.
This is a really fun way to change up a basic Squarespace with a little bit of code.
- Add a code block to your Squarespace site where you want the marquee displayed.
- Copy + paste this code into that code block. Edit “Snag a FREE Website Planner” to whatever you’d like displayed here.
//add to your code block
<div class=’marquee’>
<div class=’track’> <h3>
Snag a FREE Website Planner *Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * Snag a FREE Website Planner * </h3>
</div>
</div>
- Lastly, go into design>custom css, and add in this code:
//add to custom css
.marquee {
position: relative;
display: flex;
animation: moveLeft 14s linear infinite !important;
}
.track {
font-size: 36px;
white-space: nowrap;
min-width: 100%;
text-align: center;
padding-top: .5vh;
line-height: .9em;
color: #191c19;
}
.track a{
color: inherit;
text-decoration: none;
animation: text 10s infinite linear;
position:relative;
}
//to change directions change all left to right
@keyframes text{
0%{
left: 0%;
}
25%{
left:-10%;
}
50%{
left:-20%;
}
75%{
left:-30%;
}
100%{
left:-40%;
}
}
@media screen and (max-width: 600px) {
.track {
font-size: 20px !important;
}
}
The End
Get my free squarespace css cheat sheet
Looking for a quick and easy way to up your Squarespace CSS game? Look no further! Our free CSS cheat sheet has got you covered. With this handy reference, you’ll have access to essential CSS properties and values at your fingertips.
One Response
Good post. I learn something new and challenging on blogs I stumbleupon on a daily basis. Its always useful to read content from other writers and use a little something from their sites.