Siempre he pensado que la parte de comentarios es la gran ignorada cuando tuneamos nuestros blogs. Le ponemos bordes, un fondo y a tirar para adelante.

Hoy vamos a ver como estilizarlos un poco para darle otro aspecto sin grandes dificultades.

En la plantilla Minima el CSS que afecta a los comentarios viene definido de esta forma

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
padding: 10px 10px 10px 10px;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Eso se vera así



Vamos a darle otro aspecto (remarco en rojo los añadidos)

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
padding: 10px 10px 10px 10px;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 10px 10px 10px 10px;
width: 500px;
background: #f2f2f2;

}
.deleted-comment {
font-style:italic;
color:gray;
}


Solo agregando estos cambios ya se verían así



Ahora vamos a quitarle el "dijo..."

Expandimos artilugios, buscamos

<data:commentPostedByMsg/>

y lo sustituimos por

<div class='triangulo'/>


Para acabar vamos a darle el ultimo ajuste (resalto en rojo los cambios y añadidos)

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
padding: 10px 10px 10px 10px;
margin:1em 0 1.5em;
padding: 10px 10px 10px 10px;
line-height:1.6em;
}
#comments-block .comment-author {
margin:0;
}
#comments-block .comment-body {
margin:0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 10px 10px 10px 10px;
width: 500px;
background: #f2f2f2;
}
}
.deleted-comment {
font-style:italic;
color:gray;
}
.triangulo {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 0;
border-bottom: 20px solid #f2f2f2;
width:0;
height:0;
background-position: 0 0 0 25px;
}


Veamos el resultado de estos cambios



Hemos visto una forma fácil de estilizarlo...seguiremos.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también