Insertar linea vertical en los sidebar

[josiko1971]

Buenas noches,

Quisiera saber si hay alguna posibilidad de poner una linea vertical separando el sidebar que tengo a la derecha del texto de las entradas (pues esteticamente no queda muy bien, al estar todo muy junto).

http://www.ampaelgreco.com

No se si se pueda modificar (y donde), dentro de editar css la barral lateral (sidebar.php).

Esto es lo que me aparece:
Muchas gracias

/*
Theme Name: Coraline
*/

body {
direction: rtl;
unicode-bidi: embed;
}
caption, th, td {
text-align: right;
}

/* =Structure
———————————————– */

.two-column #primary,
.two-column #secondary {
float: left;
}

/* Content-Sidebar layouts */
.content-sidebar #content-container {
float: right;
margin: 0 0 0 -30.4%;
}
.content-sidebar #content {
margin: 0 0 0 35.1%;
}
.content-sidebar #primary,
.content-sidebar #secondary {
float: left;
}
.content-sidebar #secondary {
clear: left;
}

/* Sidebar-Content layouts */
.sidebar-content #content-container {
float: left;
margin: 0 -30.4% 0 0;
}
.sidebar-content #content {
margin: 0 35.1% 0 0;
}
.sidebar-content #primary,
.sidebar-content #secondary {
float: right;
}
.sidebar-content #secondary {
clear: right;
}

/* Content-Sidebar-Sidebar layouts */
.content-sidebar-sidebar #content-container {
float: right;
margin: 0 0 0 -45.5%;
}
.content-sidebar-sidebar #content {
margin: 0 0 0 49.5%;
}
.content-sidebar-sidebar #main-sidebars {
float: left;
}
.content-sidebar-sidebar #feature,
.content-sidebar-sidebar #primary,
.content-sidebar-sidebar #secondary {
float: right;
}
.content-sidebar-sidebar #secondary {
margin: 0 9.88% 0 0;
}

/* Sidebar-Sidebar-Content layouts */
.sidebar-sidebar-content #content-container {
float: left;
margin: 0 -45.5% 0 0;
}
.sidebar-sidebar-content #content {
margin: 0 49.5% 0 0;
}
.sidebar-sidebar-content #feature,
.sidebar-sidebar-content #primary,
.sidebar-sidebar-content #secondary {
float: right;
}
.sidebar-sidebar-content #secondary {
margin: 0 9.88% 0 0;
}

/* Sidebar-Content-Sidebar layouts */
.sidebar-content-sidebar #content-container {
float: right;
}
.sidebar-content-sidebar #content {
margin: 0 24.8%;
}
.sidebar-content-sidebar #primary,
.sidebar-content-sidebar #secondary {
width: 20.7%;
}
.sidebar-content-sidebar #primary {
float: right;
margin: 0 -100% 0 0;
}
.sidebar-content-sidebar #secondary {
float: left;
margin: 0 -20.7% 0 0;
}

/* =Typography
———————————————– */

body, input, textarea {
font-family: Arial, sans-serif;
}

h1, h2, h3 {
font-family: Arial, sans-serif;
}

/* Text elements */

blockquote {
font-style: normal;
font-weight: bold;
}
blockquote em, blockquote i, blockquote cite {
font-weight: normal;
}
pre {
font-family: monospace;
}
code {
font-family: monospace;
}

/* Links */
.screen-reader-text {
display: none;
}

/* =Header
———————————————– */

#site-title {
font-family: Arial, sans-serif;
}
#site-description {
font-family: Arial, sans-serif;
}

/* =Menu
———————————————– */

#access {
float: right;
}
#access ul {
font-family: Arial, sans-serif;
padding-right: 0;
}
#access li {
float: right;
}
#access ul ul {
float: right;
right: 0;
left: auto;
}
#access ul ul ul {
right: 100%;
left: auto;
}
#access ul ul a {
padding: .66em 1em .5em .5em;
}

/* =Content
———————————————– */

.page-title {
font-family: Arial, sans-serif;
}
.entry-meta {
font-family: Arial, sans-serif;
}
.byline {
display:none;
}
.entry-content h4 {
font-style: normal;
font-weight: bold;
}
.entry-content table {
text-align: right;
}
.entry-content tr th,
.entry-content thead th {
font-family: Arial, sans-serif;
}
#content .gallery .gallery-item {
float: right;
}
.entry-info .comments-link a {
float: left;
margin: -2px 0 0 1px;
}

/* =Attachments
———————————————– */

.image-attachment div.entry-meta {
float: right;
}
.image-attachment #image-navigation {
float: left;
}

/* =Images
———————————————– */

.wp-caption {
font-family: Arial, sans-serif;
}

/* =Asides
————————————————————– */

.home #content .aside {
border-right: 1px solid #ccc;
border-left: none;
padding: 0 0.85em 0 0;
}

/* =Gallery listing
————————————————————– */

.category-gallery .gallery-thumb {
float: right;
margin-left: 0.85em;
margin-right: 0;
}

/* =Navigation
————————————————————– */

.nav-previous {
float: right;
}
.nav-next {
float: left;
text-align: left;
}

/* =Widgets
———————————————– */

.widget-area ul ul {
margin: 0 1.5em 1.5em 0;
}
.widget-title {
font-family: Arial, sans-serif;
}

/* Calendar Widget */
#wp-calendar caption {
font-family: Arial, sans-serif;
text-align: right;
}
#wp-calendar tfoot #next {
text-align: left;
}

/* =Comments
———————————————– */

#comments h3 {
font-family: Arial, sans-serif;
}
#comments ol {
margin-right: 0;
}
#comments ul {
margin-right: 0.425em;
margin-left: 0;
}
#comments li.pingback p {
font-family: Arial, sans-serif;
}
#comments ul li {
border-right: 1px solid #ccc;
border-left: none;
padding: 0 0.85em 0 0;
}
#comments .comment-author {
margin: 0 0 0.85em 66px;
}
#comments .comment-meta,
#comments .comment-meta a {
font-family: Arial, sans-serif;
}
#comments .avatar {
left: 0;
right: auto;
}
#comments .comment-body {
margin-left: 66px;
margin-right: 0;
}
#respond input[type=text] {
float: right;
margin: 0 0 0 10px;
}

/* =Footer
———————————————– */

#footer .widget-area {
float: right;
margin: 0 0 0 4.04%;
}
.two-column #footer .widget-area {
margin: 0 0 0 5.19%;
}
#colophon {
font-style: normal;
}
#colophon .generator-link {
background-position: right center;
margin: 0 3px 0 0;
padding-right: 20px;
padding-left: 0;
}

/* =Dark
———————————————– */
.dark #colophon .generator-link {
background-position: right center;
}

/* =IE6
————————————————————– */

#ie6 .content-sidebar-sidebar #secondary,
#ie6 .sidebar-sidebar-content #secondary {
margin: 0 4% 0 0 ;
}
#ie6 .sidebar-content-sidebar #primary {
margin: 0 -90% 0 0;

[Shinjiru_fred]

Saludos josiko1971

Primero que nada te digo que una de las reglas del foro es, cuando se va a dar código muy largo se usa alguna página como «pastebin» o similar. Es para evitar el problema de un post tan largo como este.

Despues de la pequeña aclaratoria paso a dejaste el siguiente CSS:

.content-sidebar-sidebar #main-sidebars {
    border-left: 1px solid #CCC;
    float: right;
}
#main-sidebars {
    max-width: 450px;
    padding-left: 1%;
    width: 44%;
}

lo primero que hemos hecho es agregarle un borde solido a la derecha de la capa de color gris claro.

Lo se gundo es darle un relleno a la izquierda a la capa para darle algo de espacio a nuestra nueva línea.

Puedes copiar y pegar el código en tu hoja de estilo y ver como queda. Revisa esto en varios navegadores, no lo he hecho en IE inferiór a 9.