FUENTES:
Hoy os traigo unos cuantos tutoriales de como editar y decorar los títulos de los Gadgets. Suerte!!!
Mini Tutorial 1: Centrar los títulos de los gadgets
Es tan fácil como ir a Plantilla → Personalizar → Avanzado → y Seleccionar Añadir CSS
Y en el cuadro de añadir código pegamos lo siguiente:
.widget .title { text-align:center; } /**Título de gadget centrado**/
Y ya está! La primera cosa más fácil, echa! Si no queréis centrar los títulos, este apartado no hace falta que lo hagáis.
Mini tutorial 2: Adornar/Decorar el título del gadget
Volvemos a realizar los pasos anteriores, pero esta vez pegamos este código:
.sidebar h2{ /**Adornar el título del gadget*/
background: #cccccc; /*Color de fondo*/
border-top: 1px solid #000000; /**Borde Superior**/
border-bottom: 1px solid #000000; /**Borde Inferior**/
border-left: 1px solid #000000; /**Borde Izquierdo**/
border-right: 1px solid #000000; /**Borde Derecho**/
}
Como siempre, podéis cambiar la anchura de los bordes, y el color. Yo el color lo hago con este programa; es muy fácil y sencillo; colorhexa.
Y por si no lo sabéis, Solid se puede cambiar por lo siguiente:
Solid
Dotted.........................................................
Dashed-------------------------------------
Double_____________________________
Mini tutorial 3: Poner una imagen de fondo en el título del gadget
.sidebar h2{
border-top: 1px solid #000000; /**Borde Superior**/
border-bottom: 1px solid #000000; /**Borde Inferior**/
border-left: 1px solid #000000; /**Borde Izquierdo**/
border-left: 1px solid #000000; /**Borde Derecho**/
text-align: center; /**Texto centrado**/
background-image: url('URL de la imagen' ) ; /** Dirección de la Imagen **/
}
En realidad, es bastante sencillo solo hace falta tiempo y paciencia!
Mini tutorial 4: Poner una imagen al lado del título del gadget
Por último, este mini tutorial de como poner una magen al lado del título!!!
/**Imagen al lado del título de los gadgets**/
.sidebar h2{
background: #ffffff url(URL de la imagen) no-repeat right;
border-top: 0px solid #000000; /**Borde Superior**/
border-bottom: 2px solid #000000; /**Borde Inferior**/
border-left: 0px solid #000000; /**Borde Izquierdo**/
border-right: 0px solid #000000; /**Borde Derecho**/
padding:5px;
}
Right (derecha), es el lado donde se situará la imagen, lo podéis cambiar por left (izquierda).
Yo he Echo éste último, y así es como me ha quedado!
Hermosooo!! Jajajaja!
Comentad!♥♥♥♥♥♥
Mucha suerteee!!
