Adding Effects to the Comment Field
For most bloggers, the comment field is one part of the blog that we really want our readers to see and use. As such, it seems strange that the comments form is rarely any different to the default white design.
Adding more advanced effects to the comments field is easily done using CSS. The method has been explained below, and is followed by a few pointers that you'll want to remember when choosing your effects.
How To Add Effects
The comments field is treated as any other CSS element. View your page's source code to figure out the ID of yours. In the case of most WordPress themes, the basic CSS code will be as follows:
textarea#comment {background:#e0f6fc;}
The above code will add a light blue background to the comment area. However, you may want to go more advanced than this.
Different Effect When User is Typing
If the user is typing in the field (i.e. the field has focus), you can apply a second set of effects. For instance, you may wish to revert the background color back to white to make typing easier. To achieve this, you would add the following line (In addition to the first one).
textarea#comment:focus {background:#ffffff;}
Background Images
Another good effect is to add an image to the field's background design. The effect is very similar to a watermark in a document. The most popular image to use tends to be your blog's logo, but you're free to use any image you wish.
To position an image in the bottom right of the background, you would use the following code:
textarea#comment {background:#ffffff url(image.jpg) 100% 100% no-repeat;}
3 Points To Remember When Choosing Effects
- Effects should be subtle. Whilst it is possible to liven up the comments form, you must always remember its prime focus. You want users to write here, and they won't do it if your colors and effects are making it impossible to read and work with.
- Background effects should be pale. In line with the previous point, both images and background colors should usually be pale. Even when using a :focus effect, the jump from a bright background color to a pale one will be too blunt. Stick with pale effects throughout.
- Place images in the bottom right. In most cases, writing over an image, even a rather pale one, can be annoying. Most images have unfortunate areas which are either much darker or lighter than the rest of the image which make writing on them troublesome. As such, placing an image in the bottom right is recommended because it is the area least likely to be written on (Or if it is being written on, they've already written the guts of the comment and will continue writing to finish it off!)
In the end, fancy comments forms aren't for everyone. Some designs simply don't require it, and so, there is no need to force it. However, there are many which do benefit from them, and at the very least, the effects help them stand out from the crowd.
How do your comment forms look? Snazzy colors or the tried and tested white?
Enjoy this post? Get future updates sent to you for free! Join by email or RSS.
About the Author - Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies. Written on 12th September 2007.
12th September, 1:45 pm GMT
Mine looks pretty standard, it's just one of those areas which I have to admit quickly loses attention, but since it's pretty transparent by default it's not placed on white at least
.
There's of course always the discussion of getting rid of the default borders and make them look a bit more stylized but for some reason there's quite some people which suddenly no longer recognize it as an input form then. So for me I kind of take a hand-off approach from the forms I want to see used commonly. A subtle focus change is never wrong though, that definitely shouldn't have any negative effect.
12th September, 2:47 pm GMT
I've been meaning to alter the background on author comments (my own) so they stand out from others - not because what I say holds any more value, but because some people like to scan the comments for my reply, perhaps to a question or point they've already made.
How is the 'author' section edited? I appreciate you're busy, so if you can't reply now that's cool.
12th September, 3:33 pm GMT
Slevi - Yep, it's important that your effects are never drastic enough to obscure the fact that it is still a comments form.
David - I'll explain the method in a new post. It's not hard to do, but it is a nice touch I think. Thanks for the idea.
On your blog, the comments have the advantage of the avatars. Your own avatar is very recognisable, so even at the minute, scanning for your comments isn't too hard.
12th September, 3:41 pm GMT
Thanks Michael, looking forward to your post!
12th September, 6:03 pm GMT
I didn't style my comment form, because I think some visitors are scared by a form which doesn't look like a standard form. Maybe I will customize it later, right now I try to figure out how I can improve my sidebar...anyway, thanks for giving me another idea on what I could (or have to) change on my blog
I'm also looking forward to the article about altering the author comments background
12th September, 9:52 pm GMT
"textarea#comment:focus" is always a nice touch, but watch out for the buggy IE and its older brothers.
12th September, 10:05 pm GMT
No problem David.
Marco - I haven't styled mine either. Instead, I styled the background of it, and it seems to have been enough.
milo - Well pointed out. I meant to mention that above. A little JS will be needed to get around that.
13th September, 2:42 am GMT
Michael,
You're right, most of us don't do much with the comments. I have noticed before that I like how you have yours set up, so maybe I'll try something new with mine.
13th September, 4:28 am GMT
Mine is still pretty much standard save and except changes in the text. It would be nice to have a comment form which floats / pops out just for the thrill of it...though I must express some caution that some readers might find that a little bit of an overthrill! LOL!
13th September, 7:28 pm GMT
As I did some maintenance on my blog I also modified my comment form a bit. There are still a few sections of the blog I need to tweak but right now I have no real ideas for said sections
13th September, 10:12 pm GMT
I use Blogger. How do I change mine?
13th September, 10:17 pm GMT
Steven - It's always good to try out new things. Even if it doesn't work, you can just revert back to the originals.
pablopabla - lol - Sometimes those are great, but a lot of the time they do bug me! I think it's the animation effects more than anything else that get on my nerves. xD
Marco - Well, there's no rush. Tweak your blog over time, and you'll get what you want in the end.
Floyd - Sorry, but I don't think that blogger can do this. The comments form is the one thing that Google keep a very strict control over. I've never looked, but I don't remember ever seeing a specially styled comments pop-up window in blogger before. Sorry.
14th September, 1:39 am GMT
Great idea. I've seen a form with the site's logo in the background - actually is kind of freaked me out (it was some kind of jester looking face). I think it's important to make it kind of subtle, bottom right corner is a good idea. Also making it "transparent" would be good too. You don't actually have to have an image with alpha transparency for it to look transparent. You could open it in Photoshop/GIMP/whatever, put a background layer with your comment form colour on it and then change the opacity of the logo layer, then save as GIF, PNG, JPEG, whatever.
Coloured font is another easy way to modify the comment form. It might look the same when you're not typing in it, but the right colour could create an "Ooh..." factor when someone starts typing.
14th September, 10:02 am GMT
Kristarella - Yep, there are a few ways of getting the right effect with a logo.
I also like your idea of changing font colors. Provided it's still very legible, that would work just as well.
14th September, 11:09 pm GMT
Great topic Michael. I often do something minutely different with my offer comments but have never touched the comment form much outside of font color. I guess I just wanted to keep it standard so that it was not too confusing. But now you have gotton me thinking about trying it.
I used a simple background image for comments on wordpress reworked, tell me what you think. (only if you have time!
But now I'm gong to do some branding in the comment box too..... On all my blogs I think.
-mz
14th September, 11:30 pm GMT
MZ - It's a nice, subtle effect. I like it. I also like how it's layered under every single comment. No breaks.
15th September, 12:15 am GMT
Thanks, that is good to know because I was wondering if I should just break it up- now i won't!
-mz
20th May, 11:22 am GMT
A good man would prefer to be defeated than to defeat injustice by evil means.
6th June, 1:27 am GMT
I was searching for the code to change the background and I ended up here.!
Good thing too, since it worked just fine. You can view my image in any comment. I made a long image, so it looks different every time someone posts!
9th September, 5:38 am GMT
Hi,
I am a 28 years old chick, in love wth life, so I have many passions: going out with my girlfriend,practice some sports (football), go our in the evening to a discoteque, so all the things that girls like me do all the time. I also have a true passion for marijuana . It' a recent passion but very deep.I love to stay at my place an
d smoke a lot. I hope that one day we will party all together. What do you think about it?
Kisses,
Lara
14th November, 8:28 am GMT
the effect textarea#comment:focus works great in firefox : D
but how do u make it work in IE ;~;????
5th December, 1:15 pm GMT
test
5th December, 1:20 pm GMT
very nice, thanks
15th February, 11:51 pm GMT
How did you get your comment area to have these nice colors, better formatting, gradients at the top of the entry boxes, and those little message bubbles pointing to the avatars like that?
Is there some plugin that does all this, or did you hand-code it all?
If so, please tell me the plugin name and/or the exact Wordpress files I need to edit.
Thank you,
Greg
17th May, 8:05 am GMT
where is the design effects samples?
can i see the demo?
baloot’s Latest Post: Belajar Adobe Photoshop Photo Effects Tutorial: Cara-cara Menukarkan Gambar Girlfriend Anda Kepada Vampire