How To Make Your Squarespace Site Stand Out, Part 2: Custom CSS

In part 1 there were style tips to help you create a Squarespace website that stands out and represents your business.

This article has some ideas for making changes to your website using custom CSS. Skip to the end and click the link for an amazing video on how to work out CSS changes for yourself.

A note about templates

You've probably already chosen your template, so this point may be moot, but you can avoid having to make too many CSS changes if you use the template that gives you the most style options — particularly involving banners and index pages — and that's one of the Brine family of templates.

I discuss the Brine templates in How to Choose a Squarespace Template.


1. Liven Up Your Images

Squarespace images by default do nothing on rollover. This can make the page seem a little flat and unclickable.

Style options for Image blocks and Gallery blocks allow the title and description to be revealed on hover on certain templates (particularly Brine!). These title and description hover options are explained here.

You can add a colour overlay to image blocks by adding this CSS code to the CSS editor:

.image-block:hover { background-color: #ffffff; opacity: 0.8; }

You'll need to tweak the colour if your background is anything other than white. You can also make this work for Gallery and Summary blocks, using the following:

.sqs-block-summary-v2:hover { background-color: #ffffff; opacity: 0.8; }

.gallery-block:hover { background-color: #ffffff; opacity: 0.8; }

For images to expand on rollover, use:

 .image-block:hover {
     -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
     -ms-transform: scale(1.05);
     transform: scale(1.05);
     -webkit-transition: -webkit-transform .3s ease-out;
     -webkit-transition: transform .3s ease-out;
     -moz-transition: transform .3s ease-out;
     transition: transform .3s ease-out;
 }

Play around with the scale values to change the degree of expansion.


2. Make Your Testimonials Stand Out

Testimonials are an extremely powerful way to add social proof to your website — and we humans do love to follow the crowd.

You can make a scrolling testimonial block without CSS. Create a new blog and add each testimonial to a separate page, as the post excerpt. You can then add a scrolling Summary carousel to any page you choose.

For a more complex way to achieve a similar effect, but with extra configuration options (different text colour, etc), check out this method of creating a scrolling testimonial with code on Muno Space.


3. Add Outlines and Drop Caps to Paragraphs

These changes involve creating a new "class" in the CSS editor which you can use to define a paragraph in the Markdown block. First, define the new class to the CSS editor (this one is for a paragraph outline):

.blackBorder  {
       border: 1px solid #333333;
       padding: 10px;
       outline: #3333336 solid 1px;
       outline-offset: 1px;
     }

Then, add the paragraph of text to the page using the Markdown block, as follows:

Screen Shot 2017-11-22 at 09.28.55.png

Here's the definition for a new class ".intro", to style a paragraph (like the one at the top of this page):

.intro {
font-size: 22px;
font-style: italic;
font-weight: bold;
color: black;
line-height:28px;
}

.intro:first-child:first-letter {
font-style: normal;
float: left; 
font-size: 70px; 
line-height: 50px; 
padding-top: 6px; 
padding-right: 8px; 
padding-left: 0px; 
padding-bottom: 0px;
color: #00B8C2;
}

Play around with the values to get the precise effect you're looking for.


4. Hide underlining on links

I find colour is enough to pick out links. If you want to make the underlines disappear, add this code to the CSS editor:

.sqs-block-content a, .sqs-block-content a:visited {border: none !important;}

5. Adjust the Quote Block

The Quote block is a great way to pick out an important sentence in a blog post. Sometimes though the quote text looks a little muddled with the rest of the text. Adding a background colour helps it to stand out:

.sqs-block-quote {background: #eaeaea}

Again, play around with different colour values. For example, you could choose a very light version of one of your signature colours.


Learn How to Modify CSS On Your Squarespace Website

The video on this page is a really clear explanation of how to find and modify the CSS on your own Squarespace website. Once you've got the hang of it, nothing will hold you back!