The Official Squarespace Newsroom

View Original

Styling Comments by Author

Awhile back, we added per-author wrapping div's so that you could style entries based on the author of the post. Along with that, we snuck out wrappers for per-author comments as well. 

In the new blog re-design, I chose to take advantage of those wrappers and am going to give you a quick write up on how to do it on your own site. 

Here is what a comment wrapper looks like that was authored by me (Tyler). 

 

....

 

 For reference, if I had another author on my blog named Mark, his would be ...authored-by-mark.

 So to target my comments and style it differently, here is what I did: 

/* TYLER */

.comment-wrapper.authored-by-tyler { background: url(/storage/layout/icon-tyler50.png) no-repeat 0 8px; padding: 0 0 0 75px; } /* comments */

This puts my icon next to the left of my comment and pads it accordingly (see below):

See this content in the original post

What I did in terms of styling was really basic, but with the per author wrapper encompassing everything in the comment (signature included), you could do anything you want style-wise to just my specific comments.

For instance, if I wanted to make the actual body copy of my comment green and 30px, it would look like this:

/* TYLER */

.comment-wrapper.authored-by-tyler .body { color: #00ff00; font-size: 30px; } /* comment body text */

Likewise, if you want to give all unregistered commenters an icon, you can style them like so:

/* UNREGISTERED COMMENTER */

.comment-wrapper.authored-by-none { background: url(/storage/layout/icon-unreg50.png) no-repeat 0 8px; padding: 0 0 0 75px; } /* comments */

Hope this helps you further customize your Squarespace site with a bunch of nice little touches.