Sidebar: Contenido descentrado, ayuda.

Hola que tal.

Soy novato en esto de Wordpress, me gustó este tema y lo he modificado todo a mi gusto.

El problema es que parece que el tema no tiene sidebar dinámica (no se si se llama así), es decir que desde el panel no puedo instalar widgets. Copié un php del tema Classic y parece que esto lo he podido solucionar, ahora en el Panel de control tengo la opción de instalar widgets.

Pero ahora viene el problema y es que según voy metiendo widgets me salen desplazados, como si les faltase una propiedad, deberían estar con un pequeño margen a la izquierda y nada, no sale.

Como no tengo mucha idea no sé qué código tengo que pegar para que veáis donde está el error, no os corteis en pedirme cualquier cosa que deba postear.

Os dejo la captura y se entiende mucho mejor, fijaos como por ejemplo Páginas, Categorías o Meta están perfectas (creo que el tema las traía preinstaladas), sin embargo las otras están totalmente descentradas




Espero que me puedan echar una mano, muchas gracias.

Tienes que mirar en el CSS del sidebar especificamente ya que puede ser algun elemento como un <p> o <li> o un <ul> no tenga las márgenes definidas y es por eso que se ve así.

Busca el padding-left dentro del css y agregale los pixeles necesarios, si no existe para el archivo que copiaste tal vez debas modificar el id del div contenedor o crearlo, si no entiendes nada de lo que que te digo, tal vez debas buscar otro tema o ponerte a estudiar css

Que tal, gracias por comentar.

He estado probando y le he puesto margenes izquierdo en todas las partes del CSS de Sidebar, uno a uno, y nada. Se desplazaba el contenido, o todo, pero nada de que se desplazara solo el contenido que necesito.

Os dejo el CSS de la sidebar por si sirve de algo:

Código :

/* ------------------------------ Sidebars -----------------------------------*/
#sidebar{
 clear:right;
 padding:  25px 0 10px 0px;
 float: right;
 width: 252px;
 margin: 0px 40px 0 0;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 1.0em;
 text-align: left; /* IE hack Part 2 */
 display: inline;
}

#sidebartop { 
 padding: 0px 0px 69px 0px;
 background: url(images/sidebartop.gif);
}

#sidebarmiddle {
 background: #000000 url(images/sidebar.jpg) repeat-y;
}

#sidebarbottom {
 padding: -5px 0px 69px 0px;
 background: url(images/sidebarbottom.gif);
}


#sidebar ul {
 position: relative;
}

#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
 color: #333333;
}
#sidebar ul, #sidebar ul li {
 margin: 0;
 padding: 0;
}
#sidebar ul li ul{
 margin: 0 5px 2px 0px;
 padding: 1px 0 1px 5px;
 color: #333333;
}

#sidebar h2 {
 background: url(images/sidebar-bg.gif) no-repeat center;
 color: #a0a195;
 margin: 10px 0px 10px 0px;
 padding:  8px 0 8px 5px;
 text-align: center;
}
#sidebar a {
 display: block;
 padding: 2px;
 width: 192px;
 padding-left: 20px;
 background-repeat: no-repeat;
 background-position: 0 55%;
 color: #2c2c2c;
 text-decoration: none;
}
#sidebar a:hover {
 display: block;
 padding: 2px;
 width: 192px;
 margin-left: 12px;
 padding-left: 10px;
 background: #191603;
 color: #a09978;
 text-decoration: none;
}

/*
The following is the fix
for 3-pixel-jog bug in IE 
*/
/* Hide from IE5-mac. Only IE-win sees this. \*/ 
* html #content {
 /*margin-right: 7px;*/
}
* html #sidebar {
 height: 1%;
}
/* End hide from IE5/mac */

También como indica La100rra he probado a bajarme este tema y que, al menos, pueda administrar los widgets o ver si salen mejor los que yo he puesto. Pues parece que he tenido mala suerte, porque instalo el tema y sale todoo el contenido de la sidebar aún mas desorganizado.

Eso si, si pongo el tema Classic todo sale en su sitio, me da que al final voy a tener que aventurarme y modificar este

Intenta darle atributos al elemento <p> en el sidebar como te dije inicialmente para que te funcione algo como

Código :

#sidebar p {
padding: 0 0 0 15px;
}

No se cuantos sean los pixeles que necesitas, por otro lado tienes errores en tu CSS porque tienes por ejemplo dos veces el padding en #sidebar a, no uses padding-left sino una sóla linea así como la que te puse en el ejemplo en donde el primer valor es el padding del top, el siguiente corresponde a padding right, luego viene padding bottom y el último es el que debes modificar que es el padding left.

Tienes razón con lo del padding-left, lo he corregido y he puesto los píxeles necesarios para que se vea igual.

Por otra parte, he conseguido que al menos la parte de Comentarios Recientes se vea bien, añadiendo los píxeles correspondientes aqui:

Código :

#sidebar ul li ul{
 margin: 0 5px 2px 0px;
 padding: 1px 0 1px 5px;
 color: #333333;
 padding: 0px 0px 0px 20px;
}

Pero no hay forma de que el texto y el calendario se vean correctamente, lo dicho voy a probar a modificar el Clásico a ver si me da menos problemas.

Muchas gracias de todos modos.