When CSS Positioning Kills Functionality: Changing the Look of a WordPress Comments Form

When editing our theme, I had an interesting time editing the styling of the comments respond/reply form.

I was essentially modifying the WordPress TwentyEleven comments form, which looks like this:

WordPress TwentyEleven Comments Form

The form is huge though, especially since the blog posts we typically have are fairly short, I was afraid the comments form might end up bigger than the blog posts!

I figured the “quick” fix would be to simply lessen the amount of space between form fields. I did it the quick and dirty way, using:

#respond comment-form-field { margin-top: -30px }

Unfortunately, that broke the form fields. You could only activate the form field by clicking on particular areas of the field, which ended up being less than half of a field’s box.

It took me a while to figure out that the labels on each field would normally show above a field, but were repositioned on top of a form field. While this looks pretty, each label was taking up the equivalent space above a field; so if the whole field was repositioned to be closer to the above element, the space where the label would be overlaps the form field and thus block mouse behaviour. When a user tries to select the field, they’re actually selecting the paragraph element of the label:

Quick Fix Comments Form

In particular, this behaviour will happen any time an element overlaps another and its z-index is higher, literally positioned on top of the visible element below.

In the end, I restyled it with the labels above the fields so the gaps don’t look so big in between the fields. I also scaled it down somewhat, so that the end result is 243px shorter (in height) than the original and 123px shorter than even the ‘quick fix’ version. The end result:

Edited Comments Form

It still seems too large in comparison to a short post, so it will probably be restyled again later to be less wide as well and possibly scaled down even more. UPDATE: I wrote another blog post on further modifying the comments form, mostly using PHP.

Additional Information

For more on styling forms, check out WordPress’ article on Styling Theme Forms.

For those interested, here are the changes I made (classes that weren’t touched at all are not included):

#respond {
  padding: 1.625em 0 1.625em 1.625em;
}
#respond input[type="text"],
#respond textarea {
  (no change except removed text-indent)
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
  margin-top: -10px;
}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
  -moz-border-radius: 3px;
  border-radius: 3px;
  left: -10px;
  top: 4px;
  padding: 3px 5px;
  (mid-width removed)
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
  font-size: 1.5em;
  top: 33px;
}
/* added */
#respond .logged-in-as,
#respond .must-log-in,
#respond .comment-notes {
  margin: 0.3em 0 1em;
  text-indent: 2em;
}
#respond .form-submit {
  margin-top: -10px;
}
#respond input#submit {
  font-size: 1.15em;
  margin: 20px 0 0;
  padding: 5px 15px;
  left: 15px;
}
#reply-title {
  font-size: 1.4em;
  margin: 0;
  (removed font-weight and line-height)
}

Published by

Cynthia

A librarian learning the ways of technology, accessibility, metadata, and people

4 thoughts on “When CSS Positioning Kills Functionality: Changing the Look of a WordPress Comments Form”

  1. That’s great–and seems VERY necessary–but am I missing where you are posting the CSS as to how you accomplished this?

    1. Hi Irvble,
      The short answer is, I didn’t. I essentially played around with a lot of the classes until I got it looking like it is in the last screenshot, but since you asked, I’ve added the code to the post.
      Cheers

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s