/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.
Ahora, antes de la eqiqueta ]]></b:skin>, debes agregar estas lineas de estilo:
.sidebar .widget {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background:black;
}
Estas lineas de estilo le darán un fondo negro a tus widgets de la derecha, y les redondeará los bordes.
Estas otras lineas de estilo son para editar el titulo y el contenido los widgets de la sidebar:
/*Modificar los titulos de todos los widgets*/
.sidebar .widget .title {
font-family:georgia;
}
/*modificar los links del titulo de todos los widgets*/
.sidebar .widget h2 a{
color:green;
background:(url_imagen) repeat-y top right #ff0000;
}
/*Modificar el contenido de los widgets de seguidores*/
.sidebar .Followers{
color:green;
background:black;
}
/*Modificar el titulo de los widgets listas de link en la sidebar*/
.sidebar .LinkList .title {
background:black;
text-transform:lowercase;
}
/*Modificar el titulo de los widgets de seguidores en la sidebar*/
.sidebar .Followers .title {
background:black;
text-transform:lowercase;
}
/*modificar los links del titulo los widgets HTML en la sidebar*/
.sidebar .html h2 a{
color:green;
background:(url_imagen) repeat-y top right #ff0000;
}
/*modificar el contenido de los widgets HTML en la sidebar*/
.sidebar .html .widget-content{
color:green;
text-transform:uppercase;
}
/*modificar el contenido de todos los widgets*/
.sidebar .widget .widget-content {
color:green;
text-transform:uppercase;
}
/*modificar los links del contenido de todos los widgets*/
.sidebar .widget .widget-content a{
color:green;
}
Los efectos mas comunes o mas faciles y atractivos en CSS, son los siguientes:
background:(url de la imagen) repetir alineacion alineacion_2 color;
Las propiedades del background:
Si tienes un background con imagen
url de la imagen: Aqui va la url de tu imagen, esto es opcional
alineacion: Aqui esta la alineacion vertical de la imagen de fondo top,bottom,center.
alineacion_2: Aqui esta la alineacion horizontal de la imagen de fondo left,right,center.
repetir: repeat-x(repetir verticalmente),repeat-y(repetir horizontalmente),no-repeat(no repetir).
pero tambien puedes agregar solamente un color, o agregar un color a donde la imagen no alcanza
color:white, black, blue. o un color hexadecimal: #FF0000,#FFFF00.
color:color del texto;
text-transform:uppercase o lowercase;
Propiedades del text-transform:
uppercase: convierte a mayusculas el texto
lowercase: convierte a minusculas el texto
overflow:yes,no o auto;
Propiedades de overflow:
yes: Agrega barras de dezplasamiento al gadget
no: si tiene, quita las barras de dezplasamiento al gadget
auto: Si rebasa el ancho o el largo del widget agrega las barras si no, entonces no hace nada.
/!\ Puedes agregar un toque de originalidad agregandole a tus widgets transparencia.
/!\ Si quieres editar un widget y no esta en la sidebar solo elimina el ".sidebar".
Deja tu huella y comenta!
Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional
Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.