Grow your CSS skills. Land your dream job.

any had an idea about WORDPRESS COMMENT FORM …??

  • # January 20, 2012 at 5:20 am

    guys …
    anyone had an idea what is the actual design do this ….?
    i means how can the orginal form code looks like …? which was then replaced with this code …?


    $defaults = array(
    'fields' => apply_filters( 'comment_form_default_fields', $fields ),
    'comment_field' => '

    ...',
    'must_log_in' => '

    ...',
    'comment_notes_before' => '

    ...',
    'comment_notes_after' => '

    ...',
    'id_form' => 'commentform',
    'id_submit' => 'submit',
    'title_reply' => __( 'Leave a Reply' ),
    'title_reply_to' => __( 'Leave a Reply to %s' ),
    'cancel_reply_link' => __( 'Cancel reply' ),
    'label_submit' => __( 'Post Comment' ),
    );

    i had my form looks like this ( here )
    and this the code :




    write your comment








    required



    required


















    this is css :


    #commentpart {
    width : 390px;
    height : 500px;
    }

    #commentform input{
    border: solid 1px #e0dfdf;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-family : arial ,Verdana, Tahoma, sans-serif;
    font-size: 11pt;
    font-weight : bold;
    background: #fbfafa;
    color : #607685;
    margin-bottom : 5px;
    height : 24px;
    width: 200px;
    padding : 3px;

    }


    #commentform input:focus{
    border: solid 1px #8a9db3;
    color : #607685;

    }

    #commentform .namespace{
    display: inline;
    }
    #commentform .email{
    display: inline;
    }

    .alertcomment {
    font-family: arial, tahoma, sans-serif;
    font-size : 11px;
    font-weight : bold;
    color : #d9476e;
    display: inline;
    }


    .commentarea textarea {
    border: solid 1px #e0dfdf;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width : 375px;
    height : 170px;
    background: #fbfafa;
    font-family: arial, tahoma, sans-serif;
    font-size: 11pt;
    font-weight : bold;
    padding : 3px;
    margin-bottom : 5px;

    }

    .commentarea textarea:focus {
    border: solid 1px #8a9db3;
    color : #607685;
    }



    #commentform .submitcomment input {
    width : 100px;

    }

    #commentform .submitcomment input:hover {
    width : 100px;
    background : #607685;
    color : #f2f2f2;
    }


    #commentparttitle {
    border-bottom : 2px solid #8a9db3;
    padding-bottom: 2px;
    margin-bottom: 10px;
    }

    #commentparttitle h2 {
    font-family : arial, tahoma, sans-serif;
    font-size: 11pt;
    font-weight : bold;
    color : #8a9db3;
    margin : 0px 2px;
    }



    how can i modify it to put it in the array ….?

    * the form direction is RIGHT to LEFT … FOR ARABIC

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".