Drupal 7 Tutorial: Styling Comments Using Views

The default Recent Comments view in Drupal 7 lays out comments in this fashion:

Essentially it’s an unordered list (ul) featuring a clickable title of the comment followed by a comma, then a timestamp.

But what if you want the comment to include the name of the author and the name of the node as well, and to rearrange it?

Here’s how:

Step 1.

First, think of how you want the comment to look like and write it down. In the example below we are going to use in the following order:

1. comment author followed by an
2. @ sign, then the
3. title of the node, a
4. colon punctuation mark, followed by
5. 96 characters of the comment (linked to the comment), then a
6. timestamp with ‘ago’ appended.

Step 2.

Clone the ‘Recent Comments’ view in /admin/structure/views.

Step 3.

The default ‘Recent Comments’ only has the fields

‘Comment: Title’ and
‘Comment: Updated Date’.

We will add

‘Comment: ID’
‘Comment: Author’
‘(Content) Content: Title’
‘Global: Custom Text’

After some rearranging your fields should look like this:

Step 4.

1. Click ‘Comment: ID’, then click ‘Exclude from Display’. Press Apply.
2. Click ‘Comment: Title’ then click ‘Exclude from Display’. Press Apply.
3. Click ‘Comment: Author’ then click ‘Exclude from Display’. Press Apply.
4. Click ‘(Content) Content: Title’ then click ‘Exclude from Display’. Press Apply.
5. Click ‘Comment: Updated date’ then click ‘Exclude from Display’. In the Date Format, choose ‘Time Span (with ‘ago / hence’ appended)’. Press Apply.
6. Click ‘Comment: Comment’ then click ‘Exclude from Display’. Click ‘Rewrite Results’ and in the Link Path box, type ‘/comment/[cid]#comment-[cid]‘ like this:

   

   Scroll down further and click ‘Trim this field to a maximum length’, and enter ’96’ at the Maximum Length box. Optionally, also click ‘Trim only on a word boundary’ and ‘Add an ellipsis’: Press Apply.

   

7. Click ‘Global Custom text’, and enter the following in the ‘Text’ box ‘[name]@[title]:</br>[comment_body]</br>[timestamp]‘ like this:

Press Apply. The preview should now appear like this:

Click Save.

With some CSS styling you can come up with a snazzy looking sidebar comment list like this: