¡Hola chico/as!
Este tutorial será bastante fácil. Se trata de agregar un fondo [ya sea un color o una imagen] a los títulos del sidebar de sus blogs.
Se trata de esto:
Se trata de esto:
Bien, entonces... ¡Comencemos!
Paso 1
Primero nos iremos a Plantilla → Editar HTML. (recuerden realizar una copia de seguridad) → Ctrl + F → Buscamos Headings en el buscador.
Paso 2
Segundo, borramos lo que está debajo hasta la llave [}]. Ahora copiamos y pegamos:
.sidebar h2 {
background: #E7E7E7;
text-align:center; /* Alineación del texto ya se center left o right*/
margin-top: 14px;
padding-top: 1px;
margin-right: -5px;
margin-left: -5px;
margin-bottom: 9px;
height:18px; /* Alto de la caja */
border-radius: 8px 8px 8px;
border-bottom: 2px solid #EBECEE;
-moz-box-shadow: inset 0 0 7px #EBECEE;
-webkit-box-shadow: inset 0 0 7px #ff4c71;
box-shadow: inset 0 0 7px #EBECEE;
}
h2 {
color: #000000; /* Color del título del sidebar */
font-family: Moon Flower; /* Font del título */
text-transform: uppercase; /* Estilo del texto ya sea todo en mayúscula, minúscula etc*/
letter-spacing: .2em; /* Espacios entre la letras*/
font-size: 21px; /* Tamaño de la letra*/
padding-bottom: 8px; /* Espaciado entre el texto y la caja*/
}
Al final nos quedará de esta forma:
Indicaciones:
Naranja: espaciado de la caja.
Amarillo: espaciado entre el texto y el fondo.
Gris: esto es opcional. Borde del fondo.
Verde: sombra de los bordes del fondo.
Ps: Si desean, tambien, añadir una imagen como fondo. Entonces solo deben borrar la etiqueta Background y añadir esta:
background-image: url('http://31.media.tumblr.com/tumblr_mcfw8sKpbV1rijbyfo1_500.png'); /* URL de su imagen*/
background-repeat: no repeat; /* Repetir la imagen elegida pueden hacerlo quitando el NO*/
background-size: 180px; /* Tamaño de la imagen pero esto es opcional si desean pueden quitarlo*/
♥ ♥ ♥
¡Suerte!
0 comentarios ♥