4 ene 2016

Editar Gadget


¡Hola! a peticion de Gladiuska★ les enseñare a como editar sus gadget de la manera mas breve posible  espero que puedan entender <3 Si tienen alguna otra duda, haganmela saber  

Cuerpo del gaget

su codigo principal es .sidebar .widget {  acontinuacion te enseñare lo principal para editarlo ^_^


 Fondo: Puedes ponerle color o tambien una imagen 

background:#fff;  ⇦ fondo simple con color
background :url(url de la imagen); ⇦ imagen de fondo

sidebar con bordes redondeados e imagen de fondo**

 Bordes: Puedes seleccionar los bordes que quieras, si no quieres que tal borde X forme parte de tu gadget, simplemente no lo tienes que agregar.

border-right: 5px solid #dfdfdf;/* Borde derecho */

border-left: 5px solid #dfdfdf;/* Borde izquierdo*/
border-bottom: 5px solid #dfdfdf;/* Borde inferior*/
border-top: 5px solid #dfdfdf;/* Borde superior*/

Grosor de tu borde
Tipo de borde
Color de tu borde


 Para tenerlo con borde redondeado solo tienes que agregar este codigo:

border-radius: 20px; 
Mientras mayor sea la cifra de numero, mas redondeadas estaran las esquinas.


 En total, algo asi deberia de quedarles:
.sidebar .widget {
background :url(url de la imagen);border-right: 5px solid #dfdfdf;/* Borde derecho */border-left: 5px solid #dfdfdf;/* Borde izquierdo*/border-bottom: 5px dashed #dfdfdf;/* Borde inferior*/border-top: 5px dashed #dfdfdf;/* Borde superior*/border-radius: 20px; 

Titulo del Gadget;

Para este se necesita el codigo .sidebar h2 {


 Con cajita: Solo necesitas el siguiente codigo, y para editarlo tienes aplicar lo mismo que el sidebar



color:#fff; /**color de la letra del titulo**/font-family: Arial;letter-spacing: 1px;font-style: normal;text-transform: uppercase;background: #fff; /**fondo de la cajita**/text-shadow: 1px 1px 0px #fff; /**sombra del texto**/font-size:12px;margin-top: -4px;margin-bottom: 5px;padding-top: 2px;padding-bottom: 4px;padding-left: 0px;padding-right: 5px;text-align:center; }


 Como el mio: Para efecto tipo 3D, los colores de tu texto tendrán que ser fosforescentes.


font:10px 'arial';text-transform: uppercase; color: #fff; /**color del texto, elige alguno fosforescente para efecto 3d**/padding-left:10px; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;-moz-border-radius: 1px;border-radius: 1px;padding:6px; background:#fff; opacity:0.9; text-shadow:2px 2px 0 #fff;/**sombra del titulo, elige color fosforescente para efecto 3d**/

Eso es todo  ^_^ ¡Hasta la proxima!<3

6 comentarios: