Adding Effects to the Comment Field
September 12th 2007
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?
Twitter
September 12th at 1:45 pm GMT
Comment #1
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.
September 12th at 2:47 pm GMT
Comment #2
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.
September 12th at 3:33 pm GMT
Comment #3
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.
September 12th at 3:41 pm GMT
Comment #4
Thanks Michael, looking forward to your post!
September 12th at 6:03 pm GMT
Comment #5
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
September 12th at 9:52 pm GMT
Comment #6
"textarea#comment:focus" is always a nice touch, but watch out for the buggy IE and its older brothers.
September 12th at 10:05 pm GMT
Comment #7
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.
September 13th at 2:42 am GMT
Comment #8
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.
September 13th at 4:28 am GMT
Comment #9
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!
September 13th at 7:28 pm GMT
Comment #10
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
September 13th at 10:12 pm GMT
Comment #11
I use Blogger. How do I change mine?
September 13th at 10:17 pm GMT
Comment #12
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.
September 14th at 1:39 am GMT
Comment #13
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.
September 14th at 10:02 am GMT
Comment #14
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.
September 14th at 11:09 pm GMT
Comment #15
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
September 14th at 11:30 pm GMT
Comment #16
MZ - It's a nice, subtle effect. I like it. I also like how it's layered under every single comment. No breaks.
September 15th at 12:15 am GMT
Comment #17
Thanks, that is good to know because I was wondering if I should just break it up- now i won't!
-mz
May 20th at 11:22 am GMT
Comment #18
A good man would prefer to be defeated than to defeat injustice by evil means.
June 6th at 1:27 am GMT
Comment #19
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!