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...

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...

New Theme: Chteau

New Theme: Chteau    阅读原文» Today we are introducing an elegantly designed and typographically pleasing theme, Chteau . The Chteau Theme Designed by Ignacio Ricci , Chteau has been crafted with close attention to detail and typography. Its beautiful, minimalist look allows you to make your content the focal point of your blog. Aside from a brilliant design, this theme offers many cool features that help you to personalize your blog. There are two color schemes, three layout options, custom accent color, Custom Header Image , Custom Background, six widget areas, and three post formats ― Aside, Gallery and Image. It's loaded with options that make the theme flexible enough to fit a variety of sites. Read all about Chteau's features on the Theme Showcase . Announcing Support for OAuth2 and New Developer Resources    阅读原文» We love developers and the applications they build to help extend WordPress.com in new and meaningful ways. To continue provid...