Drupal 7 Tutorial: Styling Comments Using Views

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

1

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.

2

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:

3

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:

    4

    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.

    8

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

Press Apply. The preview should now appear like this:

6

Click Save.

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

7

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.