SQUARESPACE CODING 101: Taking your Website to the Next Level with CSS Code
Squarespace is (obviously) our favorite platform for building a website, but sometimes we do want to take the design of our clients’ websites to the next level.
Advanced Squarespace styling techniques allow you to customize your website beyond the platform's built-in tools, and CSS is a powerful tool that can help you achieve this. In this blog post, we'll cover some CSS tricks and hacks that you can use to take your Squarespace website to the next level.
Use Custom CSS Classes
Squarespace allows you to add custom CSS classes to individual pages or sections of your website. This is a great way to apply custom styling to specific elements on your site without affecting the rest of your design. To add a custom CSS class, go to the Page Settings panel, select the "Advanced" tab, and add your CSS class in the "Page Header Code Injection" section.
Adding a Custom Font to Squarespace
Squarespace offers a variety of built-in fonts, but sometimes you may want to use a custom font to achieve a specific look or feel.
Step 1: To upload your custom font to Squarespace, the first step is locating the font file. This is a file that you need to download; it should end in WOFF, TTF, OTF.
In your Squarespace menu, click on Design --> Custom CSS
Scroll down and click on 'MANAGE CUSTOM FILES'
Click on 'Add images or fonts' and select your font file from your downloads
Step 2: The next step is assigning this new font to paragraphs/headings on your website. Copy and paste this code into the custom CSS section:
@font-face {
font-family: 'NAME';
src: url('FONT URL'); }
Where it says 'NAME', add your font name. You can choose any name for this.
The next step is adding the Font URL where it says in the two brackets in the code above ()
To insert the link, click between the two brackets, click on custom files and click on your Font file. The URL will automatically be added wherever your mouse is clicked.
Step 3: The third and final step is assigning your new custom font to the paragraphs and headings throughout your site.
HEADINGS: Squarespace 7.1 has 4 different heading options. Their codes are as follows:
Heading 1: h1
Heading 2: h2
Heading 3: h3
Heading 4: h4
If you would like to have ALL HEADINGS use your custom font, copy and paste the below code. If you would only like Heading 1 to be the custom font, only copy and paste h1 (and so forth for each heading size).
Where it says 'YOURFONT' in the below code is where you will add your font name that you determined in Step 2.
h1 {
font-family: 'YOURFONT';
}
h2 {
font-family: 'YOURFONT';
}
h3 {
font-family: 'YOURFONT';
}
h4 {
font-family: 'YOURFONT';
}
PARAGRAPHS: Squarespace 7.1 has 3 different paragraph options.
Their codes are as follows:
Large Paragraph: .sqsrte-large
Medium Paragraph: p
Small Paragraph: .sqsrte-small
.sqsrte-large {
font-family: 'YOURFONT';
}
p {
font-family: 'YOURFONT';
}
.sqsrte-small {
font-family: 'YOURFONT';
}
3. Create a Custom Hover Color to Your Squarespace Navigation
This code will add a custom color to your navigation menu, when someone hovers their mouse cursor over each menu item.
STEP 1: Go to Design --> Custom CSS
STEP 2: Add the below code, and switch out YOURHEXCODE for the HEX code of your color:
//hover navigation//
.header-nav-item a:hover {
color: #YOURHEXCODE !important;
}
WANT EVEN MORE CSS TIPS?!
Download your FREE copy of Squarespace Coding 101!
10 unique CSS codes to take your website to the NEXT LEVEL!
