Comment form conflicts with site style

Can you please post a link to a sample page which has the plugin’s comment box displayed? There are so many things that might not fit (font size, font style, font color, background color, borders, etc), it’s hard to give you any suggestions without actually seeing it.

https://lafayettecc.org/blogs/devotionals/2014/06/02/your-line-in-the-sand

https://lafayettecc.org/blogs/jeff/2013/11/12/theres-an-app-for-that/

Two different themes and each has styling problems.

Anything come of this?

Sorry, I forgot all about this thread.

The reason why the comment boxes look different between the two sites is that the Mayer theme used by the second site has CSS rules that target elements in the comment box. For example, the field labels are affected by this rule in the theme’s style.css file:

#respond #commentform label {
    font-size: 18px;
}

As far a suggestions for the styling go:

1. One thing that’s very apparent is that the answer field for the Captcha doesn’t have any borders, so it’s hard to tell that there’s even a field there. You probably want to duplicate the rule for the other input fields for that one field like this:

   #cptch_input {
      background: #f8f8f8;
      border: 1px solid #ccc;
      -moz-border-radius: 3px; /* FF1+ */
      -webkit-border-radius: 3px; /* Saf3+, Chrome */
      -khtml-border-radius: 3px; /* Konqueror */
      border-radius: 3px; /* Standard. IE9 */
      -webkit-background-clip: padding-box;
      -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* FF3.5+ */
      -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Saf3+, Chrome */
      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Standard. Opera 10.5, IE9 */
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14px;
      padding: 2px 4px;
      text-indent: 0;
   }

2. There’s also nothing to indicate what the Captcha is for. I might add a label to it like this:

   .cptch_block:before {
     content: "Prove you're not a robot:";
   }

3. I would probably add some padding inside the comment area so the content isn’t butt-up against the sides.

   #social {
      padding: 20px;
   }

4. The word Profile doesn’t seem to belong. If you want to hide it:

   #reply-title {
      display: none;
   }

5. For the second site, you can add this rule to get the labels to a smaller size:

   #respond #commentform label.social-label {
       font-size: 100%;
   }

That should be a pretty decent start. One final suggestion: I see a plugin called Jeff’s Custom CSS. Is it a custom plugin? Use that to add your CSS rules.