Style Comments by Author, Admin, Users

Applies to Version(s): Thesis 1

By default, comments by site admin are denoted with a pale blue background in Thesis.

If blue’s not your color of choice, CSS allows you to make modifications. Perhaps you want your administrative comment responses to be a pale yellow to better match your site’s visual design. To do so, you would add this to custom.css:

.custom div#comments dt.bypostauthor,
#comments dt.bypostauthor div.format_text { background:#FFFFCC; }
.custom div#comments dd.bypostauthor,
#comments dd.bypostauthor div.format_text { background:#FFFFCC; }

The result should look something like this as a before and after on the post author’s comment styling.

Sample Admin or Post Author CSS Comment Background Color Change

Additional Comment Styling Options

The “bypostauthor” portions of the above are not the only CSS classes that can be used for visual effect in your comments. For example, the “comment-author-admin” class highlights other admin-level users who may comment on the “bypostauthor” post.

Additionally, the “byuser” class can be used to draw attention to registered users who are logged into your site at the time they place a comment.

Given the way CSS inheritance and your edits will work together, top-to-bottom, you want to place your “lower level” classes — like byuser — above higher-level administrative formatting in your custom.css sylesheet.  The reason for this is that, because they are logged-in when commenting, the post author and other admins are given the “byuser” class in addition to their “special” classes.

By adding your comment styles for administrators after those for users, your authors and other admin commentators will be styled with your preferences for the highest level matched.

While comments can quickly become “too busy” with excessive formatting, classes also exist for “even” and “odd” comments.  These comment classes allow, as an example, for alternating bands of color for each comment.  While threading and other configurations can diminish the impact, visual aids such as banding can increase usability for popular sites with large numbers of scrolling comments.

The number and variety of comment-specific CSS classes hint at the potential — as usual, the sky’s the limit.  Working in custom.css, you can make changes to your comments’ border lines, fonts, or even add special background images and graphical badges to differentiate your levels of commenting site visitors.  Enjoy!