Personalizar los títulos de los gadgets

Hola bloggeros!
En esta ocasión hablare de los títulos de los gadgets. En el momento de personalizar mi primera plantilla fue un sufrimiento poder modificar todo lo que quería pero una de las cosas que mas dolores de cabeza me dio fue los títulos de los gadgets. Luego de leer, destruir plantillas y sufrir enfermedades depresivas llegue a un CSS que permite dar el estilo que uno quiere. En este caso el código que les dejare modificara todo el titulo, aunque ustedes elegirán que quieren y que no, las posibilidades son infinitas y les aseguro 100% que pueden adaptar los títulos de los gadgets a su plantilla como deseen. Les dejo el código separado entre columnas de izquierda y derecha por si quieren hacerlas con estilos diferentes y paso a explicarles que es cada cosa para que la puedan adaptar a su gusto.


Deben copiar lo siguiente y pegarlo antes de ]]></b:skin>
Para los gadget de la columna izquierda:
.column-left-inner h2 {
  padding: 5px 0 5px 0px; /* distancia arriba, distancia derecha, distancia abajo, distancia izquierda */
  color: #FFF; /* Color del título */
  background: #2CE623; /* Color del Fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
  -moz-border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Firefox*/
  -webkit-border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Safari y Chrome*/
  border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Opera */
}
Para los gadget de la columna derecha:

.column-right-inner h2 {
  padding: 5px 0 5px 0px; /* distancia arriba, distancia derecha, distancia abajo, distancia izquierda */
  color: #FFF; /* Color del título */
  background: #E6AC23; /* Color del Fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
  -moz-border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Firefox*/
  -webkit-border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Safari y Chrome*/
  border-radius: 10px 10px 0px 0px; /*Bordes redondeados para Opera */
}
Con tan solo un poco de CSS pueden: Darle color al fondo, cambiar el color del texto, alinear el titulo, cambiar el tipo de fuente, el tamaño de la fuente, redondear los bordes y aplicar una sombra que puede servir para dar "profundidad". La fuente predeterminada dentro del código es "verdana" pero pueden elegir la que ustedes quieran en este post: 13 Estilos de fuente HTML. Pueden elegir los colores Aqui o dar un degradado en el fondo con esta pagina: Colorzilla

Como siempre este humilde novato espera ayudarles en esta gran vocación de ser un blogger de alma y corazón.
Gracias por pasar!

1 comentario: