Capas-columnas css wordpress

[Nexus13]

Hola a todos! que tal estáis. Soy Manuel, me estreno en este foro al igual que en el mundillo de css en el que me estoy iniciando. Ando esta semana con un problema que por más vueltas que le doy no soy capaz solucionarlo. Supongo que es cuestión de que no acabo de captar la lógica de capas- columnas.

La situacion es la siguiente, estoy en proyecto de hacer un blog, partiendo del tema Pinboard. El enlace es el siguiente :

www.tuasistentepersonal.com/blog

Me gustaría que se compusiera, como véis, del contenido y una sidebar o barra lateral derecha. Pero no acabo de saber qué pasa.

El tema en sí permite en su pestaña Layout, cambiar las columnas del contenido, que dejandolas en 2 permite ver el texto del contenido adecuadamente, si no lo pone todo mezclado y mal. Pero no permite dejar una columna. Supongo que debería modificar el código pero no logro pasar de aquí.



He editado código css a medida tal y como deja el tema, hasta conseguir darle la apariencia que tiene ahora. Podéis echarme una mano alguno de vosotros con vuestra ya experiencia acumulada?

Aquí os dejo el código que he creado y que prevalece sobre el original del tema.

/*Página CONTENIDO-BARRA LATERAL configuro BARRA*/
.page-template-template-content-sidebar-php #sidebar {
float:right; /*Posición Izquierda-Centro- Derecha*/
margin: 0;
padding: 0;
}

/*PLANTILLA - TAMAÑO*/
#wrapper {
position:relative;
max-width:1230px;
margin:0 auto;
box-shadow:0 0 18px rgba(0, 0, 0, .4);
background:#f8f8f8;
overflow:hidden;
}






/*BARRA LATERAL DERECHA*/
#sidebar-right{
background-color:#000000;
border-width: 2px; /*Ancho, Color y Estilo del borde*/
border-color: #00FFFF;
border-style: solid;
width: 50%;
padding: 10px 0 400px 0;
margin: 0px 0px 0px 0px; /*Margen Superior- Derecha - Inferior - Izquierda*/
float: right;
}

/*WIDGET de la BARRA LATERAL*/
#sidebar-right .widget {

background-color:#00C51F; /*Color de la barra lateral*/
margin: 10px 10px 10px 10px; /*Margen Superior- Derecha - Inferior - Izquierda*/

}


/*CONTENIDO PRINCIPAL*/
#content{
background-color:#F1C81F;
border-width: 2px; */Ancho, Color y Estilo del borde*/
border-color:#000000;
border-style: solid;
width:40%;
height: auto;
margin: 0px 10px auto 20px; /*Margen Superior- Derecha - Inferior - Izquierda*/
float: left;
}




/*CABECERA*/
#header {
background: url(cabeceraimg.jpg) top left no-repeat;
width: 1040px;
height: 200px;
margin: 30px 30px 5px 50px; /*Margen Superior- Derecha - Inferior - Izquierda*/
border-color:#000000;
border-width: 2px; /*Ancho, Color y Estilo del borde*/
border-style: solid;

}


/*BARRA DE CABECERA*/
#sidebar-header {
width:1040px;
height:8px;
margin: 2px 2px 1px 2px; /*Margen Superior- Derecha - Inferior - Izquierda*/
background:#FF0000;
visibility: hidden;

}


/*WIDGET DE LA BARRA DE CABECERA*/
#sidebar-header .widget {
width:1040px;
height: 1px;
margin:0;
background:#00FFFF;
visibility: hidden;

}






/*BARRA WIDE- TITULO DEL SITIO*/

#sidebar-wide {

width: 1040px;
height: 100px;
background: #FFFF00;
border-width: 2px; /*Ancho, Color y Estilo del borde*/
border-color: #00FFFF;
border-style: solid;
margin: 0px 0px 0px 5px; /*Margen Superior- Derecha - Inferior - Izquierda*/
visibility: hidden;
display: none;

}


/* WIDGETS DE LA BARRA WIDE*/
#sidebar-wide .widget {
width: 30px;
height: 30px;
padding: 0;
background: #00FFFF;
margin: 0;
visibility: hidden;
display: none;

}


/* ETIQUETA - WIDGETS DE LA BARRA WIDE*/
#sidebar-wide .widget-title {

margin:0;
font-family:"Open Sans", sans-serif;
font-size:10px;
font-style:italic;
font-weight:20;
letter-spacing:normal;

}

ESTA ULTIMA PARTE ES DE PRUEBA INTENTANDO HACER LO QUE OS DIGO

.onecol { /* COLUMNA CUERPO PRINCIPAL*/
width:auto;

}


#sidebar .onecol{
width:auto;
}

#sidebar-right .onecol{
width:auto;
}

Gracias de antemano, espero haberme explicado más o menos bien como novato jeje. Os mando un cordial saludo.

[pzin]

Bienvenido al foro Nexus13.

Igual si hubieses dejado tu mensaje en el foro que hay acerca de Wordpress no haría falta por ahí se pelean con el código continuamente. Pero aquí, dado que gente arcaica como yo nunca tocó un Wordpress, pues desconozco totalmente el código HTML que va implicado ahí y no sé qué clase/id es para cada cosa.

De todas formas, si quieres que te muevan el mensaje para allá, usa el para que algún moderador lo haga. Aunque aquí, como digo, con poner el código HTML relativo al CSS no hubiese problema en mirarlo tampoco.

Para poner código usa highlight o code, así se ve mejor.

[Nexus13]

Hola Pzin, antes de nada gracias por los consejos, se nota que soy nuevo no? jaja.

He puesto en la zona de Wordpress también la consulta, no obstante, yo creo que el tema es más bien ya de código. El que te pegué antes fue el que yo he creado aparte hasta dar la apariencia que ahora tiene. El tema Pinboard te permite crear código aparte en vez de modificar directamente el suyo.


No se por qué parte del código original CSS puedo empezar a buscar para corregir este problema.