Modificando el diseño de una plantilla pre-diseñada (parte 3)

¡Hola! Continuemos con la siguiente parte.

Así quedó en la segunda parte del tutorial. Quedan muchas cosas que cambiar todavía. Empecemos por las cosas rosas que todavía quedan.

Como hicimos antes, utilizando el click derecho sobre el botón search - Inspeccionar sabrán el código de color que tiene aunque a veces es una imagen, en ese caso se busca el link de la que tiene y se reemplaza por la que nosotros queremos.

Bien, al buscar encontramos que es #f8769c

Vamos a Plantilla - Edición html y apretamos Ctrl+f

Allí ponemos el código #f8769c

Nos irá marcando cuántas veces aparece, lo cual nos ahorra trabajo. Pero eso sí, miren bien lo que cambiar de color. La idea es dejarla a gusto nuestro.

Si venían modificándolo correctamente, solo debe aparecer dos veces el código. Lo cambié por #C6F1E7

Recuerden que uso esta paleta.

Muy bien, ahora con inspeccionar buscaremos el color rosa que vemos en las entradas y sus comentarios. Es: #e82c81 y lo cambiaré por: #70ACB1

Muy bien, verán que lo que queda en rosa es sólo la fecha/hora de publicación y la cantidad de comentarios. El color es: #e8186d y lo cambiaré por: #70ACB1

Se supone que la línea es esta:

a, a:visited {
color: #70ACB1;
text-decoration: none;
}

Y está en la línea 43.

Ahora, vamos a colocar un gadget y también haremos un comentario. Siempre hagan esto ya que pueden encontrar cosas que no se modificaron.

Como verán, el comentario está dentro de una caja color: #f8cbcb y la reemplazaremos por: #C6F1E7

Ahora bien, verán que cambió de color perfectamente. Pero... ¿qué sucede si quiero que no esté dentro de una caja? Lo que deben hacer es borrar el bloque que seleccioné ahí arriba, el que pertenece al color que se cambió.

Por el contrario, si lo que desean es un recuadro sin relleno de color alrededor del comentario deben hacer esto: 

#comments-block .comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: .1em;
border-bottom:1px solid #70ACB1;
}

Así queda sin caja. Ahora como verán, hay una linea color rosa oscuro . Damos a inspeccionar sobre la línea y a la derecha nos aparecerá lo que encuadré en la imagen.

Para que prueben, en el tick que aparece en la línea del color #c72e64 pueden desactivarlo y verán cómo desaparece.

Lo bueno de inspeccionar es que puedes probar de cambiar el código sin afectar realmente a la página ya que con dar F5 o en el círculo de actualizar, desaparecen los cambios.

Ahora, como veníamos haciendo en plantilla - edición html y buscan dando click Ctrl+F #c72e64

Si logran identificar bien, el código que pertenece a la línea se encontraba debajo de lo que era el código de la caja del comentario. Hay muchas modificaciones que pueden hacer, ya sea si desean poner una imagen en lugar de una línea con color. En este caso, nos mantendremos en lo sencillo al menos por ahora. Solo cambiaremos el color, también les explicaré qué sucede si modifican los otros valores.

El color de la línea es: #c72e64

Como usamos esta paleta, usaremos el color: #59606D

Parece como si fuera negra la línea, por lo que si gustan pueden cambiar por alguno de los otros colores.

Muy bien, el código quedó así:

#comments-block .comment-body {
margin: .25em 0 10px;
padding-left: 20px;
border: 1px solid;
}

El margin, es el margen que hay tanto en los laterales como abajo con respecto a la distancia entre la línea y la frase que indico abajo.

Si modifican el dos por 0.5 verán que hay menos espacio entre la línea y el párrafo: "Publicar un comentario en la entrada".

El line-height determina la distancia entre la línea y el comentario publicado. Recomiendo que no pongan un valor mayor a tres ya que queda demasiada distancia y no queda para nada bien.

text-transform hace referencia a cómo será el texto. 

En programación a lo que aparece como texto se denomina cadena de caracteres. Hay dos transformaciones esenciales para una cadena:

uppercase: convertir la cadena de caracteres en mayúsculas.

lowercase: convertir la cadena de caracteres en minúsculas.

Soy sincera, no sé por qué está ahí. Aunque hay veces en que hay valor propuestos en caso de que sea texto lo que divida los comentarios. 

El letter-spacing hace referencia a la distancia entre cada letra. En los blogs se suele usar como algo decorativo.

Ahora sí, border-bottom es para modificar directamente el diseño de la línea. El 1px hace referencia al grosor de la línea. Recomiendo que no coloquen más de 3px. El solid hace referencia al diseño de la línea:

Es cosa de que prueben cuál les gusta más. 

En la siguiente entrada continuaré con las modificaciones. Si hay algo que quieran saber dejen un comentario o si hubo algún error en el código de su blog.