3 of My Fave CSS Tweaks to Customize a Squarespace Website

3 of My Fave CSS Tweaks to Customize a Squarespace Website

As a Squarespace web designer, I spend most of my life looking at the backend of websites. It’s more appealing than it sounds, I promise. All that experience adds up, which means I can make a Squarespace website do almost anything I want using the Site Styler Editor, Squarespace built-in blocks, and templates.

When it comes to design, the Brine template family rocks with a ton of features and are some of the best templates you can choose for your website.

But with CSS, it can be even better! Using CSS is a great way to add even more customized branding to your website, and taking it beyond just a template.

Today I’m going to share 3 of my favorite CSS design tweaks that I use on my own website and my clients websites. They were tested on the Brine templates, but they may very well work on other templates, too.

STYLE YOUR QUOTE BLOCK

The Quote Block provided by Squarespace is a fantastic way of making your quotes stand out from the rest of the content on the page.

However, it’s a little plain. If you want it to stand out a little bit more, here is some CSS code to make it your own. This is what the quote will look like.

Keep your face to the sunshine and you will not see the shadows.
— Aborigine proverb

Just drop this code in Design > Custom CSS. Then insert a QUOTE BLOCK on your page.

.sqs-block-quote .sqs-block-content {    
border-left: 5px solid blue;    
background: #fbfbfb;
}

.sqs-block-quote figure {   
padding: 20px;
}

.sqs-block-quote blockquote {
padding: 0 20px 0 45px;    
position: relative;
}

.sqs-block-quote blockquote span {    
font-size: 100px;    
color: blue;    
position: absolute;    
top: 24px;    
left: 0;
}

.sqs-block-quote blockquote span:last-child {    
display: none;
}

.sqs-block-quote figcaption {    
padding-left: 45px;
}

REMOVE HYPHENATED HEADERS IN MOBILE

One cool thing about Squarespace is the mobile responsiveness is automatic for your website. However, depending on the length of your headers, your text may be hyphenated, and not necessarily in a good way.

This code tells your mobile site, and only the mobile versions of your site, to not hyphenate your headers which makes it more visually appealing and easier to read.

Drop this CSS Code in Design > Custom CSS.

p, h1, h2 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
 }

ADD ADDITIONAL HEADERS H4, H5, AND H6

Frequently, I want to add additional headers (h4, h5, and h6) to my websites to give even more styling and branding capabilities. It’s also a great way to visually break up information on your page and good for SEO.

Put this code in Design > Custom CSS.

h4 {
font-family: century gothic;
font-size: 20px;
color: #4b419a;
text-transform: uppercase;
letter-spacing: .2em;
}

If you want to add an h5 and h6, you can use the same code, just change the h4 to h5 or h6 and repaste the code into the Custom CSS. You can also change the stylers within the CSS such as the type of font, font size, color, uppercase or lowercase, and spacing between the letters.

When you go to use the additional headers in your blog post or website, you will need to insert a Markdown or Code Block. In that block you would write the following CSS and use the header you want (h4, h5, or h6):

<h4>THIS IS MY H4 EXAMPLE.</h4>

Below is what my h4 looks like!

This is my h4 example.

There you have it! Pretty simple tweaks but they can make big changes to add more customization to your Squarespace website.

What are your favorite CSS Squarespace tweaks? Do you have any questions about CSS? Drop them in the comments below!

 
 

Ready for a modern & refined website to tell your brand’s story?

Are you ready to reach the next level of success?

Let’s make it happen!


Kat Collins is a Squarespace Website Designer focused on helping you share your brand’s story via your website to take your business to the next level. She specializes in winery website design, as well as small business website design. On the blog, you’ll find a variety of topics that help you succeed in online business, such as website design, branding, social media strategies, blogging, email marketing, Squarespace design tips, and more.