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邮件列表 推送。
如果您不想继续收到该邮件,可点此 退订

Comments

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

Lindsay Lohan Breakup Confirmed by Lohan, Locksmith, Police [Gossip Roundup]

Farewell, last season's Suri Cruise fashions. Goodbye, Amy Winehouse's bathing suit. Adieu, humanoid version of Lauren Conrad. And so long, LiLo and SamRon's fairytale romance. Lindsay Lohan confirmed her split with Samantha Ronson and insisted the decision was part of a very healthy and mature effort to " focus on myself ." Upon hearing this, Ronson changed her locks and discussed a restraining order with police, so confident was she in Lohan's ability to turn productively inward. Lohan promptly had a run-in with the police . Who would have imagined such a messy breakup for this model relationship? Courtney Love's lawyer, on her client's drug-fueled plunge into broke-ness: ""Courtney noticed the money was gone when there wasn't any left." Deadpan gallows humor: the only possible response to having Courtney Love as a client. (Besides asking for a hefty retainer.) [ P6 ] Before Lauren Conrad's contract expired in March, MTV