How To Customize Squarespace to Fit Your Brand

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!

It's no secret that I love Squarespace as a website platform. It's easy for my clients to get a beautiful, branded website that's easy for them to update once the project is complete. I don't want any of my clients to feel like they have to keep a designer on retainer or a class to learn coding just to add a new blog post or update their About page. (This is why I always offer Squarespace training and post-launch support for all of my website projects.)

However, I do recognize that some people shy away from building a Squarespace website because they feel limited by the available templates. When compared to WordPress, Squarespace does have some limitations, but I believe that they make the platform stronger. But it can take some code knowledge and trial and error to make Squarespace really fit your brand beyond uploading your logo and setting the available design styles.

 

Using Custom CSS

As a website designer, it's my job to take your Squarespace template beyond the simple design that you get when you choose a template and transform it into something that's a unique reflection of your brand. I do that through the page layouts, style settings, and the images I use on your website, but I also do a lot with Custom CSS.

If you want to make any of these changes, there are two places you can add the code below.

1. In the Custom CSS section of the Design menu.

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!

Just open the Custom CSS section and paste any CSS code into the block. If you already have custom code here from a designer or something you've added in the past, I would recommend that you copy it and save it somewhere safe before you make any changes. That way, if you make a change you don't like or just want to go back to the way your site looked before, you can just paste it in and you'll be good to go.

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!

2. The second place you can add Custom CSS is on individual pages. You do that by clicking on the gear icon for the page you want to edit, and the choosing the Advanced tab. Just a note, if you're adding CSS to this section, you have to tell Squarespace that it's CSS and not some other type of code. You can do this by adding <style type="text/css"> before any CSS code you enter.

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!

Once you've figured out where you want your changes to appear, either throughout the site or on an individual page, you can try out some of my favorite CSS tricks to make your Squarespace website better reflect your brand.

 

Center Blog Title

If you want to center your blog post title instead of leaving to to Squarespace's default location, you can do so with this code:

header .meta, h1.entry-title { text-align: center; }

div.entry-info { text-align: center;}

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!
 

Change Form Colors

I use this trick on almost every website I design because it makes what can be a boring Squarespace default into something that people want to use, especially on a Contact page. Just update the hex codes in the code to match your brand colors and you'll have a great looking form that fits with your overall website.

.form-wrapper .field-list .field .field-element { background-color: #cdedec;
    border: 1px solid #59C4C0;}

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!
 

Update Block Quote

If you're on the Bedford template like me, your Quote Blocks automatically display a quotation icon above the text. The standard gray can be pretty boring here, but luckily, it's easy to change the icon to match the branded colors you're using throughout the rest of your Squarespace website.

 blockquote span { color:#59c4c0 !important }

This is my quote text. You can use this for testimonials throughout your website.
— This is my quote source.

Or, if you're using another template and you're feeling a bit more adventurous, try out this code that creates a colored box around your quote and gives it a colored background. You can change the colors, font type, and font styles with this code. (By the way, this example comes from a website that I've designing for The Old Farmhouse Inn.)

This part changes the main font:

blockquote { font-family: merriweather; font-style: italic; color: #4D5B3B; font-weight: 300; text-transform: none; line-height: 25px; font-size: 10pt;  letter-spacing: 1px; border: none;}

This changes the font of the quote source:

.quote-block .source {font-family: merriweather; font-style: 300; text-align: right; text-transform: none; font-weight: 700; text-transform: none;  font-size: 10pt;  letter-spacing: 1px; padding-top:15px;}

And this section changes the block color:

.quote-block  {padding: 45px 45px 45px 45px !important; margin: 20px !important; border-top: 2px solid; border-bottom: 2px solid; border-right: 2px solid; border-left: 2px solid; border-color: #9A836C; background-color: #e3dad1;}

You can use all three together to get the look below, or try using just one depending on what you want to change.

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!
 

Line Color

This is a really simple change that can have a big impact if you use the Line block to organize your website content. Instead of leaving the line as the Squarespace default, you can change the color to better fit your brand.

.sqs-block hr {border-top: 1px solid #acacac; border-bottom: none; background-color: transparent; padding-bottom: 0px; padding-top: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px;}

 
 

 
 

Block Spacing

And just in case you're tired of having Squarespace leave so much space between each block, you can reduce that with this simple fix. If you want to increase the size, make the number positive. If you want to decrease it, make the number negative. Just don't decrease it too far or your website will end up with overlapping blocks.

.sqs-block {margin-top: -5px; margin-bottom: -5px;}

 

Hover Caption

This last tip is another one that can get a bit complicated, but it can add a lot to your website. (I just updated my Portfolio with this code!)

You can change the way your images appear when you hover over them if they are set to Display Caption on Hover (this doesn't work if they are set to something else.) Instead of the standard caption display, you can change the background color, background opacity, font type, font color, and font size.

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {background: #c6b8ab; opacity: 1.3;}

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p { font-family: Merriweather; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; color:white; opacity: 1.0; text-align: center;}

How to Customize Squarespace to Fit Your Brand | Lemon and the Sea: My favorite CSS tricks to customize your Squarespace template and give you more control over the design of your website. If you have a little coding knowledge and a Squarespace website, you can make some small changes that have a big impact. Make your website stand out with Custom CSS!
 

These are just some of the ways that I use Custom CSS to transform a standard Squarespace template into a branded website for my clients. Of course, when I'm designing a full site, I take a lot into consideration before I decide to make any changes - the type of business, the audience, and the brand itself - because I don't to build a website that doesn't help my client with their ultimate goal - to grow their business through an awesome looking website.

Have you used any Custom CSS on your website?

If you want a Squarespace website that's customized to your brand, check out how we can work together to get you there!


Lemon and the Sea is a brand and website design company located in Richmond, VA. I specialize in making the branding process personal. I work with creative women who have a heart to serve others grow their businesses so they can focus on what's most important - family.   I work closely with small businesses to help them dig into what makes them unique, share their vision, and build a business that genuinely represents who they are.