How Can You Design Comment Box of Your Website Using CSS?
September 28th, 2016 | by Ravi Chahar || 2 Comments |
Have you ever thought to design comment box of your website? In a WordPress theme, you would find the comment box under every single post or may be under the pages too.
Before that, you should how to add comment box in WordPress theme? But if already have a theme with the comment box and you want to redesign it then you can do that using the WordPress default classes.
When you add the WordPress comment form using the WordPress function then it would provide some HTML classes which can be targeted to design comment box.
Design Comment Box And Give A Brand New Look.
You may have noticed that to every website, there is a different design of the comment box. If you are developing a new theme then you would be aware of the classes you have given while adding the comment box.
Let me mention some classes which come with the default comment box.
.comment-body
.comment-metadata
.children
.comment-author
.comment-content
.reply
.comment-respond
.comment-form-comment
.comment-form-author
.comment-form-email
.comment-form-url
These are the main classes using which, you can target the comment form and the comments which would appear. If you have added the threaded comments then you would have to design the replies too.
There are some classes which are added while creating the comment box. You can use any other class.
Let me show you an example:-
clear: left;
margin: 20px 0px;
}
font-family: ‘Century Gothic’;
margin-top: 20px;
}
font-size: 28px;
line-height: 32px;
margin-bottom: 40px;
}
padding: 15px 5px; padding-right: 15px;
margin: 20px 0px;
}
color: #bfb7b7;
text-decoration: none;
font-size: 12px;
}
list-style-type: none;
margin: 0px 0px;
background-color: #f4f4f4;
}
ol.children li {
padding: 0px 10px 0px 10px;
border: 2px solid white;
border-right: none;
}
ol.comment-list li {
list-style-type: none;
}
div.comment-author img{
float: left;
padding: 0px 10px 20px 0px;
}
div.comment-content {
clear: left;
margin: 5px 0px 30px 0px;
}
div.reply a {
background-color: #f18902;
padding: 5px 10px;
color: white;
text-decoration: none;
}
div.reply a:hover {
background-color: #ffc000;
color: white;
}
div.comment-respond {
padding: 10px 10px;
}
.comment-respond h3 {
font-size: 28px;
font-family: Georgia, “Times New Roman”, Times, serif;
}
p.comment-form-comment label {
position: relative;
top: 0px;
}
p.comment-form-author label {
position: absolute;
}
p.comment-form-email label {
position: absolute;
}
p.comment-form-url label {
position: absolute;
}
I have used some extra classes than the list mentioned above. These new classes come from the comments.php file. Whether you check the classes by inspecting the element or check the comments.php file.
There are some IDs for the comment form. You can design the input fields of the comment form using these IDs.
textarea#comment
input#author
input#email
input#url
input#submit
These are the IDs of the input fields of the comment form of WordPress. You can add the background color, padding, margin, position, and anything you want.
Let me show you an example to design comment form.
width: 100%;
height: 150px;
background-color: #f9f9f9;
}
position: relative;
top: 30px;
padding: 5px 0px;
margin-bottom: 30px;
}
padding: 5px 0px;
position: relative;
top: 30px;
margin-bottom: 30px;
}
padding: 5px 0px;
position: relative;
top: 30px;
margin-bottom: 30px;
}
border: none;
background-color: #2b2727;
padding: 10px 10px;
color: white;
font-family: ‘Century Gothic’;
margin-top: 10px;
This code will design the comment form which is shown when you use the WordPress function. You know that the coding style of every developer is different but still, the above-mentioned IDs and classes come with the WordPress.
You just have to use the CSS to design comment box.
Can You Now Design Comment Box For Your Website?
If you want to alter the look of your current comment box then just check the elements of the comment box and start designing. Use the default WordPress classes for the comment form.
You know that the design of the comment box influences your readers and the comment’s number. If you want to get more comments then you should have a theme which has a nicely designed comment box.
If you already have a WordPress theme then you can design comment box your own. Use your imaginations and start designing.
Hey Ravi,
An HTML form allows a user to type data into a website, and then it submits the data to another page for processing. If we are running a WordPress site, we get a commenting system built in for free. It is easy to set up if we are running WordPress because it’s built into WordPress.
The comments are on our server, so there are no ownership or privacy issues of some other company seeing our comments.
Generally, I use the native WordPress commenting system. While it might not be the most cutting edge, it’s already there and it’s easy for my readers to use. It offers the features I need and more with plugins, and integrates with the existing WordPress admin. Thanks for sharing this significant information regarding comment box for our website by using CSS.
With best regards,
Amar kumar
Hey Amar,
You can create just a comment form using the CSS. But for a WordPress website, you can’t do that. It won’t pick up the comments. To add the comment box, you have to write the codes in the theme files.
Designing of the comment box is necessary to maintain the design of your website. WordPress default commenting system should look good.
Thanks for stopping by.
Enjoy the day.
~Ravi