Designer blog comments. 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? You should follow me on Twitter!