{"id":125888,"date":"2014-02-16T11:30:00","date_gmt":"2014-02-16T16:30:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=125888"},"modified":"2014-02-26T20:33:32","modified_gmt":"2014-02-27T01:33:32","slug":"improving-the-look-and-feel-of-your-author-comments","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/improving-the-look-and-feel-of-your-author-comments\/","title":{"rendered":"Improving the Look and Feel of Your Author Comments"},"content":{"rendered":"

When you’ve spent a lot of time writing a post, it’s a good feeling when you get a tonne of comments.<\/p>\n

The problem is, when you get so many comments you can’t keep track of who’s who and your own comments get buried amongst everyone else’s because they blend right in.<\/p>\n

Many readers like to scan through comments after reading a post just so they can see whether the author had responded to feedback. Styling author comments provides as easy way for your readers to quickly find what you’ve written when there’s a heap of discussion going on.<\/p>\n

For today’s Weekend WordPress Project, I’m going to show you how to style your author comments so they stand out from the crowd.<\/p>\n

\n
\"Feature<\/a><\/div>\n<\/div>\n

Styling Author Comments Using CSS<\/h2>\n

For this project, I’m going to style the Twenty Fourteen theme, but this neat CSS hack should work for any theme.<\/p>\n

This is what the comments section on my site looks like at the moment:<\/p>\n

\"Comments<\/a>
A regular ol’ comments section in Twenty Fourteen.<\/figcaption><\/figure>\n

As you can see, the admin post looks similar to a regular comment except for the star next to the admin username, which indicates the comment was written by me, the author.<\/p>\n

While the little star is a helpful marker for author comments, it’s too small to really catch your eye when you’re scrolling through a busy comments section.<\/p>\n

To add a bit of oomph to your author comments, take advantage of the bypostauthor<\/em> class and add the following code to your CSS file:<\/p>\n

li.bypostauthor {\r\nbackground:#ffffcc;\r\ncolor:#cc3300;\r\n}<\/pre>\n
Now my comments look like this:<\/p>\n
\"Author<\/a>
Jazz up the author comments in your posts by using the bypostauthor CSS class.<\/figcaption><\/figure>\n
The code adds a light yellow background and red text, helping the comments (and subsequent author comments) it to stand out from all the other comments in your post.<\/p>\n
If you want to get a bit fancier still and experiment with CSS, you may like to add a gradient instead:<\/p>\n
\"Gradient<\/a>
Add a gradient to your author comments.<\/figcaption><\/figure>\n
The code for adding this gradient is:<\/p>\n
li.bypostauthor {\r\nbackground-color: #eef4ef;\r\nbackground-image: -webkit-gradient(linear, left center, right center, from(rgb(238, 244, 239)), to(rgb(201, 199, 195)));\r\nbackground-image: -webkit-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));\r\nbackground-image: -moz-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));\r\nbackground-image: -o-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));\r\nbackground-image: -ms-linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));\r\nbackground-image: linear-gradient(left, rgb(238, 244, 239), rgb(201, 199, 195));\r\nfilter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eef4ef', EndColorStr='#c9c7c3');\r\n}<\/pre>\n
And there you have it. Experiment with styling the comments on your own site and help your readers find your voice in the discussion.<\/p>\n","protected":false},"excerpt":{"rendered":"
When you’ve spent a lot of time writing a post, it’s satisfying when you get a lot of comments. The problem is, when you get so many comments you can’t keep track of who’s who and your author comments blend in with everyone else’s. For today’s Weekend WordPress Project, I’m going to show you how to style your author comments so they stand out from the crowd.<\/p>\n","protected":false},"author":164650,"featured_media":126157,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[9798],"tutorials_categories":[],"class_list":["post-125888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/164650"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=125888"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125888\/revisions"}],"predecessor-version":[{"id":193575,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/125888\/revisions\/193575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/126157"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=125888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=125888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=125888"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=125888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}