Personalizando a caixa de comentários

Yo galera nesse tutorial eu vou encinar a vocês como personalizar a área de comentários,esse tutu vai encinar a vocês um pouco de CSS então preste muito atenção a aula está preste a começar...

                                                                   Demo
           /--------------------------------------------------------------------------------------------------------------/
           Procure pela tang:

b:skin

Acima desse tang cole esse código

<br /> /* Container Comentários<br /> ----------------------------------------------- */<br /> .comments {<br /> background: none repeat scroll 0 0;<br /> clear: both;<br /> color: #000 !important;<br /> margin-bottom: 0;<br /> margin-top: 10px;<br /> padding: 5px;<br /> }<br /> #comments h4 {<br /> color: #000 !important;<br /> font-family: Arial;<br /> letter-spacing:0;<br /> font-size: 20px;<br /> text-transform: capitalize;<br /> }<br /> .comment-header {<br /> background: none repeat scroll 0 0 #ccc; /* COR DA BARRA DE INFOS. DO COMENTÁRIO */<br /> display: block;<br /> color: #000 !important;<br /> margin: 10px -10px !important;<br /> padding: 10px 0 10px 50px !important;<br /> }<br /> .comment-header a {<br /> color:#fff !important;<br /> }<br /> .comment-header a:hover {<br /> text-decoration:none;<br /> }<br /> .comments .comment-block {<br /> background: #e1e1e1; /* COR DO FUNDO GERAL */<br /> border-radius: 20px 20px 20px 20px; /* BORDA GERAL DO FUNDO */<br /> font-family: calibri,arial;<br /> margin-left:0 !important;<br /> padding: 5px 10px;<br /> position: relative;<br /> }<br /> .comments .comments-content .user {<br /> font-size: 20px;<br /> }<br /> .comments a, .comments-content .user a {<br /> opacity: 0.8;<br /> font-weight:normal;<br /> font-size: 18px;<br /> font-family: Arial;<br /> color:#fff !important;<br /> text-shadow:0px 0px transparent !important;<br /> padding-top:20px !important;<br /> }<br /> .comments .avatar-image-container {<br /> margin: 20px 0 0 5px;<br /> }<br /> .comments .avatar-image-container img {<br /> position:relative;<br /> z-index:999;<br /> }<br /> .comment-actions a {<br /> opacity:0.4;<br /> border-radius:5px; /* BORDA DOS BUTTONS */<br /> font-family:Arial;<br /> font-size:13px;<br /> color:white;<br /> background:#ccc !important; /* COR DOS BUTTONS DE RESPONDER E EXCLUIR */<br /> margin-left:2px !important;<br /> margin-bottom:2px !important;<br /> padding:2px 2px 4px 4px !important;<br /> -webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;<br /> }<br /> .comment-actions a:hover {<br /> opacity:100;<br /> -webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;<br /> }

        /--------------------------------------------------------------------------------------------------------------/
          Agora é só você editar o código de acordo com seu templete,dica copie e cole esse código no blocos de notas edite ele e já cole no HTML do seu site pronto.