Skip to main content

How To Add Style To Author Comment Box on WordPress

How To Add Style To Author Comment Box on WordPress  阅读原文»

More and more bloggers are switching over to WordPress as their CMS or content management system when building their blogs. WordPress is famous among bloggers due to its highly customizable nature and thousands of plugins which are available for it. Plugins make our work easier and we don’t need to stretch ourselves in the coding part. What keeps us bloggers to keep on writing are the comments and responses we received in the comment boxafter posting it. We all know how boring it can get if your blog does not have a rather active comment box. After all, the comments are our first filter in getting the response from our audience.

So, today I will be teaching you on how to add styling to your author comments box on WordPress. I have tried to search on the Internet for any suitable plugins which might be available for this task, but couldn’t find any satisfactory results. Chances are there are some plugins for this task, but they are not that well-known so finding them is a bit of a difficult task. In fact, adding styling to author comments is not difficult. Here’s how to do it manually as shown in my tutorial and you will be amazed how simple this task is.

By default author comments on WordPress looks similar to user comments as depicted in the following image:

default author comments

Highlighting Author Comments

Now first of all we would begin by highlighting the author comments. This can be done by adding background color to author comments. In order to do so add the following code in your style.css File:

.commentlist .bypostauthor {
background-color: #E7F8FB ;

After you have added the above code in your style.css file, simply refresh the post page to see the changes. Now all the author comments would be highlighted with the background you mention in the above code (Here we kept background color as#E7F8FB)

highlighting author comments


Flip Author Gravatar

Now that you have already highlighted author comments let’s add more styles to them. Now to flip author Gravatar add the following code in style.css file.

.commentlist .bypostauthor .avatar {
position: relative;
float: left;

Here we are using a theme in which by default gravatar appears on the right, so we change the author gravatar location to the left. If in your theme default location gravatar is on your left, just replace left with right with the above code. After adding the code, save the file and refresh the page to observe changes. Now you can see the author gravatar has been flipped to the left side whereas normal comments gravatar is on the right side.

flip author gravator


Adding Border To Author Comments

Now let’s add border to author comments with rounded corners. Simply add the following code in your style.css file to add border to your author comments.

.commentlist li.bypostauthor {
border: 1px solid #000000;
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;

Here border-radius specifies the radius of rounded corner of the border. If we increase the value of border radius the corners will become more rounded. In this example we have chosen black color (#000000) as the border with 1px width. After saving the file, refresh the post page to see the changes.

border in author comments

Please be informed that it may not be applicable to certain themes due to the some designer that uses multiple CSS style sheets. Please feel free to drop me a comment or feedback if you any doubts. I will try my best to help if you encountered any problem with your author box styling.


该邮件由 QQ邮件列表 推送。
如果您不想继续收到该邮件,可点此 退订


Popular posts from this blog

How to find ideas to post new article in your blog

How to find ideas to post new article in your blog    阅读原文»   It is true that sometimes being a blogger may face situations where I would personally like to call it your brain juices got dried up as you have pretty much ran out of topic to blog and you are in crisis as your readers are anxiously waiting for your new posts but you are unable to give in. That’s when you will probably come with excuses like I just posted last week although that post was more directly towards the newbies who stop themselves from making money but it’s still pretty much the same even though you consider yourself not a newbie. The fact is that ideas are everywhere and I mean everywhere if you know where to find it and know how to leverage it. You may be surprised that sometimes these ideas are just right in front of you but you are not observant enough to convert these ideas and turn it into your blog post. Today I will share some tips on where to get these ideas and most of it is part of your dai

Over A Year After Android Launch, ShopSavvy Finally Comes To The iPhone

ShopSavvy was one of the best early Android applications. It launched in October of last year after winning one of the initial Android Developer Challenge top prizes (when it was still known as GoCart). But despite the success it has seen on Android, one question remained: When would it be available for the iPhone. Today, it finally is. Developed by the guys at Big In Japan , ShopSavvy is an app that allows you to use your device as a portable barcode scanner. You point your phone's camera at any barcode and it will read it, do a product look up, and give you information about the product, as well as where you can find it online or at nearby stores and for how much. Obviously, something like this is a window shopper's dream. ShopSavvy was one of the best early Android applications. It launched in October of last year after winning one of the initial Android Developer Challenge top prizes (when it was still known as GoCart). But despite the success it has seen on Android, o

部门心脏?您好!!              生产计划与物料控制PMC高级研修班 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 课程背景: 生产计划和物料控制(PMC)部门是一个企业"心脏", 掌握着企业生产及物料运作的总调度 和命脉,统筹营运资金、物流、信息等动脉,直接涉及影响生产部、生产工程部、采购、货仓、品 控部、开发与设计部、设备工程、人力资源及财务成本预算控制等,其制度和流程决定公司盈利成 败.因此PMC部门和相关管理层必须充分了解:物料计划、请购、物料调度、物料控制(收、发、退、 借、备料等)、生产计划与生产进度控制,并谙熟运用这门管理技术来解决问题,学习拉动计划价 值流(VSM)图,从拉动计划价值流切入剖析工厂制造成本和缩短制造周期 ,提高物流过程循环效 率(库存、资金的周转率)及客户满意率;为降低或消除物流过程中的非增值活动. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 课程目标: 1、建立制定完善的生产与物控运作体系?提升准时交货和降低库存成本 2、预测及制定合理的短、中、长期销售计划?达成公司策略管理目标 3、对自身的生产能力负荷预先进行详细分析并建立完善产品数据机制协助公司建立产品工程数据 4、生产前期做好完整的生产排程和周生产计划?提高备料准确率,保持生产顺畅 5、配合生产计划做到良好物料损耗控制和备料?完善降低物料损耗机制和停工待料工时 6、对生产进度及物料进度及时跟进和沟通协调?缩短生产周期,提高企业竞争力 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 报名详情: 培训时间:2012年11月 3- 4深圳 11月15-16上海 11月22-23北京 12月 1- 2广州 承办单位:新 活 力 顾 问 培训对象:生产计划部门、物料计划部门、采购部门、 生产部门、销售部门、物流、研发部门、 PIE、IT 培训费用:3200元/人(包括资料费、午餐及上下午茶点等) 报名热线:400-623-8399 (免长途话费) 电邮: QQ:120915