| Una manera de personalizar la sidebar es poniéndole un color de fondo, y asignando algunas propiedades a ésta y los gadgets contenidos en la misma.
Plantillas antiguas
1.- Utilizando como referencia la plantilla Mínima, vamos a Editar HTML:
| Diseño | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search, una línea del mismo:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
} |
3.- Le agregamos las siguientes líneas:
border: 0px solid; /* Grosor del borde */
border-color: #XXXXXX; /* Color del borde */
background: #XXXXXX; /* Color del fondo */
|
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border: 0px solid; /* Grosor del borde */
border-color: #XXXXXX; /* Color del borde */
background: #XXXXXX; /* Color del fondo */
} |
Para ponerle borde a la sidebar, en 0px cambiamos el 0 por 1, por ejemplo. Las X las cambiamos por los números de los códigos de los colores correspondientes. Si queremos la sidebar sin borde agregamos únicamente la última línea (color del fondo).
4.- Identificamos los gadgets que tenemos en la sidebar (ver: Personalización individual) y pegamos, antes de la etiqueta ]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo utilizado para la demo, son los siguientes:
#BlogArchive1 { /* Identificación del gadget */
margin: 5px; /*Margen en relac. con el borde de la sidebar y entre gadgets */
border: 1px solid; /* Bordes del gadget */
padding: 5px; /* Espacio entre el contenido y el borde del gadget */
border-color: #012790; /* Color de los bordes del gadget */
}
#Text1 {
margin: 5px;
border: 1px solid;
padding: 5px;
border-color: #012790;
}
#Image1 {
margin: 5px;
border: 1px solid;
padding: 5px;
border-color: #012790;
}
#NewsBar1 {
margin: 5px;
border: 1px solid;
padding: 5px;
border-color: #012790;
}
#Attribution1 {
margin: 5px;
border: 1px solid;
padding: 5px;
border-color: #012790; |
Los valores para las propiedades de los gadgets deben ser iguales, para guardar uniformidad. Nota: Es posible que los caracteres de los textos de la sidebar no sean bien notorios porque el color, por defecto de los mismos, sea similar al que le dimos al fondo de la sidebar. En ese caso, como ocurrió con el ejemplo utilizado para la demo, tendremos que cambiar, con el Diseñador de plantillas, el color del texto, el de los enlaces y el de los títulos de la sidebar, por uno que contraste con el que le dimos al fondo.
5.- Vista previa ► Guardar plantilla.
En este tutorial se tratan diferentes formas de personalizar los gadgets de la sidebar: Personalizar gadgets.
Plantillas nuevas
1.- Utilizando como referencia la plantilla Simple, vamos a Editar HTML:
| Diseño | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► |
|
2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}
|
.fauxcolumn-right-outer .fauxcolumn-inner {
border: 2px solid; /* Grosor del borde */
height: 650px; /* Altura de la sidebar */
border-color: #0F5C76; /* Color del borde */
background: #9ECCDF; /* Color del fondo de la sidebar */
} |
Los valores los cambiamos por los que se ajusten al diseño de nuestra plantilla. 3.- Identificamos los gadgets que tenemos en la sidebar (ver: Personalización individual) y pegamos, antes de la etiqueta ]]></b:skin> , los códigos con las propiedades que asignaremos a cada uno de ellos y que, en el caso del ejemplo que veremos más adelante, son los siguientes:
#Image1 {
margin: 5px; */ Margen o espacio entre gadgets */
border: 1px dashed; */ Bordes punteados */
padding: 5px; */ Espacio entre el contenido y los bordes */
border-color: #012790; */ Color de los bordes */
}
#Followers1 {
margin: 5px;
border: 1px dashed;
padding: 5px;
border-color: #012790;
}
#BlogArchive1 {
margin: 5px;
border: 1px dashed;
padding: 5px;
border-color: #012790;
}
#Profile1 {
margin: 5px;
border: 1px dashed;
padding: 5px;
border-color: #012790;
} |
Asignamos a todos los gadgets las mismas propiedades. Si no queremos los bordes punteados, cambiamos dashed por solid
|
