Modificar los títulos de las entradas | Tutorial

10.10.15

¡Hola! Por petición de muchos de vosotros traigo un tutorial para modificar los títulos de las entradas del blog y de la sidebar, añadiéndoles un fondo (en imagen o color) y bordes.

Para ello vamos a nuestra plantilla html y buscamos (ctrl+F) h3.post-title { (si no te aparece, busca este: .post h3 { ) donde nos encontraremos algo diferente según la plantilla que tengamos. Como siempre dejo el ejemplo de lo que tengo ahora mismo en la plantilla del blog, que sería esto:
h3.post-title {
margin: 0;
font: $(post.title.font);
font-size: 25px;
text-align:center;
padding:3px;
border-bottom: 2px solid #50587C;
}
Si queréis añadirle una imagen de fondo sólo tendríais que añadir este código antes del }: background:url(###) Sustituyendo ### por la URL de la imagen que queráis poner. Para ello os aconsejo que subáis la imagen a un borrador de entrada en vuestro blog y que de ahí saquéis la URL, de esta forma la imagen se quedará guardada en vuestro album picasa y no desaparecerá ni dará problemas en caso de que sea borrada de la fuente original.
Ejemplo: background:url(http://st.depositphotos.com/1693484/2230/v/450/depositphotos_22306411-Blue-stars-seamless-pattern-vector-background.jpg)
Que se vería así:
TITULO DE LA ENTRADA

Si, por el contrario, sólo queréis añadirle un color de fondo, tenéis que añadir este código antes del }: background: #EFF2FB; poniendo el código del color que queráis que se vea en el fondo. Os aconsejo esta página para buscar los códigos de los colores: http://html-color-codes.info/
Ejemplo:
TITULO DE LA ENTRADA

Si queréis añadirle bordes al título de la entrada tenéis que añadirle los siguientes códigos:
border-bottom: 2px solid #A9BCF5; (para el borde de abajo)
border-top: 1px solid #A9BCF5; (para el borde de arriba)
border-right: 1px solid #A9BCF5; (para el borde de la derecha)
border-left: 2px solid #A9BCF5; (para el borde de la izquierda)
Todos estos códigos se pueden adaptar, ya sea cambiando el tipo de línea (solid, double, dotted...) o modificando los px, cambiando así el grosor de la línea. Además, no tenéis por qué usar todos, como veis arriba yo sólo he usado una línea en el borde de abajo del título de la entrada :)
Ejemplo:
TITULO DE LA ENTRADA

¿Para los widgets de la sidebar? Es lo mismo, sólo tenéis que buscar (ctrl+F) h2 { y ahí ya podéis añadir el background, ya sea una imagen o un color, como he explicado, o un borde :)

Espero que esta entrada os haya servido de ayuda.
Como siempre, si tenéis alguna duda (por si no me he explicado bien) o si queréis que haga un tutorial de algo, hacérmelo saber en los comentarios o a través de mis redes sociales :)

7 Mundos

  1. Algunas torpes como yo lo agradecemos enormemente.
    Besitosss

    ResponderEliminar
  2. ¡Muchas gracias!
    Aquí una torpe a la que le vienen genial estas entradas. ^^
    Un besazo!

    ResponderEliminar
  3. No sabes como te lo agradezco, llevaba tiempo intentando buscar solucion y ya la tengo :)
    Un saludo!x

    ResponderEliminar
  4. Gracias por el tutorial, con lo patosa que soy me encanta encontrarme estas cosillas.
    ¡Un besito!

    ResponderEliminar
  5. Hola Patricia, lo que me costó hacer esto mismo en el blog y lo facil que haces tu que resulte. jajaja.Menos mal que ya me lo habias explicado antes y creo que el resultado ha quedado chulo. Cuando quieras te pasas por "tu" blog y me dices que te parece.
    Un besazo enorme e infinitas gracias.

    ResponderEliminar
  6. ¡Hola! Es genial que publiques tutoriales en tu blog por toda esa gente que no tiene la habilidad de manejar el HTML y el CSS correctamente. ¡Un beso! :)

    ResponderEliminar
  7. Oh, genial. A veces me da por probar un poco con el HTML y conseguí cambiar los títulos de la entrada pero no sabía lo de ponerle imágenes, voy aprendiendo muy poco a poco a base de toquetear pero los tutoriales ayudan mucho.
    Gracias por compartir tu sabiduría :P

    Un beso ^^

    ResponderEliminar