Estilizar comentarios

Tweet

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.

Te recomendamos también

+ Artículos relacionados de Tutorial