[Tutoriales] Personalizar los gadget
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;
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!!
¡Muy útil! Por cierto, podrías hacer un tutorial de cómo poner un gadget de Amigos? ¡Saludos~!
ResponderEliminarClaro!!
EliminarBeshus!
¡Hola! tus tutoriales siempre salvándome la vida, saludos (✿◠‿◠)
ResponderEliminarMe alegro que te funcionen tanto!!
EliminarBeshus!!
Hola!
ResponderEliminarUna pregunta de esto de los gadgets, como haces para que en tu caso los bordes no queden en linea si no que se hace un efecto cóncavo (no se si me explico), es que a ti no te queda plano si no que en las puntas hay como una curva. Espero me hayas entendido.
Gracias por el tutorial.
Besos
Se me olvido ponerlo!! xD Bueno, ya actualizo la entrada
EliminarBeshus!!
Gracias por el tutorial!
ResponderEliminarGracias a ti por pasarte!!
EliminarBeshus!!
buen tutorial gracias
ResponderEliminarGracias a ti por pasarte!
Eliminarbeshus!!