We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form).

We snag an avatar to work with. We'll be using the Gravatar service for sure, as that's tailor made for this and integrated perfectly into WordPress. Beyond that, I'm a big fan of avatars and the feeling of personal ownership they give you on a site.

Some of this design just falls into place easily. We use a white box on gray like all modules on the site. We plop in the avatar. We make the name a link and use the link blue we've been using everywhere else. We put in the date of the comment using the same styling that all the dates on the site have. All the while we stay as organized as we can in Photoshop.

For comment replies, we indent the comment below a bit, trying to stay lined up with the sub-grid we've created. We'll also need a link on top-level comments in which to create those replies, so we place a link in the upper right of those comments. Same link-blue as always. We use an arrow from our Entypo icon set - only there wasn't the perfect arrow there, we had to choose one that was close and rotate it 180 degrees. That should be no problem in CSS.

To make clear that the date of the comment is also a permalink, we'll use an icon for that as well.

We play around with where the "functionality" links should go, but don't dwell on it too long. The only people that will ever see those are me. For the record, this is what I ended up going with.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag