5 Easy CSS Tips for Your Squarespace Website
5 Super Simple CSS Codes for your Squarespace Site
You know, when it comes to DIYing a website, Squarespace is hands-down one of the best tools out there. In fact, I'd dare say it's the best, especially if you're not a coding wizard. I've even written a whole post about why I'm such a fan.
Now, the built-in style editor in Squarespace is pretty darn fantastic. It lets you play around with fonts, colors, and layouts without ever having to touch a line of code. But, and here's the kicker: there are a few things it won't let you change. That's where I come in.
I've got a handful of nifty tricks up my sleeve that can take your site from looking DIY to pro-level. You see, while I generally recommend leaving the heavy-duty coding to the experts (adding the wrong code can turn your site into a digital disaster zone), these tweaks I'm about to share are as simple as copy and paste. And guess what? If anything goes awry, no sweat; you can just hit 'undo.'
So, are you ready to take your Squarespace game up a notch? Of course, you are! But before we dive into the good stuff, let's get a bit of background knowledge under our belts. We don't want to go in blind, right?
What is CSS?
CSS stands for Cascading Style Sheets. It basically defines how your website is styled across different screen sizes. In tech lingo, it describes how the HTML elements on your website should be displayed. (Think of HTML as the content of your site and CSS how the HTML is formatted.)
CSS is built around selectors, properties, and property values. Here’s an example snippet of CSS code:
p
{font-size: 12px;
font-family: quasimoda;
}
In this example, p (body text) is our selector, font-size and font-family are both properties, and 30px and italic are their respective property values. So, I’ve styled the body text 12px in Quasimoda font for that website.
How do I add CSS to my site?
The built-in style editor is one of the things that makes Squarespace so easy to use because it allows you to customize a ton of your website without having to know any code.
But, as I mentioned, there are a few things that you can’t do in the style editor, which makes it necessary to do a bit of custom coding.
Head on over to the Website menu on your Squarespace site, scroll down to the bottom of the page and click on Website Tools. A new menu opens and you will want to click on Custom CSS. That will open up the Custom CSS window.
DISCLAIMER: Broken or improperly added custom CSS can “break” your website (stop elements from displaying properly), so only move forward with adding custom CSS if you’re confident you’re adding it correctly. Squarespace does not provide support for custom CSS. In fact, if you contact them, they will want you to remove the code before helping you.
Note: These codes are for Squarespace 7.1 sites.
With that said, let’s move on. It’s really not that scary. I promise.
1. Remove hyphens on mobile
You know, it's a little something that most of us don't even notice when we're viewing websites on our trusty desktops – text automatically resizes itself for mobile devices. But when you do switch to your mobile, you might be in for a little surprise. Suddenly, you see these pesky hyphens at the end of lines, breaking up your text. Not exactly the sleek, polished look you want for your site, right? Yuck, indeed! These simple tweaks will make sure that you don’t have those crazy hyphens showing up where you don’t want them.
Remove from All Text:
//remove hyphens mobile - all text
body {-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;}Remove from Headings Only:
//remove hyphens - headings only
h1, h2, h3, h4 {-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important; }2. Remove underlines from links
Squarespace automatically underlines links. Those automatic underlines on links can sometimes disrupt the clean, modern look I aim for on my websites. It's all about personal preference, and I definitely prefer a sleeker, more minimalist appearance. If you're anything like me, you'd rather not see those lines! They make the design feel a bit cluttered, right?
//Remove Underlines From Text Links//
.sqs-block-html a, .image-title-wrapper a,
.image-subtitle-wrapper a,
.sqs-image-caption a, .image-caption a,
.sqs-block-newsletter a, .list-item-content__description a,
.list-section-title a, .sqs-block-html a, .image-title-wrapper a,
.image-subtitle-wrapper a, .sqs-image-caption a, .image-caption a, .sqs-block-newsletter a, .list-item-content__description a, .list-section-title a {
text-decoration-line: unset;}3. Remove the underlines in links in your site navigation
I don’t know why, but I don’t like the automatic lines for the active pages in the site navigation. Something about those lines can make a website feel a bit less sleek, a tad too rigid, and perhaps even a smidge outdated. Here is the code to make them go poof!
//remove lines from header links
header a {
background-image: none !important;
}4. Change the color & font size of the active page in your site navigation
Here’s what I do with the navigation on most of the sites I design as an alternative to the underlined links. It can be as subtle or bold as you like. By adding this bit of code, your active page (the page your visitor is on) is in a heavier font and a different color than your main nav links. Obviously, you are not going to have red as in the example, so use one of the accent colors in your palette. You can take a look at the top of this page and see that “The Journal” is in a different color and weight than the rest of the links.
Customizing your navigation goes a long way in making your website unique and aligning with your brand's aesthetic. The snippet of code you've added offers a simple yet impactful alternative to underlined links. It gives you the freedom to decide how noticeable you want the change to be – from subtle to striking.
//change active page navigation
.header-nav-item--active a {
background-image: none!important;
font-weight: 500 !important;
color: red !important;
}The primary advantage of this code is that it makes the active page stand out. Your visitors will immediately know which page they're on, thanks to the heavier font and distinct color.
5. The social icons in your header
You know, when it comes to design flexibility for those social icons in the header, Squarespace isn't exactly the most generous. It's kind of like trying to fit a square peg in a round hole – you can regulate their size, but beyond that, your options are somewhat limited.
// Header menu social icons
.header--menu-open .icon, .header-actions-action--social .icon {
background: #CEC9BC;
padding:6px;
border-radius: 50%;
margin-right: 0px !important;
}With this snippet, you're stepping into a world of design freedom for your social icons—no more cookie-cutter styles! It opens up exciting possibilities, like adding a sleek background behind those icons. And the best part? Customizing it to match your brand's color palette is a piece of cake. 🎨
Ready to play with shapes? You've got options. By tweaking the border radius, you can create square backgrounds with rounded corners (try 10-20%) or go for a circle shape with 50%. And let's talk padding – it's like a magic wand for adjusting the space around your icon. Keeping it around 6px is a solid choice, but you're in control if you want more or less space. Oh, and don't forget the margin if you want to give your icons some breathing room.
This code snippet hands you the keys to make your social icons pop, align with your brand's aesthetic, and stand out on your Squarespace site.
I truly hope that these tips have proven helpful and that any fear of CSS is starting to dissipate. I know that delving into CSS can seem a bit daunting at first, but trust me, it's like stepping into a fascinating world of endless possibilities. You might even discover that it's a bit like falling down a rabbit hole, just like Alice in Wonderland!
