Change the Color of the Blog Comments Box on Squarespace

CSS

Feb 26

Disclosure: Some links in this post are affiliate links. If you click through and pay for a product, I’ll be compensated at no cost to you.

If your Squarespace website has a dark background color like the Nolan template (which uses Black Minimal as its default color theme) and you have a blog, you may want to consider changing the color of the blog comments box. The default white comments box is pretty glaring against dark backgrounds as you can see below. I’ll share some custom CSS to change the color.

Here’s what the comments box looks like by default:

And here’s what it looks like after we’ve added code:

With just a little custom code, we can make a huge improvement on the blog design. The default styling hurts my eyes, but our new version looks on-brand and just so much better.

First, turn on comments

To allow comments on your blog, you first need to Enable Comments Globally. You’ll find this setting under Settings > Blogging > Comments Settings. Then you’ll also need to enable commenting on each post. This can be set on each post individually under Post Settings (click the cog icon in the upper right of the screen while in edit mode for your post), then toggle Comments on or off.

Change the Blog Comments Box Color

Next, we’ll add some Custom CSS to Squarespace to change the colors. In the code below, #000000 is the HEX code for black and #ffffff is white. (If you want to play around with colors, one of my favorite resources is coolors.co, a free site where you can easily generate color palettes and grab HEX codes.) We’re changing the background color of the comments box, the outline of the box, the color of the preview and post comment buttons, and - very importantly - the color of the text as someone enters a comment.

You’ll paste this code into Design > Custom CSS:

/* change background color of main comment box */
.comment-input {
    background-color: #000000;
}

/* make type white when someone enters a comment */
.squarespace-comments .new-comment-area .input form.comment-form textarea {
    color: #ffffff !important;
}

/* style the bottom of the box and outline the box with a thin white line*/
.squarespace-comments .comment-btn-wrapper {
    background-color: #000000;
    border-color: #ffffff;
    border-top: none;
}

/* change preview link color */
.squarespace-comments .comment-btn-wrapper .btn-text {
    color: #ffffff !important;
}

/* change post comment link color */
.squarespace-comments .comment-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
 }

I’ve added comments above so you can see what each section of the code does. Feel free to delete and re-add sections of code to see the changes on your site. Or play around with the colors - they don’t have to just be black and white.

CSS Tricks