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). 

<div class="comment-wrapper authored-by-tyler"> .... </div>

 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):

 

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.

Comments

[LesleMora]

Very cool. But actually making this work is above my pay grade. Thanks for making Squarespace accessible to this 'big dummy' (spoken in my best Red Foxx voice).

Hoping to learn more as I go along.

[Matt Hankerson]

Very cool.

I'm planning on starting a site soon using the community functions and want to do something similar to this. One thing we want to do for the site is have avatars that show-up for content authors, very similar to this. But we don't want to have to set-up a custom style for each author (because we will have an open community.) Is there a way to do this?

I notice there is now a icon URL in the social profile. Is this functionality coming soon? Is there a way to to get it to work now?

[Char]

Nice! Actually I'm glad this is an option that we can implement. I've always wanted to have my comments stand out from others. Allows us to be much more creative

Kick A** because my comment was used in the example ;)

[T. Thompson]

@Matt - Right now, no it isn't an automated process, sorry.

@Char - Glad you like it, looking forward to seeing what you come up with.

[Neidel]

This is pretty cool but is there anyway to put the image in the comments signature? I was messing around with it the other night and couldn't figure it out.

Thanks
-Neidel

[T. Thompson]

@Neidel - Funny you should ask, I actually had a version with them in there. It is really quiet easy.

.comment-wrapper.authored-by-tyler .signature { background: url(/storage/layout/icon-tyler50.png) no-repeat 0 0; }

Obviously you will need to position things etc to fit, but that will target the signature based on the author.

[Neidel]

Oh, killer! Thanks dude..

I didn't have a space between authored-by-yaddayadda and .signature...

I am working on a redesign of my Squarespace site and I am going to use this to give my editors and more frequent users avatars as a way to stand out. Couldn't have come at a better time, thanks!!!

-Neidel

ps: ill do 300 push ups if we can get this automated somehow where users can upload their own avatars. :)

[Neidel]

Yo! It works..awesome..thanks!!

http://www.iplaywinner.com/news/2009/5/18/king-of-fighters-xii-new-images-video.html#comments

[Stacey]

I'm a Squarespace novice, can anyone advise where this code is supposed to go? I assumed it belonged in the custom css portion of the template but that isn't working.

[Ryan]

It looks quite nice!

[Gerald]

Hey! This is what I was looking for. Where do I put them codes?

gerald

[krysalia]

Would you please tell me if there's any way to add some gravatar or mybloglog avatars to the comments ? If we wanted to paste the piece of code gravatar gives, where would that be inside squarespace ?

Actually, a friend of mine made his own site and he has added in the form a special field for a little image URL, (the image has to be hosted by the persons who comments, somewhere to his convenience). Then the image is simply shown next to the name, near the comment. Isn't this possible on squarespace ?

(sorry for my non-native-speaker english, and thanks a lot for your answer)

[Kim @ Inspired Goodness]

SS never ceases to amaze me! Thanks for this tute!

[Alex]

no gravatar support yet?

[spread]

cool!

[Opalescence tooth whitening gel]

Opalescence tooth whitening gel

[Nick Mahar]

I was trying to implement this for my editors for post but it didn't seem to work. also the .comment-wrapper.authored-by-tyler, does the name like "tyler" have to be the exact name of what it shows on the blog and where do i put this code?

[Sandra]

Hi. I tried to implement this as well but no luck. Could you pls explain whether some other code needs to be deleted/where to place this code? Thanks.

[Colon Cleanse]

I saw the site and it was relevant for me.Because I am thinking to write my own blog.

[colopure]

I liked this post, but I am a total dunce when it comes to any code. I need like a book for dummies or something. I will definitely stick around and look at some other posts to help me learn better.

[Tony]

Thanks for the info. It was very helpful.

[Yayson Potter | Build Internet Business]

Very cool, do you know if there is a way to add Gravitars to Squarespace comments? I keep looking but haven't found a way.