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 en "Custom code" y que prevalece sobre el original del tema.
Código:
/*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.