Comment Form Themes


How to Customize the Look of Your Comment Box:

For the time being, you must know basic CSS in order to style your comment box. Mozilla Developer Network has tutorials for learning CSS. You can customize the size, color and fonts in your comment box using CSS, just like you can for the rest of your webpage. CSS is code that can go, among other places, in a <style> tag. A good starting point is to download one of these skins and customize it to your needs.

You will need to include the stylesheet in your website's source, using a <link> or <style> tag

CSS Examples


Comment Box Color

Here is an example that makes the comment box fields background to have a yellowish tint.

  <style>
  #HCB_comment_box #hcb_form_content,
  #HCB_comment_box #hcb_form_email,
  #HCB_comment_box #hcb_form_name,
  #HCB_comment_box #hcb_form_website {
    background-color:#ffd;
  }
  </style>
    

Comment Box Size

This example makes the comment box textarea much larger.

  <style>
  #HCB_comment_box textarea {
    height:400px;
  }
  </style>
    

Comment Text Color

This example changes the color of the submitted comments to red.

  <style>
  #HCB_comment_box blockquote {
    color:red;
  }
  </style>
    

Watermark text color

This example changes the color of the watermark labels & entered text to white (for use with a black background for example).

  <style>
  #HCB_comment_box .text-blur {
    color:red;
  }
  #HCB_comment_box .text-focus {
    color:darkred;
  }
  </style>
    

Submit Button Color

This example changes the color and border of the submit button to green.

  <style>
  #HCB_comment_box .submit {
    background:none; /* Clear twitter bootstrap style. */
    background-color:green;
    border:1px solid darkgreen;
    color: white;
  }
  </style>
    

Global Text Color

Use the "unstyled" option when copying the code, and use the following CSS:

  <style>
  #HCB_comment_box {
    color:white;
  }
  </style>
    

Overall Text Size Change

This example makes the comment box textarea text size bigger, and also makes the comment text size bigger.

  <style>
  #HCB_comment_box #hcb_form_content,
  #HCB_comment_box #hcb_form_email,
  #HCB_comment_box #hcb_form_name,
  #HCB_comment_box #hcb_form_website,
  #HCB_comment_box #hcb_submit,
  #HCB_comment_box .author-name,
  #HCB_comment_box .hcb-comment-body,
  #HCB_comment_box .hcb-comment-tb a {
    font-size: 16px; /* Adjust the value depending on wanted text size */
  }
  </style>
    

Comment Box Text Size Change

This example makes the comment box textarea text size bigger.

  <style>
  #HCB_comment_box #hcb_form_content,
  #HCB_comment_box #hcb_form_email,
  #HCB_comment_box #hcb_form_name,
  #HCB_comment_box #hcb_form_website,
  #HCB_comment_box #hcb_submit {
    font-size: 16px; /* Adjust the value depending on wanted text size */
  }
  </style>
    

Comment Section Text Size Change

This example makes the Comment section text size bigger.

  <style>
  #HCB_comment_box .author-name,
  #HCB_comment_box .hcb-comment-body,
  #HCB_comment_box .hcb-comment-tb a {
    font-size: 16px; /* Adjust the value depending on wanted text size */
  }
  </style>
    

Other Style Changes

Use firebug or your browser's web developer tools to find the class or ID of the element you want to change.

using commentbox with firebug

Then, copy that id or class into your CSS, and insert the desired styles in curly braces after it. (if there are multiple classes, like in the image above, just copy one, as shown below.)


  <style>
  input#hcb_form_name {
    color:blue;
    font-size:18px;
    background-color:darkgreen;
  }
  </style>
    

Content Changes

To customize the text in the comment box form (ie, for different languages) see the advanced options.