Dale tu propio estilo a los gadgets! Parte I

Hola hoy les enseñaré como terner los gadgets así como los míos (↓↓↓) Ahora les explicaré como diseñarlo paso a paso.

1RO: Desde el editor HTML de la Plantilla (siempre con los artilugios expandidos), puchale al botón F3 y escribe Headings.

2DO: Abajo de Headings aparecerá lo sgte.

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

•  Nota: No precisamente igual, pero parecido. Siempre inicia con h2 {

3RO: Al final (abajo de text-align) pega el sgte. código (↓↓↓)

background: url(url de la imagen);
border-top: #código de color 2pt solid;
margin: 0 -10px 0 -10px

• Nota: Dale clic a los enlace de url de imagen y código de colores, ellos te llevarán ha páginas donde encontrarás diversos fondos (imágenes) y también los códigos.

4TO: "Gadget bordes redondeados". Esta parte es de uno por uno, o sea por gadget. Otra vez F3 y escribe el nombre del gadget que deseas modificar. Por ejemplo Archivos de Blog o como le hayas nombrado (debe ser el nombre que le pusiste).

5TO: Cuando has encontrado algo como el código de abajo (↓↓↓), que tiene el ID de ese gadget, lo hiciste bien. Copias el nombre ID (lo subrayado).

<b:widget id='BlogArchive1' locked='false' title='Historial' type='BlogArchive'>

6TO: Para evitar complicaciones abre un bloc de notas y pega el nombre ahí, y antes de este agrégale el símbolo de numeral (#). Debiendo quedar así... #BlogArchive1

7MO: Al lado de eso pega el sgte código...

{
padding: 0 10px 0 10px;
background: #fff;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
border-bottom: 2px #código de color solid;
}

8VO: Debiendo quedar finalmente así (↓↓↓)

#BlogArchive1{
padding: 0 10px 0 10px;
background: #fff;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
border-bottom: 2px #código de color solid;
}

• Nota: En donde dice cógido de color es el color de los bordes superior e inferior.

9NO: Copia todo el código que armaste en el bloc de notas y pégalo antes de ]]></b:skin>

10MO: Puchale a vista previa y, si te gusta como ha quedado dale a guardar. FIN.

Espero que les haya gustado este tutorial. Que está algo larguito, pero en sí es fácil. Lo hice con mucho pasos exageradamente porque así sería más comprensible (-w-). Bueno me retiro y regreso más tarde, tal vez por la noche. Bye nyappy!!!