[Tutorial] Colocar color a títulos de widgets mediante una variable

Avatar de: Mokona? xD
Status: Escuchando el ost de sakura taisen
Hoy Hice: una modificación a la plantilla :3
Palabra: Aprendo
Ultima Serie Vista: Zetman Cap 1
Créditos del Avi: Honey Moon! 

Holaa como están? espero bien n.n' hoy les traigo un tutorial que a muchos les servira a la hora de quererle añadir fondo al titulo o cabecera de los gadgets o widgets como tu les digas xD, hay muchos tutorial de esto pero no he visto aun uno que lo haga de la forma en la que yo lo colocare eso me hubiera facilitado bastante el estar todo el dia con ello jeje en fin vamos al grano =).

1.- Vamos a Plantilla -> Edición HTML y con Control+f buscamos la variable "Gadgets" o mas fácil "h2" debes ver algo como esto:

*Nota: Lo que esta en naranja es el resultado que me arrojo el buscador ^-^


2.- Ahora antes de </Group> pegamos la siguiente linea:

<Variable name="widget.title.body.color" description="Title Body Color" type="color" default="#ffffff" value="#ffffff"/>

y nos quedara así:

*Nota2: Lo que esta en rojo es lo que pueden modificar es decir el código del color que desean de fondo en mi caso yo coloque blanco pero si ven acá pueden observar que tengo otro color =)

ya casi terminamos y quizás te preguntes que hice con esto pues simple, lo hago es crear una variable con lo que deseo mostrar en mi caso la variable es llamada "widget.title.body.color" en la descripción es básicamente lo mismo ahora el tipo varia de acuerdo a la variable en este caso como la usaremos para añadir color es tipo: color, por ultimo nos pide el color por defecto y el predeterminado que nos mostrara.

esta explicación era necesaria para que se familiarizaran con el código vale? ^^

3.- Buscamos de nuevo "h2" con Control+f hasta que nos aparezca esto:

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
  margin: 0.9em  0;
}


y le añadimos esto: (lo sombreado en gris claro)



h2 {
  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
  margin: 0.9em  0;


padding-left: 6px;
background-color: $(widget.title.body.color);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px dashed #caec8f;


}

*Rojo: este valor es para el espacio entre el borde y el texto del widget, su valor varia de acuerdo a la plantilla.

* Naranja: es el llamado que se le hace a la variable hecha para que funcione.

* Fucsia: esto es algo extra si quieren no se lo agregan pero si quieren tener un bordesito lindo y redondo que acompañe al color de fondo lo pueden dejar y los valores varían de acuerdo a si queremos que este mas o menos redondeado ^^.

*Verde: son los valores del borde redondeado "2px" es el tamaño del grosor, "dashed" es el tipo de linea (mas adelante haré un tuto sobre ellas) y "#caec8f" es el código del color del borde.

Pueden ver el código perfectamente funcionando en mi blog, lo bueno de esto es que no tenemos que modificar mas el código si añadimos mas "widgets" porque es automático ^^

Espero les sirva el tutorial, lo practiquen, recuerden siempre: GUARDEN UNA COPIA DE SEGURIDAD DE SU PLANTILLA, todo esto para que no se les dañe.

*Comparte el Tuto
* Si lo haces porfa da credito o enlaza mi blog ^^
*GRACIAS!!

Nos leemos hasta un nuevo post ^^ Jane!