104

Modificar las columnas del footer

Anteriormente expliqué como añadir tres columnas en el footer (pie del blog).
Poco después de publicar esta entrada me han empezado a llegar consultas sobre la forma de adaptar esas nuevas columnas, para conseguir una apariencia lo más parecida posible a la sidebar del blog. Esto se consigue usando el CSS.

[1] Si nos fijamos en el código añadido para mostrar las columnas, veremos que cada una de ellas tiene una id propia: id='col1', id='col2',id='col3'
Usaremos esa id para modificar su aspecto, para ello vamos a la parte de editar-html de nuestra plantilla y sin expandir artilugios localizaremos la etiqueta ]]></b:skin>.
Justo encima de ]]></b:skin> pegaremos este código:


#col1{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}


[2] En: #col1, #col2 y #col3, controlaremos el aspecto de cada columna y en: #col1 h2, #col2 h2 y #col3 h2, lo haremos con el titulo de los elementos que pongamos en cada una de ellas.
Lo más cómodo será mirar en el código de nuestra sidebar e ir copiando lo que necesitemos: border, text-aling, font-size...para asemejar lo más posible las nuevas columnas a la sidebar del blog.

Nota
Tendréis en cuenta que el código que he puesto como ejemplo, es el de mi sidebar y su título, vosotros tendréis que probarlo con los vuestros.
Si lo copiáis y pegáis tal cual está, el resultado sería este:

Tres columnas

Entradas Relacionadas:

104 comentarios:


Walter

Me encanta este truco pero queria consultarte si se puede poner arriba en ves del footer arriba de las entradas.Espero me puedas ayudar ya que quiero sacarle mucho provecho a este trucoo, ojala que si se pueda hacer.

La Blogueria

Rosa, de nuevo, gracias. También quería comentarte (un poco fuera de órbita...)que los cambios en tu blog son tan sutiles que no me habia dado cuenta bien... Me encantan! Tu blog, aparte de lo bien estructurado que está y la apariencia limpia que tiene, carga tan rápido... ¿Cómo lo haces? mi blog es un horror pero me resisto a usar un blog de ejemplos para que los lectores no tengan que saltar de un blog a otro... asi que lo lleno de scripts y así va la cosa...

(navegar por este blog es una delicia, ordenado, bien etiquetado, un modelo vamos, y encima ligero como una pluma).

¡Saludos!

Rosa

Walter, he estado haciendo pruebas y lo he puesto sin problemas aparentes sobre las entradas, colocando el código en sustitución de la línea que ves en negrita.

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Rosa

La Bloguería...por cierto, ¿puedo llamarte Vane? ;-)

Un millón de gracias por tus palabras, sinceramente pocas veces he recibido este tipo de halago (para mi lo es) recibo muchos pero en cuanto a "contenido" no a "continente", ya me entiendes...

Al principio me pasaba como a ti. No se si alguna vez me visitaste con la plantilla que tenía en tonos granate...ufff, solo la imagen del header era una burrada de peso...pero como era un regalo, ya sabes...

Hasta que decidí "pesarlo" todo y controlar los widget lo más que puedo. Por ejemplo, antes tenía un mini chat, un par de días con problemas de carga y lo retiré. Nunca espero a ver si en la web lo solucionan, si no va, ¡fuera! aunque sea momentáneo. La verdad es que prescindo de muchas cosas en beneficio del "peso" del blog.
Si noto que un script no se lleva demasiado bien con otro, pues lo sacrifico (así me quedé sin un menú que tenía precioso).

En cuanto a las demostraciones de tal o cual efecto, si lo he visto en algún sitio pongo el link para que puedan verlo funcionando y sino, uso una imagen (como en este caso) lo más pequeña que puedo. Lo malo de esto, es que aumentan las consultas, ya que a veces no se hacen una idea exacta solo con imágenes y, una vez aplicado, empiezan a "ametrallar" con los cambios que quieren. Pero bueno...mientras te lo tomes con ganas...

Lo hago con todo, je,je, ya me han borrado de algún que otro directorio por retirar su botón, pero como note que tarda en cargar...me lo cargo. :-)

Procuro usar Blogger para alojar todas, o al menos, la mayoría de mis imágenes, esto no se si es una "manía" mía, pero pienso que así se reduce el tiempo de carga y además si Blogger está operativo, las imágenes también, si no lo está, pues como tampoco se podrá acceder al blog...no problem.

En fin...hago lo que puedo para "llegar a fin de mes" aunque sea privándome de cosas ricas, je,je,je.

¡Un abrazo!

La Blogueria

Leí hace tiempo (en su día) tu post sobre Pingdom Tools. Desde entonces tengo un post muy interesante sobre optimización en mis borradores, que no me atrevo a publicar porque verguenza me da predicar sin el ejemplo... Pero claro, es que nuestros blogs no muestran recetas de cocina, sino scripts, widgets y sabediosque... Ese día hice bastante limpieza general, y cada vez que quiero publicar el post, lo mismo...pero no es suficiente, de hecho, creo que cambio alguna imagen de alojamiento y elimino algún otro widget...el apego este...qué mal...

Te felicito: lo sobrellevas con muchísima fluidez, repito que así da gusto navegar.

Espero enmendarme, me parece una de las cosas más importantes en los blogs ajenos y el mayor defecto de mi blog.

¡Abrazos y gracias!

PD: cuando veo algo con Ajax por ahí, me muero de envidia. Mi sueño es un blog basado en prototype (por los geniales efectos) y que no necesite recargarse nunca, ni para comentar, ni siquiera para ir a otro post, nada. Clic y Zas. ¡Ay...!

Asuknamun

No se que he hecho mal, pero simplemente copie todo el código para ver tu ejemplo en mi blog y no salió nada de nada.

Rosa

Asuknamun, no solo es copiar el código que hay en esta entrada, antes hay que colocar el otro, el que hace que se muestren las tres sidebars, el que está en el post que publiqué hace unos días y que enlazo en esta entrada.

Rosa

La Blogueria...eso digo yo...¡Ainsss! :-(

Asuknamun

No me había suscrito a estos comentarios por eso recién lo logro ver, si examinas mi plantilla verás que ya lo tengo agregado, es mas deje un mensaje en esa entrada diciendo que me había funcionado muy bien, pero que luego le daría uso cuando lo pueda modificar a mi gusto, si no me equivoco mi comentario fue uno mas que te incentivo a crear esta entrada.
Saludos Rosa.

Sol

hola Rosa,

Necesito ayuda con mi blog..He cambiado la plantilla de mi blog a 3 columnas, y ahora las entradas me salen en la columna central pero no estan niveladas..salen como escalonadas..mis entradas son imagenes y me gustaria ponerlas todas al mismo nivel..se puede hacer eso?..muchas gracias por tu ayuda..un saludo

Sol

TROY

Rosita:

Saludándote con agrado desde Viajeros Virtuales. Acabo de poner en mi sidebar un video que habla de mi nuevo blog, Punch!! FM. La pregunta es: puedo lograr que además de que los visitantes miren ese video lo puedan pinchar para ir directamente; o sea, lo puedo convertir en un link al mismo tiempo?

Coincido con Bloguería en cuanto a que siempre es un gusto navegar por tu page.

Recibe mis saludos muy cordiales y felicidades por el nuevo look.

Troy

Rosa

Troy, si te he entendido, quieres que tus visitas al pinchar puedan acceder a la url del vídeo para su descarga o para colocarlo en su blog, por ejemplo. Si es así, esa opción ya está disponible en el link que está debajo del vídeo, en realidad desde ahí se accede a todos los vídeos que has subido a ese servicio, con la posibilidad de obtener sus urls...

Rosa

Sol, estoy segura que esta entrada en Vagabundia te será de ayuda:

Alinear imagenes

sol

Muchas gracias, voy a ver que consigo.

Un saludo
Sol

TROY

Rosita: Eso era precisamente lo que no quería: poner dos elementos, video y botón. Pero parece que no hay forma de hacerlo de manera diferente...

Por cierto, no son videos, es audio. ¿Escuchaste tu saludo en ANGLO 0006 - OCHENTAS NEW CLASSICS?

Troy

Princesa Yaquee

Que buen truco, me salió!!!!!!!!!!!
Chau!!

jesgo

Rosa, excelente truco pero... me funciona bien pero los estilos sólo van en IE y no en Firefox.
Tienes idea qué puede estar pasando?
Gracias

Rosa

Jesgo, algo no está correcto, tiene que verse en ambos navegadores, está comprobado por mi misma...

Eulalia

Jo! si lo se me paso antes. Me he vuelto tarumba intentando encuadrar los widgets de las columnas de un blog. Al final lo he conseguido, pero por otro camino. He añadido este pedacito #footer-columna-contenedor .widget{
border: solid 2px $bordercolor; }al CSS para enmarcar los widgets y este #footer3 { padding: 4px; } para separar la columna central de la de su izquierda, que quedaban muy pegadas. Me ha costado un poco, ya sabes que no soy muy ducha en estos temas, pero quien la sigue la consigue.
Estas explicaciones pueden ser interesantes si consigo añadir un footer de 3 columnas a la rounders, para que los módulos tengan el mismo aspecto que los de la sidebar. Lo probaré y ya te contaré.
Un abrazo.

Rosa

Eulalia, ya me contarás...
es algo más trabajoso, más que nada por las imágenes que le dan el aspecto redondeado, pero se que es posible porque yo lo hice.
¡Un abrazo!

Ligia

Rosa...Rosita!

Ahora si que sí me salió preciooosooo el footer de mi blog "Ligia-Martínez"

Tanto te molesté hasta que conseguí lo que quería.

Gracias mil por tu paciencia y tu buena e incondicional disposición para ayudarme.

Por eso siempre soy y seguiré siendo,

Tu fan número 1.

P.D.: Dame tu valiosa opinión.

Rosa

Ligia, las columnas te han quedado muy bien, pero eso que has puesto con los cantantes, yo lo retiraría, ralentiza la carga de la página muchísimo... tienes que pensar cuando colocas algo si de verdad merece la pena, o si está acorde con la temática de tu blog... cuantas mas imágenes, carga más lenta...

Es solo mi opinión, pero creo que es acertada, sinceramente :-L

Ligia

Rosa:

Agradezco y tomaré en cuenta tus consejos al pie de la letra...pero...
Te refieres a los dos blogs o solo a "Ligia-Martinez"?

Espero tu respuesta para tomar las medidas correspondientes,

Un abrazo,

Lia.

Rosa

Ligia, me estaba refiriendo a "Imagen y pensamiento" a las fotografías de los cantantes...el post-footer de "Ligia-Martinez" además de precioso, original y encantador :D, no tiene problemas de carga. :-L

Ligia

Juuupiii!

Gracias por tus hermosas palabras, Rosa...me encantaron.

Saluditos el alma,

Lia.

P.D.: Ya quité la parte que "pesaba". Siempre que tengas un consejo que darme te lo agradeceré mucho.

Rosa

Ligia, gracias! :-L

Julio

Rosa, hace mucho vengo aprendiendo de vos y no te habia escrito. Hago parte de una escuela campesina de educacion popular y te quiero agradecer infinitamente, pues has cambiado mucho nuestras posibilidades para la comunicacion y sistematizacion.

Un gran abrazo y por fa, seria muy grato que pasaras por nuestro sitio escueladejusticiacomunitaria.blogspot.com y nos comentaras que piensas, todo el ha sido hecho con tu apoyo.

Rosa

Julio, encantada paso ahora mismo de visita. Y gracias :D

Julio

Rosa, gracias por tu visita y por contestar tan pronto. Nuevamente, mil gracias y desde la educación popular, con total certeza te puedo decir que sos una gran educadora.

Un abrazo y ya sabes que la escuela es también tu casa.

Jedimaster

Hola Rosa,tenía tiempo sin comentar en tu blog :(

Pero ahora volví y tengo una duda:¿cómo hago para usar este mismo truco pero con todos los widgets de la sidebar?Me gustaría que el mismo efecto usado en el footer de 3 columnas se lograra en la sidebar.Please,help me...

Rosa

Jedimaster...no entiendo :O supongo que sería añadir como se viene haciendo una sidebar, pero además otra más...¿donde meterías todo eso?
¿Qué espacio podrías dejar entonces a las entradas? Mucho, para tan poco espacio, pienso yo...

Jedimaster

Para ser más preciso,quiero decir exactamente que quiero dejar todos los widgets de la sidebar enmarcados de la misma forma en que están enmarcados en el footer con la menor cantidad posible de códigos.Fíjate que en tu blog los títulos de los widgets en la sidebar tienen borde y un color -o imagen de fondo/relleno,y cada widget tiene borde.

Rosa

Jedimaster, ya decía yo:D

Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/01/entradas-y-widget-enmarcados-por.html

Y esta para los títulos:
http://elescaparatederosa.blogspot.com/2007/07/imagen-o-color-de-fondo-en-el-ttulo-del.html

Jedimaster

¡Gracias Rosa!¡Lo hice y quedó espectacular!Eres un amor :) :-L ¡Solo debo arreglar unas ligeras cosas en un par de widgets y el truco quedará perfecto!

¡Mil gracias!

Rosa

Jedimaster gracias:$ ¡tu tambien lo eres!:D:-L

Kenneth Jack

Hola Rosa... buscando como implementar 3 columnas al fotter para bajar algunos elementos al fotter llegue a la entrada del 28/01/08...la hice y me resulto.. en los comentarios vi el enlace hacia esta entrada y tenia la duda si quitar lo que habia colocado antes de((b:skin)) en la entrada anterior..me arriesgue y la coloque tal cual dices aqui...y todo salio bien...mi pregunta es: es necesario dejar lo puesto antes ((b:skin)) de la entrada anterior? te lo pregunto porque no se si lo dijo jmiur o pizcos de que se deberia de eliminar ciertos codigos innecesarios, que no hacen ninguna funcion para que cargara mejor el blog...y la mas sencilla: como coloco un fondo que abarque las 3 columnas?...Saludos...
Pd: el truco lo estoy haciendo en uno de prueba primero...

Kenneth Jack

intente colocar mi comentario 6 veces..pense que era el formulario incrustado y lo hice al viejo estilo y nada..era el codigo :skin...como le hago en el futuro para colocar algun codigo en los comentarios y no me de error?...

Rosa

Kenneth Jack , si, en este caso cada código cumple su función, el primero controla la posición del bloque que forman las tres columnas, y el de esta entrada controla cada columna por separado.

Para poner un fondo de color, en el primer CSS, en esta parte:
#footer-columna-contenedor {
clear:both;
}
Colocas un background:
#footer-columna-contenedor {
background: #ddd;
clear:both;
}

Para publicar código mira aquí, sirve tanto en entradas como en comentarios:
http://elescaparatederosa.blogspot.com/2007/03/publicar-cdigo-en-el-blog.html

Kenneth Jack

Magnifico....me salio como queria...todo muy sencillo...MIL GRAAAAACIIIAAAAAAASSS:P...Saludos...

Esperanto a go-go

Hola Gem@, disculpá la molestia, pero no logro que las esquinas salgan redondeadas, copio el código tal cual y nada...puede ser que algo que tenga en la plantilla lo anule?
Agradezco tu ayuda.
Gaby.
Mi blog

Esperanto a go-go

Ay por favor disculpame soy muy distraida y te dije gem@ porque estaba leyendo ese blog tambien. Te pido disculpas de verdad!
Leyendo tu blog leí eso de que en IE no se ven las esquinas redondeadas y al verlo ahí no las veia:) Se me ocurrió entonces ponerle a cada widget en el post footer, una imagen de fondo de esquinas redondeadas pero no se como poner la imagen, alguna idea?
Miles de gracias y nuevamete te pido disculpas!
Ah y ya que estamos: fijate por favor arriba del todo de mi blog aparecen parentesis y llaves y no se como sacarlos!!
Gracias!
Saludos.
Gaby.

Rosa

Esperanto Eso que sale en la parte superior del blog es un error al copiar el código de un script que tienes colocados antes del </head> y que empieza así:
window.onload=function(){

Recuerda de donde lo sacaste y revisa que lo hayas copiado o colocado correctamente.

Hay otro error en el CSS de tu blog. Veo esto:
<form method="post" action="esperantoagogo@gmail.com">

Que no se que hace ahí, ni porque está, pero ahí no debe haber código HTML de ninguna clase...

Por otro lado, no puedes colocar nada en el footer de los widget sin hacer bastantes cambios en el diseño de tu plantilla, ya que los widgets de esa no tienen footer.

Esperanto a go-go

Muchisimas gracias por tu ayuda, pude sacar esos simbolos de arriba del blog buscando como dijiste. De hecho pertenecían a un código de nifty corners que no pude hacer funcionar asique borré todo.
Lo del html ni idea que hace ahí pero lo borré.
Miles de gracias por tu ayuda!
Gaby.

Adoradores

Hola.ya me aprendi este truco.lo puse en practica.me salio rekete bien.pero.la barra de los tres widgets de el footer son de un color como el de el menu horizontal que esta en tu ehader.no hay forma de cambiarle el color a la barra de eso.y tambien el color de fondo de ellos.?..donde hago eso?..es posible=??

Fabiana

:) ¡No sabes! ¡Estoy tan contenta que me he olvidado de dormir hoy! Mi blog cumple 6 meses e inaugura una nueva cara ¡¡¡GRACIAS A TI AMIGA ROSA!!! :D
Ya verás cuando puedas lo lindo que ha quedado, un 99% de las modificaciones han sido de tu mano, ACEPTO CRÍTICAS Y CORRECCIONES.
Me voy a dormir, jeje, UN ABRAZO ENOOOOOORME GENIAAAAAA.

Fabiana

pd: el 1% es el efecto mouseover del zorro en la sidebar. jajaja Ahora si me voy!!!

Rosa

Fabiana Nada de criticas, todo está ok :D

Por cierto, yo he quitado lo de pedir archivos a Blogger porque los muy... han quitado la página de pedidos...|O

Lille Skvat

Muchas gracias de nuevo :-)

Saludos

Lille Skvat
http://lilleskvat.blogspot.com

Viviana y Sofia

Ya lo vi y lo puse en practica, gracias.
Pero me quedan "despegadas" del cuerpo de mi blog y mucho no me gusta.

Voy a ver si personalizandolas quedan algo mejor

http://mamasybebesblog.blogspot.com/

RacHaV2

Hola Rosa Una Pregunta Mira amii Me Gusta Mucho los Colores i el Estilo de es Css Pero la Pregunta es que en el titulo de las Columanas es azul y Centrado Como Logro Poner azul y Centrado el de la sidebar wrapper ;)

Rosa

RacHaV2 Tienes varios blogs en tu perfil y como no me dices para cual de ellos es exactamente no puedo indicarte concretamente...
Para las plantillas de Blogger original el código a colocar tendría que ir en .sidebar h2{
y sería el mismo que ves en el CSS de las columnas en esta entrada.

RacHaV2

Rosa Pues Te Aviso Que No ya No es Nesesrio Como dises Sii estava en agregar el .sidebar h2{que No Tenia la Minima Luego Modificar unas Cositas y Listo Me quedo Bn Gracias ;)

Rosa

RacHaV2 Me alegro ;)

Paloma

Hola, Rosa.
He realizado los cambios en las columnas (poniéndole el fondo transparente) y el borde iré probando colores.

Quisiera saber cómo sería el código para que el borde fuera punteado y el fondo semitransparente.

Y me gustaría cambiar el tamaño de letra de las columnas. Sólo he conseguido cambiar la del título (que es la que no me interesaba).

Me puedes ayudar?

Gracias, Rosa.

El Bosque Mágico de Paloma

Paloma

Rosa, también me gustaría hacer más pequeña la letra de la sidebar..

Graciassssss de antemano.

Paloma

Rosa, hace algunos días te pedí ayuda para modificar varios aspectos de mis columnas. Supongo que se te habrán pasado por alto entre tantas peticiones pero si pudieras ayudarme, por favor... Disculpa que insista :$

Gracias :)

Rosa

Paloma Pues a decir verdad no te contesté a propósito en un primer momento, a veces lo hago cuando las preguntas que hacéis se positivamente que rebuscando un poco, podéis solucionarlo por vosotros mismos...

Se trata de añadir más "ordenes" en el mismo css de las columnas.

Borde punteado, cambias outset por dashed o dotted según el tipo de punteo:
border: 2px outset #b2b2ff;

Fondo semi transparente, añades algo así en el css:
filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;

Para el tamaño del texto, lo mismo que en el título pero añadido en las columnas:
font-size: 90%;

Paloma

Hola, Rosa, gracias por tu respuesta y disculpa por la molestia que mi consulta te haya podido ocasionar.

Creo recordar que antes que ésta sólo te he consultado en otra ocasión y, sin embargo, todo el "enriquecimiento" mejor o peor aplicado que existe en mis dos blogs, El Nido de Paloma y El Bosque Mágico de Paloma, son gracias a las indicaciones de tu página que han sido mi base y mi apoyo en la realización de todos los cambios.

Pensé que tu silencio podía ser por algo así pero yo no sabía dónde solucionarlo. Hasta he buscado tutoriales de html y CSS para principiantes pero no me daban la respuesta que necesitaba.

No estoy tan "suelta" con introducir nuevas órdenes e ignoro la forma de hacerlo correctamente e incluso ignoro las nomenclaturas de "punteado", por ejemplo, en inglés.

En cuanto al tamaño de la letra, por supuesto lo fui cambiando en las columnas, pero sólo me "respondía" el título de cada una.

Muchísimas gracias, Rosa, y te pido disculpas nuevamente por las molestias. Tampoco todo esto tiene tanta importancia pero cuando nos metemos en el "lío" parece que nos fuera la vida en ello... :D

Lo siento.

Rosa

Paloma Espero no haberte causado una impresión errónea con mi respuesta... verás, a menudo si soy rápida en contestar cuando la consulta es de este tipo, me encuentro con que ya lo han solucionado.
Me gusta dar margen a que las personas traten de encontrar la solución por si mismas, en tu caso, si había observado lo que dices...solo hay que ir a tus blogs para comprobar que muchas de las cosas que hay allí son sacadas de aquí sin mi ayuda, con lo que, la verdad pensé "seguro lo puede hacer sola"

Perdóname si te di la impresión de que me "fastidiaba" ayudarte o algo así...es solo un "truco" que empleo cuando la consulta no me parece demasiado complicada ni urgente, y que me evita trabajar de más en muchas ocasiones...

Lo dicho, perdona si te molesté y por supuesto, puedes consultarme cuando quieras lo que sea... procuraré espabilarme a contestar :D

Jorge Ángel Aussel

Hola Rosa, yo tengo implementadas las tres columnas y me gustaría resaltar todo el footer con una imagen de fondo que ocupe todo el espacio como en el escaparate. Cómo se haría para eso se viera así?

Gracias.

Producciones Conde

Hola Rosa muy Buenos dias... tengo una consulta, yo tengo mi Fotter de enlaces, no de tres columnas sino una sola columna, lo cierto es que lo modifique y todo esta perfecto, el pequeño detalle es que lo quiero centrado respecto al ancho total del blog, quisiera me echaras una manito y lo chequeras para ver que rollo con eso.. Y otro detallito es que en el primer enlace del footer (en este caso INICIO) me sale un punto y quisiera que me saliese el separador normal que hay entre los demas enlaces... un beso de mi parte y mil bendiciones para ti.. saludos.. Carlos

http://produccionesconde.blogspot.com

Rosa

Producciones Conde
Para evitar el punto, has de eliminar del código esto: <li class="inline"> y esto </li>

Y el centrado... yo lo veo centrado :o

EvilSeyer

Hola Rosa seguí tus pasos al 100% y los resultados fueron agradables todo funciona bien se ve excelente pero tengo dos pequeño problemas uno con los gatgets del pie de pagina, al momento de editarlo lo guardo y automáticamente se va a la side bar y trato de incorporarlo al pie de pagina y no se deja la única manera es eliminarlo y añadirlo desde el pie de pagina nuevamente pero al intentar editar de nuevo se va al side bar.
El otro problema es con un reproductor de vídeos que coloco en el pie de pagina el cual en los navegadores firefox y chrome se ve muy bien pero con IE8 el reproductor se reduce y se ve un margen no agradable.

Gracias por el Tuto Rosa

http://metalokus.blogspot.com

Rosa

EvilSeyer Si todo está correcto no deberías tener problema con los gadget... yo uso el mismo código en mi footer y funciona sin problemas.

En cuanto al reproductor supongo sea el código del mismo que no estará pensado para IE8, no puedo ayudarte ahí...

EvilSeyer

Rosa me ha sido muy util tu informacion genial aporte estoy en deuda contigo ya soy tu fan ;)

Gracias de antemano.

Helena González

Hola Rosa,

Antes de nada agradecerte todo tu curro, es increible todo lo que nos ayudas. Bueno, te cuento, estoy intentando poner las 3 columnas y me salen bien. El unico problema es que me gustaria centrarlo. Como puedo hacerlo??? que tengo que modificar??? Muchas gracias.

Por si le quieres echar un vistazo, la dicrección es
http://colesetenilenigualdad.blogspot.com/

Rosa

HelenaGracias!!:D

Creo que sería suficiente con aumentar los anchos de los gadgets... fíjate que cada columna en su código lleva un width: 30%; aumenta los valores en cada uno y ve usando vista previa a ver...

Helena González

Hola de nuevo Rosa,

He estado cambiando lo que me comentas, y aunque llevo un rato, hay algo que no funciona. Creo que puede ser por algo de la plantilla (no es de blogger), e igual por eso hay problemas. Asi que nada, lo quito y sin problema. Ya seguire intentando otras cosas.
Muchas gracias de nuevo por todo

Yeah! Positive

Rosa como podria hacer para ajustar el alto de las columnas? ya que me quedan de diferentes alturas.

Saludos
www.yeahpositive.com.ar

Rosa

Yeah! Positive Las columnas son como cualquier sidebar... según añades cosas cambia su altura...

Walter

ayuda con el footer de mi blog pleasee rositaaaaaa...no puedo darle el color de fondo que quiero, deseo que quede como el tuyo, es decir tu footer

Walter

se me olvidaba mi blog es este : http://miblog-deprueba.blogspot.com...espero rpta...y mucha ayudaaa rositaaaa

Rosa

Walter Toda la ayuda que puedo darte está en esta entrada y sus comentarios... solo fijate un poco y trata de comprender... no puedo modificar las cosas para todos y cada uno...

Walter

Entiendo q no tienes tiempo y que es muy trabajoso, trataré de hacerlo, gracias!

usuaia49

Rosa, es una suerte tener tu Blog como referencia para aprender cada día un poquito mas´.
Gracias

Martín Mundaraín

Hola rosa, no encuentro manera de poner el footer como lo tienes TU.

quiero que los banner de los directorios y los creditos se vean semejantes como lo llevas tu.

O SEA, VEO QUE DE AMBAS PARTES ESTAN PEGADO DE LA LINEA Q LOS SEPARA Y E GUSTA EL DISEÑO.

ayudame, mi blog es: http://reflexiones-sobre.blogspot.com/

Rosa

Martín Mundaraín Retira las <p> y </p> que cierran el código de la línea:
<hr align='center' color='#3b5998' width='90%'/>

Martín Mundaraín

Rosa no me funciona, los logos solo se pegan del contenido del footer, y yo quiero que se peguen de la linea. al igual que los creditos, que tambien quiero que se peguen de la linea.

Rosa

MartínPrueba poniendo esto en el CSS, antes de ]]></b:skin>

#footer-bottom .widget{padding: 0px;}

: : SEGMENTO

hola! sólo una duda: cómo determino el color de fondo donde están ubicados los 3 contenedores? tal como lo tiene tú, de color gris...
gracias!

Rosa

: : SEGMENTO Usando la id del contenedor de las columnas, o sea, lo mismo que en esta entrada:

#footer-columna-contenedor {color: #ddd;}

: : SEGMENTO

gracias Rosa, pero sólo cambiaron a gris los títulos, no el fondo...

Rosa

: : SEGMENTO Perdona, me confundí...

#footer-columna-contenedor {background: #ddd;}

: : SEGMENTO

muchísimas gracias! funcionó!

Patricia Ovies

Rosa,
Muchisimisimas gracias, queda precioso.... que avances, me va gustando lo que veo, y,
Como siempre un pero, no puedo cambiar el color del fondo de toda la zona, no sé la razón, incluyo background y el color, tambien he probado con una imagen y nada de nada, y además los títulos no me salen redondeados....

Rosa

Patricia Ovies Los títulos NO se ven redondeados en IExplorer... en ese navegador poco podemos hacer...

Toda la zona no es posible en tu caso añadir background, ya que el footer tiene el mismo ancho que el resto del blog....

Patricia Ovies

Rosa,
Gracias por responderme,
Ya sé que te estoy dando mucho la lata y lo lamento de verdad, quisiera aprender más deprisa pero me esta costando mucho entender.
He conseguido ponerle una imagen o dibujo de fondo, supongo que no he sido capaz de explicarme, queda debajo de las tres columnas y bueno, iremos viendo que dibujo es el mejor.
Para no volverte loca estoy tambien intentando aprender a traves de la ayuda de Eulalia y leyendo y leyendo sin cesar.
Por favor, perdoname si te molesto con tantas tontas preguntas.
Un abrazo y gracias por todo

Drawer 4 Everyone

Oye rosa, queda de maravilla, pero desearía hacer un pequeño ajuste y tu ayuda sería toda una maravilla.

Verás, con los estilo que atribuyes a las columnas, estas ocupan un porcentaje de el ancho de la pantalla, pero el problema es que con mi plantilla, si lo dejo con el porcentaje, bueno, mejor míralo tu misma.

Lo que quiero es que tengan unos atributos exactos (pixeles, vamos) pero cuando se los pongo el espacio entre unos y otros se va a... a florencia. :S

¿Podrías ayudarme, porfi?

Drawer 4 Everyone

¡Rosa, olvidalo, he podido hacerlo, en lugar de fijarselo en píxeles, lo que he hecho ha sido, siguiendo el patrón (o las miguitas de pan) que has dejado para la decoración del css, lo que he hecho ha sido una cosa quese me ha ocurrido mientras veia la tele, pegar un código de diseño encia de ]]> , y viene siendo este:

#footer-wrapper {
max-width: 900px;
margin-left : auto;
margin-right : auto;
}

Teniendo en cuenta que comparado contigo, El Potro o JMur son un pringao en conocimientos de HTML (programo flash, ¿sabes?) creo que me merezco una galleta :D

Felicidades por tener un blog de tan alta categoría, tan limpio y tan bonito, sólo te falta poner colgando en la cabecera un ambientador de pino XD

¡Un abrazo desde Bilbao, Rosa!

Rosa

Drawer 4 Everyone Ja,ja,ja, viendo la tele y "rulando" en la cabeza con lo del blog...¿a quien me recuerda eso? :$... Pensaré los del ambientador, ja,ja... ¿será igual que huela a limón?... es que me encanta :D

Y si... galleta con cacao :D

Magoplup

Hola Rosa muy interezante esta entrada la e aplicado en mi blog de pruebas y me a quedado bien pero tengo un problema quiero que el footer de mi blog quede como el tuyo jajaja si ya se has leido muchas veces eso verdad :P pero en esta ocasion es distinta la pregunta..

Veras quiero que el color o imagen que elija quede de lado a lado como en la entrada de el head con ancho completo en la que aplicando un background:$bgcolor mas la url de la imagen se ajusta perfectamente a el ancho de todo el blog pues bien creeme que lo e intentado de mil formas sin lograr el objetivo :( incluso e revisado la entrada de gem@ y tampoco encuentro esa respuesta por favor ayudame en esto.. te lo agradezco de antemano =)

A por cierto te dejo mi blog de pruebas por si lo quieres mirar http://nuevaspruebasalea2.blogspot.com/

Rosa

Magoplup La pregunta no es distinta... ni te imaginas la de veces que me la han hecho...
Es un poco complicado de explicar... se trata de "sacar" el footer del contenido del blog... voy a indicarte más o menos, pero procura usar siempre vista previa por si acaso...

Tu tendrás algo así al final de todo el código que has incluido para las columnas (míralo sin expandir los artilugios):

</div><div style='clear:both;'>
</div></div>
</div>
</div></div>
<!-- end outer-wrapper -->

Tendrías que mover la última parte de ese código, creo que sería esto:
</div>
</div></div>
<!-- end outer-wrapper -->

A donde comienza el código de las columnas, es decir, debajo de:

<!-- end content-wrapper -->

Podría haberseme escapado algo, quizá algún div, así que vista previa y pruebas...

Rosa

Magoplup Se me olvidaba, has de añadir en el CSS el color para el footer completo:

#footer-wrapper{background: #000;}

Magoplup

Rosita muchisimas gracias :) todo salio bien fui probando como me dijiste y en este caso el codigo ganador fue este jejeje :D </div></div>
<!-- end outer-wrapper -->

lo dejo para que tus seguidores no den tanta vuelta en eso de probar :)

Estoy muy agradesido Gracias besos y abrazos ;)

Por sierto este seria un buen tema para una entrada no te parece ;) Footer con ancho completo jajaja hasta titulo espero no te moleste :$ y nuevamente Gracias :)

Rosa

Magoplup No creas que no lo he pensado, pero dependiendo de cada plantilla o sus modificaciones, habrá más o menos divs ahí... ni pensar quiero en los comentariossss ja,ja,ja... :S

Patricia

Rosa,
Varias cosas,
Arreglé lo del traductor y encontré las mismas banderas para que quedara exacto, lo del ancho de las páginas estáticas espero que tu lo mires porqué como te dije no sé que puede ser, asi como el borde marrón debajo del footer que por más que quito y pongo cosas no sé donde está el problema, como te dije se ve en Firefox, no en IE.
Y quería preguntarte, además:
ya he añadido una pequeña lista de páginas de interés pero no consigo ni cambiar los puntos ni tampoco justificar el texto, ¿podrías por favor volver a echarme una mano?
Y gracias y muchas, como siempre

Rosa

Patricia Si no recuerdo mal, te contenté a lo de las páginas estáticas en otro comentario como "Patricia Ovies"... revisalo.

Patricia

Si, Rosa, gracias, revisado.
Como me contestaste hoy supongo que nos hemos cruzado. Si, está en 700, eso no lo modifiqué nunca, no sé que pueda ser, por eso te preguntaba. Espero tu sapiencia para eso y para lo demás
besos y gracias otra vez

Patricia

Rosa,
viendo viendo, tambien en la columna de la izquierda, la primera del footer los gadgets quedaban muy pegados así que he incluido un
para separar cada uno de ellos, aunque parece que el primero queda algo más separado del segundo. ¿Es lo que tenía que hacer?
Gracias y más besos

Ezeguko

¡Hola Rosa!
Estuve realizando modificaciones, ¡pero no logro hacer que el color de fondo ocupe el ancho total de la pantalla! ¿Qué hago?
¡Saludos amiga!

ElJulian

Hola Rosa,

Impresionante tu blog, me está ayudando a darle un giro al mio muchísimo.

Oye, he dividido el footer en las 3 columnas, pero al añadir los scripts se me desfasan por todo el footer. Como has conseguido centrar el contenido de las 3 columnas para que te quede asi de genial...

un saludo

Rosa

ElJulian Tal como explico en esta misma entrada.

Rosa

Ezeguko En comentarios anteriores respondo a eso, aunque es difícil concretar a que en cada plantilla pudiera ser diferente...

Ezeguko

¡Muchísimas gracias Rosa por tu ayuda de siempre! Un abrazo.
Trecarunga

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S