La primera vez que vi esto de tener dos botones que permitian a los visitantes ocultar o mostrar la sidebar fue en un blog de WordPress y me pareció interesante porque, en ese caso, como los textos eran muy extensos, verlos en la pantalla completa los hacía más fáciles de leer. Estuve tratando de entender cómo lo habían implementado pero me di por vencido; no recuerdo si usaba un plugin o alguna librería.
Hace poco más de un mes, vi una entrada en Pizcos Blog que mostraba cómo hacerlo utilizando styleswitch.js, el script de Dynamic Drive que Gem@ explicó recientemente para modificar los colores de fondo del blog y que usé durante mucho tiempo cuando no teminaba de decidirme por cúal era el ancho adecuado.
La idea del script es ingeniosa y sirve para cualquier cosa; simplemente se trata de tener dos juegos de hojas de estilo CSS y usar una u otra. Como ambas están "pre-cargadas" los cambios son instantáneos. Para colmo, tiene una ventaja, el script crea cookies así que el visitante que selecciona un modelo, lo continuará viendo la próxima vez que ingrese.
Hasta acá, es la solución ideal para ocultar la sidebar a voluntad o bien para hacerlo de forma condicional, cargando directamente la hoja de estilo alternativa; por ejemplo podríamos decidir tener un modelo para la página principal y otro para las páginas individuales; una lateral y otra inferior, etc.
El único problema surge de las dificultades de alojar archivos externos y sobre todo, los de tipo CSS. Como hay quienes no pueden hacerlo o no quieren depender de ellos, podríamos usar una alternativa simplificada que hará lo mismo aunque de manera más limitada ya que no permitirá "recordar" la opción seleccionada.
Veamos lo que dice Pizcos y que es absolutamente correcto:
En una plantilla estandard, hay dos bloques que establecen el ancho de la sección donde están los posts y la sección de la sidebar. Por ejemplo, en mi caso dicen esto:
La idea del script es ingeniosa y sirve para cualquier cosa; simplemente se trata de tener dos juegos de hojas de estilo CSS y usar una u otra. Como ambas están "pre-cargadas" los cambios son instantáneos. Para colmo, tiene una ventaja, el script crea cookies así que el visitante que selecciona un modelo, lo continuará viendo la próxima vez que ingrese.
Hasta acá, es la solución ideal para ocultar la sidebar a voluntad o bien para hacerlo de forma condicional, cargando directamente la hoja de estilo alternativa; por ejemplo podríamos decidir tener un modelo para la página principal y otro para las páginas individuales; una lateral y otra inferior, etc.
El único problema surge de las dificultades de alojar archivos externos y sobre todo, los de tipo CSS. Como hay quienes no pueden hacerlo o no quieren depender de ellos, podríamos usar una alternativa simplificada que hará lo mismo aunque de manera más limitada ya que no permitirá "recordar" la opción seleccionada.
Veamos lo que dice Pizcos y que es absolutamente correcto:
En una plantilla estandard, hay dos bloques que establecen el ancho de la sección donde están los posts y la sección de la sidebar. Por ejemplo, en mi caso dicen esto:
#main-wrapper {
...
width: 600px; /* el ancho de los posts */
}
#sidebar-wrapper {
...
width: 240px; /* el ancho de la sidebar */
}Así que el ancho total es igual al ancho de main-wrapper más el ancho de sidebar-wrapper. Entonces, si no estuviera la sidebar, el ancho disponible sería de 600+240=840 pixeles aunque, allí, también deberíamos tener en cuenta el margen de la sidebar si es que existe (en mi plantilla es de 20 pixeles) por lo que el espacio total quedaría en 860 pixeles.
La hoja de estilo alternativa debería tener entonces dos variaciones, cambiar el nuevo ancho y ocultar la sidebar:
La hoja de estilo alternativa debería tener entonces dos variaciones, cambiar el nuevo ancho y ocultar la sidebar:
#main-wrapper {
...
width: 840px; /* el ancho de los posts */
}
#sidebar-wrapper {
...
display: none; /* ocultamos la sidebar */
}Como en este ejemplo sólo hay dos propiedades que debemos cambiar, tambien sería posible cambiarlas de manera directa, usando JavaScript pero sin archivos externos:
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='860px';">OCULTAR SIDEBAR</a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='600px'">RESTAURAR SIDEBAR</a>Por supuesto, puede ser que haya alguna otra propiedad que cambiar pero eso dependerá de cada plantilla y claro, sin son demasiados, habrá que recurrir a otro sistema.
Una alternativa a styleswitch.js es otro script llamado ProtoSwitcher que permite hacer lo mismo pero usando Prototype.
La diferencia fundamental es que no requiere tener archivos alternos lo que es una ventaja pero, es un poco más complejo de entender y no hay mucha información al respecto aunque podemos descargar un demo completo para experimentar
Para los preocupados por el tema velocidad de la carga, debo volver a recordar que "ocultar" elementos con CSS no implica aliviar el proceso de carga ya que, esten o no visibles, los elementos se cargan igual así que la solución para ese tipo de problemas no se resuelve con ninguna de estas técnicas.
Una alternativa a styleswitch.js es otro script llamado ProtoSwitcher que permite hacer lo mismo pero usando Prototype.
La diferencia fundamental es que no requiere tener archivos alternos lo que es una ventaja pero, es un poco más complejo de entender y no hay mucha información al respecto aunque podemos descargar un demo completo para experimentar
Para los preocupados por el tema velocidad de la carga, debo volver a recordar que "ocultar" elementos con CSS no implica aliviar el proceso de carga ya que, esten o no visibles, los elementos se cargan igual así que la solución para ese tipo de problemas no se resuelve con ninguna de estas técnicas.
86 comentarios:
JMuir, realmente lo hiciste tan sencillo, que hasta, se me hace difícil comentar.
Gracias
No entiendo donde hay que colocar el código
Claudio:
Es una idea interesante para cierto tipo de blogs.
Monjaguerrillera:
Puede ponerse en cualqueir parte, por ejemplo en el header o en un menú. Si te fijas en el blog de Pizcos, ha colocado dos botones arriba de su página.
Hola, muy útil, estoy implementando el de sin archivos externos, me sirve para algunas entradas en las que no cabe el contenido.
Creo que, usándolo con prudencia, es una muy buena opción.
Es muy interesante. Tambien se podria usar para las paginas individuales distintos tipos de estilo.
La idea seria usar SOLO el contenido de los posts. Así tardaria menos en cargarse la pagina (sin propiedades CSS sino que con los items condicionales de blogger):
<b:if cond='data:blog.pageType == "item"'>
<div id='sidebar-wrapper'>
[el códigos]
</div>
<b:else/>
<style>#sidebar-wrapper {display: none;}
</style>
</b:if>
>div id='sidebar-wrapper'<
En realidad, ocultar con CSS no reduce la carga ya que la página se carga igual, justamente, esa es una de las ventajas de ese tipo de alternativa.
Con esa misma idea, en realidad, no hay que ocultarlas sino usar los condicionales para que directamente no se genere; por ejemplo:
<b:if cond='data:blog.pageType == "item"'>
<div id='sidebar-wrapper'>
[el código]
</div>
</b:if>
genial! se puede ocultar la barra en algun post exclusivo por defecto?
Sí, se podría. No sé exactamente cuál es la idea pero se me ocurre que podría hacerse directamente en el post colocando:
<style>#sidebar-wrapper {display: none;}</style>
al inicio.
Se podría establecer una etiqueta especial y en función de esa, ocultar o mostrar la sidebar.
Saludos maestro. Estos últimos días he andado cambiando el diseño del blog y recordé haber leido esta entrada, así que para aquí me he venido raudo y veloz (bueno, para eso y para dejar constancia de mis visitas, cosa que hacía tiempo que no sucedía jeje). El código Javascript para ocultar y mostrar la sidebar me funciona sin problemas, sin embargo me gustaría que la sidebar apareciese directamente oculta en una serie de entradas y tener luego la opción de mostrarla si se quiere, pero de inicio que apareciese oculta sólo en algunas entradas.
He estado jugando con los códigos apoyándome en esta y en otras de las entradas que le has dedicado a la sidebar, pero no consigo hacerlo. He intentado también darle un ID exclusivo de manera similar a cuando se quiere ocultar la fecha de un post, pero nada, no lo consigo.
Toda ayuda será bien recibida :).
Lo vi, Jabba, soy curioso :D Quedó muy pero muy bien.
Lo de poner un ID o usar un ID en los posts sería posible, debería funcionar ¿Has podido agregarle ese ID a los posts? Si es así, al inicio del post que quieres mostrar con la sidebar oculta, deberías poner algo así como:
<style>#sidebar {display:none;}</style>
y todos las otras propiedades de cambies.
Otra alternativa que me parece más "elegante" y que evita re-escribir, sería usar los condicionales directamente en la plantilla e identificar los posts "especiales" por su título.
Por ejemplo, supongamos que quieres que el post cuyo título es: Wallpapers Linux varios
En la plantilla, luego del estilo o bien antes de </head> podrías poner esto:
<b:if cond='data:blog.pageTitle == &quot;El Blog de Jabba: Wallpapers Linux varios&quot;'>
<style>
#sidebar {display:none;}
........... y todas las propiedades necesarias
</style>
</b:if>
Con data:blog.pageTitle identificas un post específico que siempre tiene esta forma:
El Blog de Jabba: El titulo del post
Claro que, tendrías que colocar esa condición para cada uno de los posts pero te evita tener que identificarlos con ID, modificar los posts y el blog se cargaría ya armado y no se re-escribiría.
¿Algo de eso sirve?
Que si sirve dices... ¡sirve a las mil maravillas! :) . Nada más empezar a leer tu respuesta he visto qué me faltaba al poner el ID en los post... el "punto y coma" que sigue al "none" :-p. No sé si ha sido sólo eso o también ha influido que yo usaba paréntesis convencionales () en lugar de corchetes {} . Bueno, supongo que habrá sido una mezcla de todo.
De todas formas, como dices el segundo método es mucho más profesional. Probaré con ambos :). Muchas gracias señor.
Un abrazo
Me alegro que sirva, Jabba.
El error, por lo que veo n oes el punto y coma que es opcional y sólo obligatorio si hay más propeidades; el error es el paréntesis ya que las definiciones CSS van entre llaves.
Ya lo dice el refrán: no te acostarás sin saber una cosa más... Gracias JMiur ;).
Buenas JMiur;
Implementé con éxito el truco original de Pizcos. Sin embargo no me funcionan las 'cookies'(las tengo habilitadas): cada vez que cargo la página aparece por defecto la sidebar desplegada y no "recuerda" la última configuración.
¿Qué puede ser?
Gracias ^^
Acabo de probar y lo veo funcionar bien ¿Podría ser un problema del navegador?
Pues debe serlo :S
Seguiré investigando, ¡muchas gracias de todos modos!
Saludos de nuevo JMiur. Escribo de nuevo para ver si me resuelves (como de costumbre) otro asuntillo relacionado con los comentarios que posteé hace algún tiempo en esta entrada. Me gustaría (y no sé si es posible) que las entradas específicas que tengo con la sidebar oculta tuvieran por defecto un ancho específico diferente al resto de las entradas del blog. Al ocultar la sidebar en esas entradas, queda un importante vacío en su lugar que me gustaría que formase parte de esas entradas. Creo que quedaría mucho más elegante. ¿También se podría hacer esto con el ID exclusivo? De ser así... ¿cómo sería?
Y bueno, ni que decir tiene que te deseo un muy feliz año nuevo ;) .
Un saludo
Entiendo y es posible per habrá que modificar alguna cosa en tu plantilla porque hay dos definciones para el ancho de los posts:
en #content dice width:640
en .entry dice width:616px
La segunda es una clase, no nos servirá pero n oes roblema porque creo que puedes eliminar esa definicion de width o ponerl el valor auto
Hecho eso, podemos hacer un enlace como este:
onclick="
getElementById('sidebar').style.display='none';
getElementById('content').style.width='960px';"
y lo restauramos así:
onclick="
getElementById('content').style.width='640px';getElementById('sidebar').style.display='block';"
De esa manera, ocultas y cambias el ancho y viceversa, todo en el mismo click.
¿Se entiende la idea?
Creo que entiendo, sin embargo... ¿no habría una forma de que aparezca automaticamente con el ancho específico que quiero sin tener que hacer click sobre un elemento de la entrada? Me da igual que aparezca o no la posibilidad de restaurar el ancho original, sencillamente que apareciese con el ancho especificado directamente (por supuesto sin q el resto de entradas se vieran afectadas :) ) ¿es posible?
Por cierto, te confirmo que puedes eliminar o sencillamente modificar la definición de width en .entry sin que afecte al resto de la entrada. Supongo que ya lo sabrás pero como dices que "crees" que se puede eliminar o modificar ya te lo confirmo yo :p , porque he probado ambas y funciona sin problemas ;) . Al final lo he dejado en "auto" y el ancho de la entrada se redistribuye perfectamente a la totalidad del espacio que queda al ocultar la sidebar. Sin embargo me gustaría que como te digo en el comentario anterior apareciese ya directamente con el ancho que quiero y la sidebar ya oculta de por sí :) .
El cielo ganao lo tienes.
Jabba:
Eso depende de como lo tengas armado en la plantilla, algo que no se logra ver online.
¿Usas un condicional? Si es así, es posible, por ejemplo, colocar el estilo junto con el resto de las condiciones, usando la etiqueta <style>
Pff, creo que lo dejaremos estar por ahora. A partir del 21 de este mes (que termino la convocatoria de exámenes) volveré a la carga. Si no consigo aclararme volveré a darte la lata y si lo crees oportuno ya te mandaré una copia de la plantilla para que le pegues un vistazo cuando puedas.
Gracias J ;) .
OK Jabba, cuando quieras. Suerte con los exámenes :)
Hola como hago si tengo mi blog tiene dos Sidebar como las oculto no encuentro el codigo donde estan las dimensiones.
En tu blog, los datos a modificar son sidebar1-wrapper y sidebar2-wrapper.
cOMO SOLUCIONO ESTE PROBLEMA?
Cuando le doy clik en ocultar la barra, la pone bajo, y no la oculta, que Valores puedo modificar?
El blog es este:
http://generacion-jc.blogspot.com/
Gracias, espero puedas Ayudarme jmiur
Tube un pronlema con esto:
Cuando Oculto la SideBar, en realidad lo que pasa es ponerse abajo de todas las entradas?
Que debo modificar o revisar para solucionarlo?
El blog este:
http://generacion-jc.blogspot.com/
Espero puedan ayudarme ;)
Tengo un problema:
Cuando oculto la SideBar, no se oculta sino que queda abajo de todos los Post.
Que valores debo modificar o revisar?
Espero puedas ayudarme, el blog e este:
http://generacion-jc.blogspot.com/
Si sirve para una mejor ayuda el ancho del main-wrapper es de 574.
Y el de la sidebar es de 375
Entonces lo puse asi:
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='949px';">OCULTAR BARRA LATERAL</a>
<a href="javascript:void(0);" onclick="getElementById('sidebar-wrapper').style.display=''; getElementById('main-wrapper').style.width='574px'">MOSTRAR BARRA LATERAL</a>
Espero asi puedas darme una mejor ayuda, de antemano Gracias
Guillermo:
Eso ocurre porque en tu blog, la sidebar está dividida en varias partes. Primero, debes cambiar:
sidebar-wrapper por side-wrapperY además, deberás agregarle lo mismo pero para tabsidebar-wrapper que son las pestañas.
getElementById('tabsidebar-wrapper').style.display='none';
y
getElementById('tabsidebar-wrapper').style.display='';
Gracias Jmiu, surgieron dos Cosas:
Primero, repeti el codigo como me dijiste, pertenia dos textos que decian Ocultar, etc.. y Mostrar...etc..
Y habia que hacer clik en ambos para que se oculten la parte de las solapas y despues la otra parte.
Despus intente agregarle al mismo Codigo lo que me pusiste en desde get element, pero no funciono.
Habra alguna manera de que ambas partes se oculten (ALMISMO TIEMPO) con el mismo "Ocultar barra lateral" y con el mismo "Mostrar Barralateral" y no por separado?
Gracias
Si. Colocando las instrucciones separadas con un punto y coma:
onclick="getElementById('sidebar-wrapper').style.display='none'; getElementById('tabsidebar-wrapper').style.display='none'; getElementById('main-wrapper').style.width='949px';"
¿Se entiende la idea? Es complicado escribirlo acá :D
Gracias Jmiur, no sabia exactamente donde Agregar los Codigos Extras.
Pero ya quedo, Gracias!!!
Siempre es muy util tu ayuda, y tambien Gracias por tomarte las molestias de responder.
Me alegro que resultara, Guillermo :)
Yo tengo un problema, no encuentr esta parte en mi plantilla:
#main-wrapper { ... width: 600px; /* el ancho de los posts */}#sidebar-wrapper { ... width: 240px; /* el ancho de la sidebar */}, la busco y la busco, pero no viene, podrian ayudarme?:-|
Tal como dice el post, eso es lo que trae por defecto una plantilla estandard. En tu caso, dice:
#outer-wrapper {
width: 1002px;
....................
}
y no hay definiciones para sidebar-wrapper.
hay alguna manera de que la sidebar no aparesca al iniciar la página y al apretar un link o boton esta aparesca?
Si. Colocándole la propiedad display:none y siguiendo luego con la idea de este post o algo similar.
hola jmiur
si pongo display none me oculta la sidebar y despues no tengo manera de que aparesca nuevamente
Claro. La respuesta en tu misma pregunta:
... y al apretar un link o boton esta aparesca ...
Justamente eso es l oque debes hacer, poner un enlace o un botón para permutar de estado.
Hola JMiur: Buenísimo el truco. Siempre que paso de anónimo por aquí, me llevo algo bueno. Y Hoy es el día que quiero dejar mi agradecimiento. Implementé el truco en mi blog y muy a pesar de tener pocos conocimientos de esto, me ha quedado bastante bien. Sin embargo, tiene un pequeño detalle que si bien no lo noten los visitantes...me incomoda un poco. Lo he probado con todos los exploradores y sucede igual. Oculta y restaura la barra perfecto, pero al restaurarla...la imagen de fondo del post queda recortada del lado de la barra, sin que afecte el texto como tal. Y el otro detalle, es que si bien el texto expande y ocupa parte de la sidebar...no logra alcanzar a ocupar su totalidad como yo quisiera. Será cuestión de números o que debo adicionar una imagen alterna de fondo al código?. Si en algo me puedes ayudar...nuevamente Muchas Gracias.
Luis:
El tema de la imagen que no termina de cubirir el ancho es porque el main-wrapper que restauras, lo haces dándole 600 pixeles de ancho y el ""original" es mayor, tiene 675 pixeles. Deberías cambiar ese detalle y poner:
getElementById('main-wrapper').style.width='675px'
Que el texto no ocupe el ancho total tiene una explicación similar, habría que aumentar el ancho que colocas ahora (860px) sumando márgenes y paddings que debe tener la sidebar pero, más sencillo que hacer cálculos es cambiar 860px por 100%. Algo así:
getElementById('main-wrapper').style.width='100%'
De ese modo, ocupará todo el ancho disponible, sea este el que sea.
Perfecto, esa era mi falla. Ahora el texto ocupa la totalidad de la pantalla y al restaurar la sidebar, la imagen queda en su tamaño original sin ser recortada...!!!MUCHAS GRACIAS!!! Una última consulta. De que tamaño tendría que ser la imagen de fondo del post o que código habría que adicionar en la plantilla que controla la misma, para que ella se expanda y se centre con el texto sin distorsionarse. Y digo expanda, por que si se centra solo junto con él, quedaría poco natural el nene que esta levantando la hoja en el angulo inferior izquierdo de la página. Lograrlo rasaría la perfección. Saludos.
No es posible expandir la imagen o ampliarla, sólo podemos moverla y cenrarla, como bien dices, no sería bueno.
Lo que podrías hacer es usar dos imágenes, una más grande para los posts expandidos. Eso, lo puedes controlar con las mismas instrucciones del enlace, agrenafgu ina nueva orden, algo así:
getElementById('main-wrapper').style.width='675px';
getElementById('main-wrapper').style.backgroundImage="url(LA-IMAGEN-ANGOSTA);'
y en el otro:
getElementById('main-wrapper').style.width='100%';
getElementById('main-wrapper').style.backgroundImage="url(LA-IMAGEN-ANCHA);'
Los escribo en dos líneas pero va uno a continuación del otro, separados por un punto y coma.
JMiur, perdona que sea tan intenso...La imagen angosta original es de 675x1000 y diseñé una ancha de 975x1000. Adicioné el código tal y como va:getElementById('main-wrapper').style.width='675px';getElementById('main-wrapper').style.backgroundImage="url(LA-IMAGEN-ANGOSTA);' (Seguido)
y el otro:getElementById('main-wrapper').style.width='100%';getElementById('main-wrapper').style.backgroundImage="url(LA-IMAGEN-ANCHA);' (Igual/seguido).
Pero no me aparece la imagen ancha. Me llamó la atención que la url inicia "url...y termina'. Probé cambiando al inicio y final con",'e incluso dándole un espacio entre width='100%'; y getElementById('mai..
y nada.
Se que no te es problema mirar mi código fuente y he querido ponerte el código de las URLs como las tengo por si pudieses solucionarmelo...yá me di por vencido.
Angosta:http://sites.google.com/site/uropediatra/archivos/FondoPost-MD-SV.gif?attredirects=0
Ancha:http://sites.google.com/site/uropediatra/archivos/FondoExpandido.gif?attredirects=0
Intenté colocar aquí el código del truco para evitarte llegar hasta mi y ver el código, pero me apareció un mensaje que me impedía colocar el atributo onclick.
GRACIAS POR TU TIEMPO.
Luis:
Ahí hay dos cosas. La primera es un tema de sintaxis, eso lo resolvemos fácil. La segunda es que ahora veo que la imagen de fondo, en realidad, no está en main-wrapper sino en:
.post {
...........
background:transparent url(IMAGEN-ANGOSTA) repeat-y left top;
}
Ahí nos encontramos con un problema que debe resolverse, necesitamos que el fondo esté en una etiqueta que podamos identificar y que tenga un atributo ID.
Empiezo a adivinar un poco. Veo que hay un DIV definido así:
<div class='blog-posts hfeed'>
Como ese DIV no tiene propeidades y es el mismo rectángulo de los posts, podríamos usarlo. Habría que cambiarlo para que dijera esto:
<div id='blog-posts'>
Luego, eliminar el background de la clase .post {} y colocarlo de este modo:
#blog-posts { background: transparent url(IMAGEN-ANGOSTA) repeat-y left top; }
Si haces eso y lo miras con la Vista Previa, no deberías notar ningún cambio en el blog. Si es así, pasamos entonces a la segunda parte, en lugar de cambiar el fondo de main-wrapper (que no tiene) cambiaremos el de blog-posts.
Para evitar errores de sintaxis, he colocado el código de los dos enlaces en un archivo TXT y allí sólo debes colocar la direccion real de las imágenes a usar.
La idea es la misma de antes, usar:
getElementById('blog-posts').style.backgroundImage='url(IMAGEN)';
Fantástico JMiur...Seguí al pie de la letra los pasos y al colocar vista previa, en apariencia no note cambios. Funciona perfecto y creo que ha quedado bastante bien. Tuve que hacer un nuevo diseño de la imagen ancha, dado que no consideré el margen entre la sidebar y el post...y cuando la restauraba, me quedaban segmentos de imágenes de la ancha incluidos en el texto. Pero eso lo solucioné. Sin embargo cuando me di a la tarea de probar todos los "trucos" que tengo (que funcionan bien), me di cuenta de varios detalles:
1-Me cambió la Clase y el tamaño de la fuente(Se disminuyó).
2-Había logrado que la extensión del post de la página de inicio coincidiera con los elementos de la sidebar. Pues no se que pasó...Si el post se me subió o la sidebar se bajó. Ademas de no coincidir, el título me queda muy al margen superior de la imagen tenue del inicio del fondo. Y la imagen-enlace del lápiz de mi amigo OLOMAN (que tanta ayuda me ha prestado) quedo a la mitad. Al igual que el margen izquierdo del texto muy al limite del borde del fondo.
Por mi inexperiencia, o he querido tocar nada mas. Si puedes echarme otra mano (a estas alturas me las he gastado todas), me gustaría poder arreglarlo. No quisiera que cuando mi amigo pase a visitarme...se vea sin cabeza.JEJEJE.
La verdad es que me ha gustado el truco de esconder-mostrar la sidebar y me ha quedado tan bien, que no quisiera tener que abandonarlo, pues mis posts son demasiado largos y ese es un truco de mucha ayuda.
Un fuerte abrazo y MIl GRACIAS.
Otra vez soy yo. Se me olvido comentarte que ambas imágenes de fondo dependen del código del widget y no de la plantilla como tal. Y cuando uno entra en la página, no aparece ninguna imagen. Solo si se accionan los botones para ocultar o restaurar...aparecen.
Intente colocar antes y despues de:
#blog-posts { background: transparent url("http://sites.google.com/site/uropediatra/archivos/FondoPost-MD-SV.gif?attredirects=0") repeat-y left top; }
Las características previas de:
margin:0px 0px 20px 0px;
border-bottom:2px dotted $bordercolor;
padding: 20px 30px 15px 80px;
font-size:15px;
font-family:Comic Sans MS;
margin-top:30px;
Y no se arregló el inconveniente.
Saludos.
La mayor parte de los problemas se deben a un error así que corrijamos eso.
Has puesto:
.post #blog-posts {
margin:0px 0px 20px 0px;
border-bottom:2px dotted #5588aa;
padding: 20px 30px 15px 80px;
font-size:15px;
font-family:Comic Sans MS;
margin-top:30px;
background: transparent url(http://sites.google.com/site/.................... repeat-y left top;
}
Y eso no funcionará, debe ser así:
.post {
margin:0px 0px 20px 0px;
border-bottom:2px dotted #5588aa;
padding: 20px 30px 15px 80px;
font-size:15px;
font-family:Comic Sans MS;
margin-top:30px;
}
#blog-posts {
background: transparent url(http://sites.google.com/site/.................... repeat-y left top;
}
.post debe seguir existiendo, contiene las fuentes, lso márgenes etc, todo eso que ahora se trastoca.
#blog-posts es lo nuevo y solo tiene la imagen de fondo.
Por eso tampoco funciona al inicio ya que esa definciion de .post #blog-posts {} no hace nada y es ignorada.
Corrige eso y ahi vemos.
Hace unos días Jabba decía aquí, que uno no debía acostarse sin aprender una cosa más...y yo no he querido hacerlo...sin agradecerte. De todo corazón MIL GRACIAS...vos sos un GENIO. Me ha quedado perfecto, ni mandado a hacer. Yá "Mis Amigos Bloggeros" podrán visitarme y encontrar la casa en orden.
Saludos y hasta otra...
Perfecto, Luis, me alegro que haya servido :D
hola, te felicito por tus exelentes explicaciones y por tomarte la molestia por contestar las preguntas. ahora yo tengo una. es que hay algo que me cuesta entender. Dijiste que tenemos que tener dos juegos de plantillas, entonces si yo coloco el codigo, no estaria modificando una sola? como creo la llamada "hoja de estilo alternativa"? para modificarle los valores?
otra preguntilla... mi sidebar esta dividida por bloques, como hago para hacerla un solo bloque?
Lucas:
En el caso del ejemplo, los cambios son pocos y se hacen con JavaScript poe ejemplo:
getElementById('main-wrapper').style.width='600px'
si fueran muchos, puede hacerse una función y listar allí los cambios.
En el caso de los scripts como styleswitch.js, se requiere alojar los archivos en alguna parte, algo más sobre el tema se puede ver en esta vieja entrada. Por ejemplo, el CSS puede alojarse en Google Sites.
En los tres blogs que vi que tienes, la sidebar es una sola, no varias.
la ignorancia me supera y estoy tildado. no tengo ni idea de como empezar, me siento como esas personas que les dan una explicacion clarita como el agua, pero que no entienden el sentido y preguntan estupideces. como sea, yo tengo el codigo del ejemplo del principio. ¿tal y cual está lo copio a la plantilla? o en donde? lo que yo se es que en mi plantilla me cnase de buscar el #main-wrapper y #sidebar-wrapper. jamás los encontre.supongo que desde ese lugar podria modificar los valores. en realidad mi preocupacion es el blog de view films, y los problemas que tengo son porque la plantilla de este esta hecha con artisteer. supongo que lo conoceras, el programa que crea plantillas web personalizadas, y complica la vida si despues uno quiere hacer algunos cambios en la edicion html. no creo que quieras ver la plantilla completa no? asi sabrias como ocultar/mostrar mi sidebar.
obvio, es posible que me confunda y me enrede con estas preguntas...
saludos y gracias.
Sólo son dos enlaces. En el caso de es blog, los divs no existen ya que no es una plantilla que respete el esquema de Blogger. En todo caso, deberías cambiar lo siguiente:
En lugar de main-wrapper poner main
En lugar de sidebar-wrapper poner sidebar1
Los anchos originales son 654px para el main y 218px para sidebar1
#main {width:654px;}
#sidebar1 {width:218px;}
872
no no no no no y no. suelo ser una persona inteligente, pero esta vez me sorprendi. si todavia podes responderme tratame como si fuera un taradito y explicamelo coomo a un discapacitado. mi problema es que yo no entiendo la idea desde un principio, es decir no tengo idea de lo que hago, entonces no puedo pensar ni razonar como generalmente hago.
Lo que puedo no es mucho más de lo que está en la entrada y las diferencias tal como te las indiqué en el comentario.
genial! ya me salio... claro, para hacerlo en javascript tenía que cambiar el sidebar-wrapper y el main-wrapper como me dijiste, use bastante la cabeza y logre poner unas flechas en vez de texto y desues le agrege height y width para achicarlas... buenisima tu ayuda.
si tenes tiempo me podrias contestar otro caprichito? como podria hacerse para que cuando se "oculta" la sidebar el movimiento sea gradual, suave, y que no quede tan tosco. espero que me entiendas... ;)
Para eso, deberías usar alguna librería de efectos como jQuery ou otra de ese estilo; es l oque se llama un efecto acordeón; tendrás que buscar en la web porque no es algo tan simple.
y si quisiera que directamente en esa entrada tenga las mismas opciones pero viseversa, que sea que el sidebar ya este oculto y tenga que apretar el enlace para poderlo restaurar. o que por lamenos este oculto solo en esa entrada.
tienes alguna idea como podria hacerlo?? saludos!!
Son cosas muy específicas para responder; para enmpezar, deberías usar los condicionales de Blogger e invertir las cosas.
hola , es que tengo un incoveniente. ya puede ocultar la sidebar pero tengo el problema de que no puedo modificar para que la escritura ocupe todo el espacio se queda en lo mismo
mi pagina es http://www.cienciaexplicada.com/p/matematicas.html
estoy intentando cambiar los div_class como post-head,entry pero no se modifican no se que hacer mas
Lo que tiene tu blog es una serie de imágenes de fondo como la que está en el DIV #base. No sé cuál es la idea que tienes pero, si quieres que la parte de las entradas ocupe todo el ancho, tanbién deberás modificar esa imagen o eliminarla de alguna forma.
JMiur, es lo q estado buscando, pero me gustaria ponerlo de manera en que al cargar el blog se vea normal pero en el momento q alguien abra una entrada la sidebar desaparesca.
Dark:
Para eso, debes usar los condicionales. Por ejemplo:
<b:if cond='data:blog.pageType == "item"'>
<style>
#main-wrapper {
...
width: 840px; /* el ancho de los posts */
}
#sidebar-wrapper {
...
display: none; /* ocultamos la sidebar */
}
</style>
</b:if>
Si lo que quieres es que el blog no tenga sidebar en als entradas individuales, más que ocultarlas con CSS, sería mejor usar el condicional para que no se cargue:
<b:if cond='data:blog.pageType == "item"'>
<style>
#main-wrapper { width: 840px; /* el ancho de los posts */ }
</style>
</b:if>
y buscar la sidebar:
<b:if cond!='data:blog.pageType == "item"'>
<id='sidebar-wrapper'>
..........
..........
..........
</div>
</b:if>
Ami no me funciona :(
http://idridblog.blogspot.com/p/members.html#Member
Los iconos de + y - .
Porque no hay ningún DIV cuyo ID sea sidebar-wrapper. Deberás buscar el ID del DIV a ocultar y usar ese.
Hmm esto sidebar-right-1?
En tu plantilla, la columna de la sidebar no tiene un ID isno una clase CSS: column-right-outer así que deberás agregarla algún ID para identificarla.
hola :D jmiur... esta muy bueno el post :d... pero dime como puedo hacer eso mismo pero al reves tener oculto el sidebar y presionando mostrarlo??? gracias de antemano :d
Por defecto, el estado inicial es visible así que deberias buscar la regla de estilo de #sidebar-wrapper y allí colocarle display:none; y lo mismo con main-wrapper, colocar el ancho más grande. Luego, el script es igual.
Hola mi buen JMiur. Bueno yo intente hacer lo que dice el comentario 67 pero solamente quise desaparecer el Sidebar de lado izquierdo pero no me salio. Me podrías ayudar a como hacerlo posible.
Gracias y saludos.
Debes hacer lo mismo pero, también con la otra sidebar, creo que en tu caso tiene este id:
#newsidebar-wrapper
Creo que me equivoque y no especifique. Una disculpa.
Bueno el blog de "animediaonlineyalgomas.blogspot.com" ya tiene esa función de al momento de abrir un posts el sidebar desaparece (Como salio quien sabe ya que venia predifinido en plantilla cuando lo descargue ¬¬). Pero estuve buscando como colocarlo en este otro que yo tengo: "esiqios.blogspot.com/". Busque y trate de colocar el código pero no me salio. :(
Lo que puedes hacer ahí es ocultar la sidebar derecha con facilidad. Has escriot algo así en un condicional; allí te falta la llave de cierre y puedes agregar la nueva regla:
#main-wrapper {
width: 761px;
margin: 0px 10px 0px 0px;
float: left;
}
#sidebar-wrapper {display:none;}
Pero, quedará un agujero negro a la derecha ya que la plantilla tiene un esquema de diseño más complejo y donde hay errores; por ejemplo, la sidebar izquierda no flota ni está dimensionada por lo tanto, se ve arriba; podría ser:
#sidebar-wrapper2 {float: left; width: 195px;}
De todos modos, conseguir eso que quieres, requerirá trabajo en esa plantilla y modificar muchas cosas.
Muchas gracias Ya quedo....XD
Jmuir justo lo que necesitaba, aunque tengo una duda, si quiero que se oculte la sidebar al entrar en un post determinado sin necesidad de hacer click en alguna parte, donde deberia colocar el codigo y que modificaciones deberia hacer? :$
Para ser mas exacto, que sea como tu indice "http://vagabundia.blogspot.com/2006/09/indice-htmlcss.html" pero con la opcion de ocultar y mostrar.
Este es mi blog si necesidas revisar la plantilla. Saludos y gracias :D
Si se trata de un post, puedes condicionar el CSS de este modo antes de </head>:
<b:if cond='data:blog.url == "URL_DEL_POST"'>
<style>
#right {display:none;}
#content {width:990px;}
</style>
</b:if>
la primera recla oculta la sidebar y la segunda amplia el área de posts, ahi colocas el valor que quieras.
Gracias por la ayuda. :)
Hola...
He estado buscando la manera de reestablecer mi sidebar de varias maneras pero no logro que reaparezca... Si te es posible, podrias darle un check a mi website/blog www.jonnathansanchez.com...? Ahora mismo tiene un pequeño caos de elementos que no se supone deban estar ahí, pero por lo pronto deseo reestablecer la sidebar por cuestiones de rediseño del site...
No veo que en ese sitio, la sidebar tenga alguna clase de contenido. No sólo no se ve nada, tampoco se ve que haya algo en el código fuente. El DIV sidebar-wrapper carece de contenido.
Hola!
Tengo una duda, como seria para hacer un gadget(html en este caso), que se despliegue (tengo estos códigos) pero que dentro tenga oculto un gadget como el de Archivo del blog, Etiquetas, etc.? Osea cosas que ya vienen con el blog.
Gracias!
No puede ponerse un gadget dentro de otro, tampoco hace falta. Puedes ocultarlos y mostrarlos desde ese gadget HTML.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...