¡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 :)