As you know, the comment is so important to any blog platform that you may have to build an attractive comments form that users will enjoy filling out. Usually forms are pretty classic with standard fields, submit buttons - nothing more, nothing less. But still even little change of field background, border style, layout, rounded corners can make huge difference. Sometimes adding live comment preview, smiles or some simple CSS bold, italic, underline effects to give more options to advanced comment writers, such as Markdown may be a good choice to satisfy these requirements. Today I would like to share you how we redesign our own comment form. If you indeed want to really stand out and create something super in your comment form, please do your own research and considerations, what you like/dislike and why it is so. Ok, let's go ahead.

In common, I am feel ok with the look that standard comment form of SunBlogNuke has, but sometimes it does not feel right in other themes. In favor of simplicity and convenience, we began to create a new clean & attractive comment form for our team blog; plus support Markdown. The 1st version we just adjusted the layout, such as making the label flow right in order to user easily fill out. Take a look at screenshot below:

Blog Comment Form

Actually you just need to modify few styles in your current theme. To apply these changes, just replace the old styles (Begin with '#anonDetails') with the sample code below:

#anonDetails{clear:both;margin:0;line-height:200%;}
    h3#respond {
        color: #9BBDE9;
        font: italic 2.5em "Times New Roman", Times, serif;
        font-variant: small-caps;
        margin: 20px 0 10px;
    }
    h3#respond span {color:#033;font-weight:400}
    #anonDetails label {color: #CCCCCC; float: right; width: 47%; line-height: 30px;}
    #anonDetails input[type="text"] {
        margin-bottom: 0.8em;
        width: 50%;
        padding: 4px 4px 0;
        height: 27px;
        line-height: 27px;
        border: 1px solid #CDCDCD;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
    }
    #anonDetails textarea {
        width: 100%;
        border: 1px solid #CDCDCD;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        margin-top: 5px;
    }
    #anonDetails p{margin:0px;}
    #commentCompose {margin-bottom:10px;}
    #commentCompose label{display:none;}
    .validation-summary-errors{
        background-color:#FFFFCC;
        border:1px solid #CC0000;
        font-weight:bold;
        margin:10px 0;
        padding:10px 20px;
        list-style:none;
    }
    .validation-summary-errors li{margin-top:5px;background:transparent url(images/sprite.png) no-repeat 0 -72px;display:block;padding:1px 0 5px 25px;}

That is all.

I will be more than happy if you will join to discussion in comments below.

Updated: currently we released the premium theme "Customized" in our Theme Directory and you can visit this showcase page in detail and order it there for your dnn blog page with SunBlogNuke.