Themes y Diseño
está sin resolverMuy buenas. Resulta que mi blog, http://www.sindinero.org/blog se ve bien en Firefox, pero en IE 8 la barra lateral se desplaza hacia abajo y no se ve...salvo que hagas scroll hasta el último post. El nombre del tema es "iNspiration", y parece que el CSS está optimizado para IE 6, pero no para versiones superiores. Sé que a muchos webmasters que utilizan wordpress les ha ocurrido algo parecido, pero en el código del archivo style.css del tema "iNspiration" no he identificado la parte que provoca este problema en IE 8. ¿Alguien podría indicarme qué podría hacer? Gracias por adelantado!!
normalmente los problemas con IE vienen dados por los <DIV> y lo dificil es encontrar el tamaño adecuado
Hola josep, gracias por contestar. Cuando hablas del tamaño...¿te refieres al "width"?, ¿por dónde empezarías a hacer pruebas?
es raro que no te funcion en IE8 y en IE6 si, creo que es a reves
pero puedes crear estilos para esos navegadores en particular añadiendo condincionales
ej:
saludos
Hola José...es que creo que el theme no se ha actualizado desde la versión 1.2 : "This version 1.2 i have change some of code, optimize CSS for ie6 users and others little bit change. Thank you for downloads."
Respecto a esos condicionales...¿son unas líneas de código que debería añadir a style.css? ¿dónde debería copiarlas? Perdona que haga preguntas tan tontas, pero no mi conocimiento del asunto es muy limitado. Gracias!!
Te comento que en IE9 la barra lateral está desplazada hasta bien abajo. Ni siquiera el modo de compatibilidad lo puede arreglar (y mira que este me ha resuelto provisionalmente varios problemas de visualización).
Si la "desaparición" que reportas es igual a la que yo experimenté en IE9, entonces el problema está en el diseño de tu theme, posiblemente porque los anchos establecidos no concuerdan. De hecho, la cuestión es que Firefox y Opera (también estuve probando con este navegador) tratan de "arreglar" estos problemas con más éxito que IE. Si te fijas bien en Firefox tampoco se ve bien completamente ya que unas viñetas (hasta 2) pueden verse en la parte titula "nuevos comentarios", en Opera la segunda viñeta desaparece y solo se ve una.
Si has tocado el diseño de tu theme para acomodarlo a tu gusto, prueba ponerlo tal como era originalmente a ver si el problema persiste.
Yo también soy de adaptar mucho los temas a mi gusto, por eso tengo anotados todos los cambios que hago por si tengo que revertirlos o arreglarlos si después me doy cuenta que crean algún problema inesperado. Anotar es algo que también me ha ayudado cuando el tema se actualizado y debo volver a implementar los cambios que hice a la anterior versión.
Saludos.
He probado lo de José Cabezas, pero no ha funcionado. Camelot, nunca he tocado el diseño del theme...es ahora que estoy probando cosas para arreglar esto, pero no estoy teniendo éxito (lo cual no es de extrañar, porque voy un poco a ciegas por no saber html). ¿Cómo lo resolviste en tu caso, Camelot? Es decir...¿qué "width" específico tuviste que tocar?
Disculpa mi ignorancia José Cabezas, en que parte del header.php se insertan los código???
Disculpa mi ignorancia José Cabezas, en que parte del header.php se insertan los código???
antes de de "</head>"
pero no es llegar y pegar el ejemplo (es solo una forma ilustrativa).. sino que arreglar los estilos correspondientes para cada version de IE
Bueno, si realmente te gusta el theme que estás usando ahora (yo te recomendaría usar otro debido a estos problemas), me gustaría que me indicaras de donde lo bajaste, así podría revisar el código y sobre todo instalarlo en mi wordpress que tengo en local para echarle una mirada, hacer correcciones y si logro resolverlo te paso una solución ya probada y no andar un poco a tientas. No siendo un experto en estos menesteres todo lo he resuelto así, mediante prueba y error.
Hola a todos.
Habitualmente este "fallo" está provocado por que el elemento content empuja el sidebar y éste se va hacia bajo porque no tiene espacio. Las formas más habituales de corregirlo son probando a poner un width menor a los divs content y sidebar o un width mayor al contenedor principal para hacer más espacio que en el caso de tu theme se llama wrapper. También probaría a mirar si quitando el sidebar de Google y el widget de Facebook el otro sube para descartar que no sea un problema de floats.
A pesar de todo estoy con Camelot y es que usar un theme preparado para IE6, a estas alturas, resulta poco práctico.
Un saludo.
Hola de nuevo.
He bajado el theme desde aquí y lo he probado en local viendo que funciona perfectamente en varios navegadores (Opera, Chrome, IE8, Firefox y Safari). No es exactamente igual al tuyo así que no sé si lo has modificado y es cuando se ha "descojonao" o tú tienes una versión antigua...
Un saludo.
Muy buenas!! Antes que nada...muchas gracias por vuestra atención.
Estoy considerando probar con otro tema de tres columnas, pero hasta ahora no he encontrado nada que me convenza. He quitado los anuncios de google adsense y el widget de facebook, pero no ha solucionado nada (así que descartamos eso de los floats...). Pestanin, tengo la misma versión que te has bajado...las modificaciones que se hicieron son mínimas (algún color de fondo, la imagen de la cabecera...). También cabe la posibilidad que el tema funcione bien en local para el IE8 y deje de hacerlo al subirlo online (según he leído). Quiero intentar modificar esos "width" (el del wrapper, por ejemplo), pero en el código del css del tema no consigo identificar qué es lo que tengo que tocar. ¿Es posible que tenga que mirar en esta parte del código?. Es decir, la que se refiere a la estructura (copio y pego) :
/* Begin Structure */
body {
background:url(images/bg-pattern.gif);
}
#header {
background-color: #bfb9ba;
height: 50px;
border-top:0px solid #000;
}
#header h1 {
padding:7px 45px 10px 0;
background:url(images/header-icon.gif) 100% 2% no-repeat;
margin:5px 0 0 0;
}
#header .grid_6 {
position:relative;
}
#header small {
float:left;
font-size:80%;
position:absolute;
bottom:-10px;
letter-spacing:1px;
left:0;
}
#topnav ul, #bottomnav ul {
list-style:none;
}
#topnav ul li, #bottomnav ul li {
display:inline;
margin-right:10px;
}
#topnav ul li a, #bottomnav ul li a, #footer p {
float:left;
display:block;
padding:15px 10px;
}
#recent-block {
background:#da4d44;
padding:10px 0
}
#recent-block .grid_4 { margin:10px; }
#recent-block ul li { list-style:none; padding:4px 0 4px 0px; border-bottom:1px dashed #333; margin-left:10px; }
#footer p {
background:url(images/logo-icon.gif) 0 4px no-repeat;
padding-left:40px !important;
}
#bottomnav ul, #footer p {
margin-top:7px;
}
#bottomnav ul li a, #footer p {
padding:4px 10px;
}
#bottomnav ul li#gotop a {
float:right;
padding-right:16px !important;
background:url(images/up-arrow.gif) 100% 4px no-repeat;
}
#sub-header {
background:url(images/header-img.jpg);
padding:10px 0;
clear:both;
}
#spbox2 ul {
list-style:none;
padding:0 !important;
margin:0 !important;
}
#spbox2 ul li {
list-style:none;
float:left;
}
#spbox2 ul li a {
background:url(images/feed-icon.gif) left no-repeat;
padding:10px 0 10px 45px;
display:block;
font-weight:bold;
}
#spbox1 p {
margin-bottom:15px;
}
#welcome { margin-top:15px; }
#content-wrapper { margin-top:15px; padding-bottom:20px !important; }
.post {
margin: 0 0 20px 0;
text-align: left;
}
.entry .hr {
display: block;
background:url(images/horizon-rule.gif) center no-repeat;
margin:10px 0 10px 0;
height:15px;
clear:both;
}
.tags-title, .cat-tag {padding:0 0 0 20px; background: url(images/tag16.png) left no-repeat; margin-top:15px;}
.cat-tag { margin:0 4px; }
.smallattachment {
text-align: center;
float: left;
width: 128px;
margin: 5px 5px 5px 0px;
}
.attachment {
text-align: center;
margin: 5px 0px;
}
.postmetadata {
clear: both;
padding: 4px 0 10px 0px;
word-spacing:1px;
}
#footer {
clear: both;
background-color:#bfb9ba;
border-bottom:0px solid #000;
}
#footer div {
text-align: left;
padding:4px 0;
}
/* End Structure */¿Cómo puedo modificar los anchos del wrapper y del sidebar tocando el código anterior?. Muchas gracias!!
existen extensiones para los navegadores que te permiten visualizar los contenedores de las secciones de tu plantillas. una vez identificado el id o clase, haces el cambio correspondiente en el CSS
ej: web developer, para firefox y chrome
saludos
Hola José. Me he instalado la extensión (súper útil para diseñadores). Hay una opción que te permite identificar los contenedores, simplemente pasando el puntero del ratón por la página. Según he visto, hay un div llamado #wrapper .container12 (parece que hay otros divs que "dependen" de éste...header, sub-header y content-wrapper). Supongo que habrá que cambiar el "width" de header, sub-header y content-wrapper, en la misma proporción. ¿Pero cómo se cambian? No consigo ver en el código ninguna línea que me permita cambiar el width. Un ejemplo :
Localizo la línea que alude a content-wrapper :
#content-wrapper { margin-top:15px; padding-bottom:20px !important; }
Puedo modificar los márgenes...pero, ¿¿el width??. Puffff, ya no sé ni dónde mirar...
Gracias, una vez más
me acabo de dar cuenta.. que la plantilla que usas esta hecha con el framework 960 grid system.. este framework css utiliza un ancho fijo de 940px, más 10px por lado de derecho e izquierdo sumando 960px.
la unica forma de reducir el ancho es de 2 formas:
1ra forma:
tienes cambiar el numero de columnas en las clases los grid respectivos y modificar y reemplazar la diferencia por prefix y suffix como corresponda tanto para el lado derecho como el izquierdo.
2da forma:
es eliminar todas las clases relacionadas con el framework (grid_n, container_12,alpha,omega,etc) y colocar los anchos respectivos en los ID (#wrapper,#sidebar,#content,etc.)
saludos
se me olvido decir que en mi blog hay un tutorial para el manejo de F. 960 G.S. en plantillas wordpress.
aca los link
http://www.jcabezas.net/2010/11/crear-un-plantilla-wordpress-con-960-grid-system-parte-i/
http://www.jcabezas.net/2010/11/crear-una-plantilla-wordpress-con-960-grid-system-parte-ii/
espero que sea de ayuda
Buenas de nuevo.
También lo veo correctamente online.
Un saludo.
Uffff...es mucho más complicado de lo que yo pensaba. Me he mirado por encima los tutoriales de José Cabezas, y ahora por lo menos ya tengo una visión general, pero tengo que ir al detalle para poder modificar el ancho del wrapper. En suma...me tengo que poner las pilas con el CSS para poder ser un poco autosuficiente y no dar tanto el coñazo. Así que nada, voy a ver hasta dónde soy capaz de llegar...ya os contaré. Muchas gracias a todos!!!
Debes Identificarte para publicar.