Tutorial:Personalizar cada gadget ♥

Hola a todas uff terminaron los examenes,me falta el examen de topografia en el campo sobre el teodolito ,estuve practicando y mañana también practicare en armarlo, estacionarlo. Un poco pesa el teodolito  nose por que me pesa ,a mis compañeras no les pesa,, y mas me demoro en eso.Bueno unas cuantas practicas aprenderé  a armarlo en 2 minutos siquiera, solo tengo ese Examen y bueno es el aniversario de Ilo, nose si saldre, pero tengo varios pedidos de tutoriales y bueno este es uno, que me pidieron hace tiempo,pero para que no se me olvide lo estoy haciendo:

 Paso 1: Primero Buscamos el codigo: <b:section-contents id='sidebar-left-1'> o <b:section-contents id='sidebar-right-1'> o <b:widget id='HTML1'

les saldra algo asi:

Ahora les explico estos codigos: 3
Ejemplo

<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/>
<b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/>
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/>
</b:section-contents>

-En este codigo hay 6 tipos de gadgets. el tipo seria despues de type='
y estos serian los que estan de colores morado , como  BlogArchive, Perfil, HTML, etc ..
-Los que estan de color de rojo  despues del codigo id='
Es la identificación de cada uno de los aparatos y es la que debemos tener en cuenta para personalizarlos . Que en el ejemplo tenemos  BlogArchive1, Profile1, HTML1, etc
- Título del gadget: Es el titulo que colocamos a los gadget en diseño , si no colocamos titulo les aparecerá asi   title=''
Notita: El primer gadget añadido, de cada tipo, tiene en su ID (identificación) el número uno, Ejemplo: HTML1; los demás que agreguemos, dentro de su tipo, sigue el consecutivo, Ejemplo: HTML2, HTML3, HTML4, etc.
Informacion sacada de aqui
Bueno sabiendo que significa estos codigos,seguimos con el tutorial

GADGET TRANSPARENTE

Quieres que el gadget este sin fondo ,ningun efecto, que quede transparente?
como la siguiente imagen:

Es el unico gadget sin fondo

Sigue el tutorial
 Después de seguir el paso 1, y encontrar el codigo,elijimos el gadget que queremos que este transparente, Por favor poner un nombre al gadget para buscarlo mas rapido, yo le puse "Probando" o una palabra que creas que solo te aparesca una vez buscando en el codigo de la plantilla.

Puedes buscar presionando Ctrl + f  .Escribes el nombre del gadget (en mi caso Probando) en la cajita que te salio.
O puedes tambien buscarlo ,despues de seguir el primer paso.

Bueno lo encontramos

<b:widget id='HTML11' locked='false' title='Probando' type='HTML'> 

El id es lo que necesitamos, su id de mi gadget  "probando" es  HTML11
Teniendo eso, seguimos el ultimo paso:
 Ahora buscamos el siguiente codigo presionando Ctrl + f, el codigo ]]></b:skin>
Antes de ]]></b:skin> pegamos este codigo:

#HTML11 {
background: none;
border: none;
}

-En  HTML11 llo cambias por el id de tu gadget
-Si pones cualquier otro efecto como outline, box-shadow, etc
le Ponen none
none: esta palabra hace que no salga tal efecto
Y listo  y bueno eso si, saldra el nombre ,el titulo del gadget su efecto ,para que no salga borras el titulo que puse en mi caso  "Probando".

Personalizar cada Gadget:

Personalizar cada gadgets me refiero al color de letra,color de fondo efectos en los gadget, Como en esta imagen:

Pueden ver que cada gadget esta de diferente color de fondo , podemos personalizar cada gadget que queramos.

Sigue los siguientes pasos

  Después de Seguir el paso 1, y encontrar el codigo, elijimos el gadget que queramos para personalizarlo Por favor poner un nombre al gadget para tener la facilidad de buscarlo , en mi caso puse "Bienvenidos", "Afiliame", "Seguidores".

Personalizare Primero Bienvenidos

Puedes buscar presionando Ctrl + F y escribes el nombre del gadget (en mi caso "Bienvenidos")
O tambien puedes buscar en los codigos después de Seguir el paso 1.

Bueno lo encontramos

 <b:widget id='HTML1' locked='false' title='Bienvenidos ♥' type='HTML'>

El Id es lo que necesitamos, Su id de mi gadget en mi caso " Bienvenidos ♥ "es  HTML1
Teniendo eso, seguimos el ultimo paso:
 Ahora Buscamos Presionando Ctrl + f, el codigo ]]></b:skin>
Antes de ]]></b:skin> pegamos este codigo:

# HTML1  {
background: #EAF0D5 !important;/*color de Fondo */
color: # FFECEC  !important;/* color de Texto */
font-family: Imprima !important;/* Font del Texto */
font-size: 12 px  !important;/*Tamano del Texto */
border: 3px solid #F8B2B2  !important;/* Borde tamaño,tipo, color */
}

-En  HTML1  lo remplazas por el id de tu gadget

-Pueden agregar cualquier otro efecto outline, box-shadow, etc, Pero agergale  !important antes de  ";"
-Tambien puedes borrar lo que no te guste ,ya sea borde,etc ,personalizalo a  tu gusto el gadget

 border: 3px solid #F8B2B2  !important;;/*Tamano del Texto */

-!important: Cualquier código que vaya acompañada de un !important tendrá mayor importancia que cualquier otro código que tengas.

Y listo, asi seguimos buscando el id de los gadgets y vamos agregando el codigo  antes de ]]></b:skin>, cambiamos los colores de fondo ,lo que deseen ♥

Esta entrada se me traducio solito >w< ay odio cuando se me traduce solo y le doy guardar sin darme cuneta  y tengo que volver a escribirlo a español por que se me traduce a ingles ewe,capas salga alguna palabra mal escrita ,pero los codigos si o si los puse bien ,para que no salga error.