Personalizar los títulos de los gadgets / Parte I | Tutoriales

Hola, el día de hoy les traigo una nueva sección llamada "Entre Bloggeros", en ella haré pequeños tutoriales de lo que he aprendido para decorar el blog, espero les guste, estaré subiendo contenido cada dos semanas o en ocasiones cada semana (Según el tiempo disponible).

Personalizar los títulos de los gadgets / parte I

Es muy fácil solo debemos ir a →Plantilla →Personalizar →Opciones avanzadas →Agregar Css
y agregamos el siguiente código:

/*Adornar el título del gadget*/

.sidebar h2{ 

padding:10px; /*Tamaño*/

background-color: #ADD8E6; /* color de fondo*/

border:2px dashed #FFC0CB; /*color ,tamaño y tipo de contorno*/

border-radius: 5px; /*para redondear las esquinas */

text-align: center;}  /*Para centrar el texto*/

Pueden buscar los colores dando clic aquí

El resultado sería este:

Pueden cambiar dashed por otro estilo, por ejemplo estos: 

Dotted

solid

Estos son otros estilos ,pero deberán cambiar los px del border , ya que si los dejan del mismo tamaño se verá como estilo "solid ", pueden cambiarlo por 4 o 5px.

/*Adornar el título del gadget*/

.sidebar h2{ 

padding:10px; /*Tamaño*/

background-color: #ADD8E6; /* color de fondo*/

border:4px double #FFC0CB; /*color ,tamaño y tipo de contorno*/

border-radius: 5px; /*para redondear las esquinas */

text-align: center;}  /*Para centrar el texto*/

double 

groove 

inset

outset

ridge

Si quieren que el redondeado de las esquinas sea diferente,pueden cambiar el border-radius 

/*Adornar el título del gadget*/

.sidebar h2{ 

padding:10px; /*Tamaño*/

background-color: #ADD8E6; /* color de fondo*/

border:2px dashed #FFC0CB; /*color ,tamaño y tipo de contorno*/

border-radius: 15px; /*para redondear las esquinas */

text-align: center;}  /*Para centrar el texto*/

15px 

25px