[Tutoriales] Personalizar los gadget

Holiii!!! Quiero dar las gracias a todas las que me respondieron ayer a mi mensaje de ayuda xD No, en serio, muchísimas gracias a todas, llevo tiempo buscándolo. Pero buaaano, a lo que vamos, hoy les enseñaré como personalizar los gadgets del blog, ya que un comentario anónimo me lo pidió hace un tiempo.

Lo primero es ir a Plantilla, Editar HTML, y buscar .main-inner .widget { y debajo, pondremos los siguientes códigos dependiendo de lo que queramos hacer:

• Si queremos ponerle un fondo de color, ponemos debajo: background: #FF0000; Y cambiamos lo que está en rojo por el color que queramos de ESTOS.
• Si queremos poner un fondo de una imagen, ponemos: background: white url(URL_DE_TU_IMAGEN) no-repeat center center; Y cambiamos (si queremos) el no-repeat por repeat, en función de si queremos que la imagen no se repita por todo el fondo, o si queremos que se repita. Los dos center son para la posición. Uno de ellos se puede cambiar por top, o bottom, y el otro por right o left, dependiendo de dónde queremos la imagen.
• Para poner los border, tenemos que poner los siguientes códigos. Para el borde de la derecha: border-right: #FF0000 solid 4px; Y cambiamos lo rojo por el color que queramos igual que en el fondo, cambiamos el solid (borde normal) por dashed(rayitas), dotted(puntitos), u otros más (miren la imagen abajo), y por último, cambiamos el numerito en función del grosor que queramos para el borde. Para el resto de bordes, es igual pero cambiando el right, por left, top, o bottom.
• Para ponerle una sombra, si la queremos por fuera de el gadget, ponemos: box-shadow: 0px 0px 10px; Y cambiamos los ceros, según como de a la derecha o como de abajo queramos la sombra, y el tercer número, lo cambiamos en función de el difuminado de la sombra. Si queremos que sea dentro, solo hay que añadir inset así: box-shadow: inset 0px 0px 10px;

(W3Schools.es)

Y listo!! Por ahora esas son las cosas más básicas que se me han ocurrido, pero si alguien quiere saber más cosas, solo díganlo en un comentario, y yo haré otro tutorial como este.

[ACTUALIZACIÓN]

• Para poner los bordes redondeados, añadimos la siguiente línea: border-radius: 20px; Y cambiamos el número según como de redondos queramos los bordes. Si solo queremos poner ciertos bordes, ponemos los códigos siguientes que queramos (me refiero a que pongan por ejemplo los de right solo, o los de bottom solo, cosas así, yo tengo puesto el border-radius: 20px; directamente, para tenerlos todos xD):

border-bottom-right-radius: 20px;
border-top-right-radius:20px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;

Beshus y hasta mañana!!