Este es el código que encontraremos en EDICIÓN DE HTML- EDITAR PLANTILLA
#sidebar-wrapper { display: inline; /* fixes a strange ie margin bug */ float: $endSide; margin-top: 0; text-align: center; margin-$endSide: 3px; margin-bottom: 0; margin-$startSide: 0; width: 220px; color: $textColor; line-height: 1.4em; font-size: 90%; background: url( http://i41.tinypic.com/xpateq.gif) repeat-x $startSide top; 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 */
}
Como pueden ver en esta plantilla si que disponemos de background con una url descargada desde un un alojamiento de imágenes. (la url que os aparece no es la misma que veis , porque yo ya la he cambiado).
Lo primero que he hecho ha sido conocer las medidas de esta barra vertical abriendo la dirección y la he guardado en imágenes.
Tiene 5pixeles de ancho y lo abro con El Gimp cambio el tamaño de 5x1500 y a modo RGB porque en modo indexado no se deja cambiar el color.
Le cambio el color de fondo y le doy un contorno de 1 px con un tono un poco más oscuro. Lo vuelvo a guardar como gif y lo subo a un servidor de imágemes , yo utilizo este y me gusta.
El url que genere lo copio y lo sustituyo por el que os he puesto en color rojo. Guardamos y ya está . Si tenéis dos sidebar como en mi plantilla, pegáis la misma url a las dos.
Como podéis ver al darle un contorno queda un efecto de rayado bastante original.








