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.

  

10 comentarios:

  1. ¡Hola, Maar! Gracias por el tutorial. Cuando comencé con mi blog, al principio el código HTML era chino básico para mí, pero por suerte le pude ir agarrando la mano y estos tutoriales me vienen como anillo al dedo, así que lo guardo para un futuro.
    ¡Un beso!

    ResponderEliminar
    Respuestas
    1. ¡Hola! No es nada, sé lo que se siente. Por suerte ahora hay más información y ya aprendí a buscar con ciertas palabras clave y a medida que voy encontrando y probando, se los traigo a ustedes.

      ¡Gracias por visitar mi blog!

      Besos ^-^

      Eliminar
  2. Y acá estoy de nuevo :) Siento que te quiero hacer un millón de preguntas pero voy a tratar de ir de a poco. En alguna entrada próxima ¿podrías decir que se debe modificar en la plantilla para cambiar la forma que dice la cantidad de comentarios, etiquetas, autor y la opción de compartir en las redes? Luego te hago el resto de preguntas jaja.

    ¡Gracias y más gracias!

    ResponderEliminar
  3. ¡Hola Mar! Me encantó el tutorial. Estas cosas ya la se porque la hice miles de veces. Pero en un principio me costó muchisimo aprender y saber en donde buscar tambien. Asi que es genial que te decidas a compartir este tipo de entradas. Es de mucha ayuda.
    Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Anto! Me alegro que te guste, lo inicié justamente por eso. Antes era muy difícil encontrar cómo hacer las cosas y aunque ahora lo es menos, tienes que buscar debajo de piedras jajajaja

      ¡Saludos!

      Eliminar
  4. el HTML me sigue pareciendo chino, no puedo con él, por eso tarde años y años en tener un buen diseño para mi blog, me hubiera venido muy bien en el inicio una entrada así, espero que muchos despistados como yo la encuentren.
    Saludos!!!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Sí, trataré de que más gente llegue a él ya que no muchos logran encontrar cosas que les gustaría tener en su blog, ya sea si modifican una plantilla pre-diseñada o no.

      ¡Saludos!

      Eliminar
  5. ¡Hola Mar! Me alegra que hagas estos tutoriales ya que ayudan a muchos bloggers que recién comienzan con la plataforma, especialmente a aquellos que recurren a plantillas diseñadas y que suelen ser mas complicadas de modificar. Saludos

    ResponderEliminar
    Respuestas
    1. ¡Hola! Sí y cada vez lo son más. Cuando modificas algo, luego te encuentras con cinco que no puedes cambiar. Es frustrante xD

      Saludos.

      Eliminar