68

Quitar el borde a las imagenes.

Algunas plantillas de Blogger vienen con el borde de las imagenes que añadas incluido, si no te gusta puedes quitarlo de una forma muy simple:
Localizas en tu plantilla en modo Html, esta parte del código:
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}


Cambias el valor de "border" por 0, y listo.
Si también quieres quitarle el borde a la imagen que se muestra en tu perfil, localizas esta parte del código en la plantilla y sustituyes el valor de "border" por 0 igual que antes:

.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $bordercolor;
}

Entradas Relacionadas:

68 comentarios:


Azul...

¡Genial! Este finde me pongo a practicar (las lentas necesitamos parctica y paciencita, ja mía =o)

Ya puestas y como te has convertido en mi asesora de imagen, ¿cómo hago para que los links que coloco se abran en una ventana aparte?????

Otro besote y perdona a esta pesá que es tan fan de tu blog!!!

Anónimo

Pesada dice...ojalá todas las visitas tubieran tu generosidad a la hora de dejar un comentario.
Para abrir el link en ventana aparte busca en la pestaña "trucos blog" el post "abrir página en una ventana nueva" allí lo explico.
Besotess!!!

Azul...

Lo vi luego de dejarte el comment anterior, pero ´se me enredó la cosa en la oficina y ya no pude decirte. Lo dicho ¡eres una genia!

vicentz

Me funciono muy bien, gracias por este y otros comentarios de tu blog.

Anónimo

Vicente, gracias a ti!

HISPANO F.C.

Hola Rosa! Gracias por los consejos que dia a dia nos das a todos nosotros. Una consulta hay alguna forma de cambiar el tamaño (predeterminado) que nos da blogger para subir imagenes en los post? Lo que me pasa a mi es que me quedan muy chicos en "grandes" y no llegan a cubrir todo el ancho de la columna.
GRACIAS
www.hispanofc.net

Anónimo

SR. HISPANO , pues no, no hay ninguna forma que yo sepa.

Nano

Jejeje, más simple de lo que pensaba. Gracias Rosa, siempre salvando.

Anónimo

NO ME APARECEN ESOS CODIGOS, tengo blogspot y en mi Edicion HTML,no me aparecen los codigos que muestras, sera por la plantilla moderna, en fin necesito ayuda urgente.

es muy poco etico los margenes del perfil y de las imagenes con vinculos, si alguien sabe alguna ayuda

Salu2!

Anónimo

kco, no es porque la plantilla sea moderna, es porque no es un diseño original de Blogger.
Prueba colocando esto:
a img{ border-width:0}

En tu código por ejemplo después de:
.image {
float: left;
margin: 0;
}

Usa la vista previa porque no estoy segura que funcione en esa plantilla.

Anónimo

me resulto de maravilla!, altoque muchas gracias era lo que estaba buscando...

y gracias por contestar tan rapido

Domi

Hola! Es primera vez que veo este blog. Gracias! Me ayudaste, necesitaba esto, estube todo un dia buscando y ninguno me seriva, en verdad muchas gracias!, sigue asi, vendre a visitar esta pagina cada ves que tenga una duda. bueno adios, enserio muchas gracias.

Guri

Gracias lo aplique en mi blog www.ideapy.com/guri

-The.DarkSearcher-

Wow, gracias Rosa, me has savado la vida, y el diseño mi blog :) porque no combinaba el borde ese...grax

Germánico

Me sirvió, a igual que "kco" no me aparecía ese código, pero agregando a img{ border-width:0} después del código que tenia pude hacerlo.

Gracias Rosa.

Anónimo

Germánico Genial que lo hayas intentado guiándote por comentarios anteriores y más genial aún que lo hayas conseguido ;) no todos leen los comentarios antes de preguntar y muchas veces en ellos está la mejor ayuda.

el secreto se protege solo

rosa gracias, gracias,gracias, los cambios son faciles de hacer por que lo explicas de maravillas :)

Rock And Pop

Rosa:yo quiero ponerle el borde a las imagenes como hago!?

Rock And Pop

mi plantilla de blogger es herbert

Anónimo

RoCk AnD pOp Pues añadir en el CSS el código que ves en la entrada:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

Hazlo justo antes de ]]></b:skin>

LokoGB

Rosa te cuento, siempre cuando inserto un enlace a un texto o imagen aparece un subrayado que no he podido quitar hasta ahora. ¿Qué puedo hacer?

Mira, así aparecen (imagen)

.

Gracias!!! lo hice y resultó.

Angélica.

sixto76

Rosaaaaaaaaaaaaaaaaaaa tengo un problema sabes que al añadir una imagen en el footer o mejor dicho añado un formuario de comentarios con una imagen la imagen del footer, sale con un marco morado, esto solo pasa en IE en google chrome me sale normal, hay manera de quitar ese borde?

Anónimo

sixto76Coloca esto en el CSS:
a img{ border-width:0;}

antonegro

hola rosa e leido el post entero y aun asi no e pòdido quitar el borde de mis entradas y es k en mi plantilla no aparecen los codigos k nombras y intentando hacerlo entrada por entrada el borde ya viene a 0 y despues a mi me sale con borde este es mi blog http://antonegro.blogspot.com/
y la plantilla k uso es "Chaotic Soul"
muchas gracias de antemano y felicitacione por tu trabajo k tanta ayuda presta a novatillos como yo 1 saludo

Ariel Mode

hola rosa te escribo para pedirte si sabes como cambiar de color el borde de la imagen en miniatura de los comentarios he estado intentando pero no hay caso, de antemano gracias

Rosa

xCanibalxDebería ser aquí:
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #191919;
border-color:#191919;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}

Rosa

antonegro ¿Qué borde?... yo no veo ninguno.

antonegro

Perdon Rosa kizas me e equivocado al realizar la pregunta m referia al recuadro blanco k enmarca alguna de las fotos k aparecen en las entradas
GRACIAS

Rosa

antonegro Las únicas imágenes que veo con fondo blanco, son parte de la imagen... eso no puede quitarse con ningún código... o usas imágenes .png que llevan fondo transparente o editas esas... pero no puedes hacer nada con códigos...:o

antonegro

muxas gracias Rosa perdona no sabia lo del formato png soy un poko novato y m e liado

Ariel Mode

hola rosa primero que nada muchas gracias por tu rápida respuesta, te lo agradezco mucho,
pero me temo que no funciona ya que yo había intentado con esa parte del código pero nada
no se que sera no he modificado ninguna parte de la plantilla como para que no funcione,
ya me rendí, bueno rosa suerte y saludos gracias de nuevo xaup

Anónimo

xCanibalx¿Has cambiado y puesto el mismo color en las dos líneas?:

background:none repeat scroll 0 0 #191919;
border-color:#191919;

Dr. Page

Hola Rosa. Disculpe que la moleste pero mi blog comenzó a presentar un marco en las imágenes que tienen hipervínculo cosa que no hacia, sale en Firefox e IE pero no en Chrome, hasta la imagen que nos lleva inicio de la pagina le salió el marco y no se como hacer para eliminarlo, cuando intento algo desaparece el hipervínculo, si me pudiera ayudar se lo agradecería, ya que afecta bastante la estética del blog, Me conformaría por lo menos quitarle el de la imagen de la cabecera, sin mas agradeciendo su ayuda, Dr Pagé.

Rosa

Dr. VictorColoca en el CSS algo como esto:
a img{ border-width:0;}

Dr. Page

Amiga nada, eso lo había intentado, no se le quita, lo curioso es que antes no salía así, fue de un tiempo para acá. Este es el código que tiene.

.post img {
border: 1px solid #E3E4E4;
padding: 2px;
background: #ffffff;

Rosa

Dr VictorEsos cambios extraños en los enlaces, se producen por usar Word en Blogger, los dos son incompatibles...

Te dije que colocases: a img{ border-width:0;} en el CSS, es decir antes de ]]></b:skin> tengas o no tengas ese código que me muestras que yo ya se tienes...

Si lo que te digo y aplicado tal como te digo no funciona, tendrás que editar las entradas donde has copiado de Word y deshacerte de todo el código que word incluye, es decir, editarlas en el editor de Blogger.

Dr. Page

Hola Amiga muchas gracias funciono, lo que me dices de Word solo los comentarios es lo que escribo copio y pego, los post tendría que revisar, trato de pasarlo primero por Bloc de Notas, muy agradecido, Gracias

Facu.Marin

Rosa, estoy haciendo un blog www.sentimientoquemero.com.ar y queria saber como sacarle el borde a la imagen de la cabecera, ya que aparece con un borde blanco :/ como se lo puedo sacar ya que queda feo? Gracias.

Anónimo

Facu.Marin Editando la imagen... el borde lo tiene la propia imagen, no es nada en la plantilla.

mushroom

hola. te cuento que tengo este problema del borde en las imágenes y no he podido solucionarlo porque no encuentro esa parte del código HTML que explicás en el post

antes usaba una de las plantillas predeterminadas de blogger y no tenía este problema, pero hace unos días cambié por una plantilla llamada "grunge era" y automáticamente le apareció un molesto borde blanco a todas las imágenes de mis posts

si me podés ayudar con este inconveniente te estaría eternamente agradecido

mi blog es: http://rockespacial.blogspot.com

saludos!

mushroom

...ah, te dejo la parte del código HTML que creo se refiere a las imágenes de la plantilla que uso actualmente:

/* Images */
img{background:#FAFAFA;border:1px solid #DFBFBF;padding:8px;}
img.float-right{margin:5px 0 10px 10px;}
img.float-left{margin:5px 10px 10px 0;}
code{margin:3px 0;padding:20px;text-align:left;display:block;overflow:auto;font:500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;/* white-space: pre; */border:1px solid #DDC3A5;background:#F0E5D3;}
acronym{cursor:help;border-bottom:1px dotted #895F30;}
blockquote{margin:12px 25px;padding:12px 15px 12px 55px;font-weight:400;font-size:17px;line-height:1.6em;font-style:italic;font-family:Georgia, 'Times New Roman', Times, Serif;color:#2C2E3E;border:1px solid #DDC3A5;background:#F0E5D3 url(http://4.bp.blogspot.com/_73i0fjAB_Hw/SUflzW0ljTI/AAAAAAAAAq8/Ii-y71-gy48/s1600/quote.gif) no-repeat 15px 15px;}
strong{font-weight:700;}

...disculpame por las molestias y muchas gracias desde ya. saludos!

Anónimo

mushroom En esta línea, cambia donde dice 1px por 0px
img{background:#FAFAFA;border:1px solid #DFBFBF;padding:8px;}

Flinx

Rosa me quedo perfecto solo que te queria preguntar como hacerle para que en el post de las entradas apareca una imagen de fondo y al entrar al post aparesca otra imagen?

Anónimo

Flinx Para eso habría que usar las condicionales de Blogger y no es algo que pueda responderse en un comentario.
Mira aquí el uso de las condicionales:

http://vagabundia.blogspot.com/2010/04/blogger-y-el-uso-de-codigos.html

Unknown

hola!! mi problema es (si me pueden ayudar) que en las ventanas popup me sale un borde izquierdo y superior blanco, y yo nolo quiero!! ja! como se puede eliminar?¿?¿ grax!!!

lucianogonzalez84@hotmail.com

Jorge A. Garrido

Buenas a todos. Hace muy poco que empecé con estos de los blogs (proyecto literario ;) ) pero ya le estoy cogiendo el truco a esto del código html (llevo,,, dos semanas??? :p). Pero me desesperaba ese recuadro blanco que le salió a mi imagen de la entrada. Seguí sus pasos y no se me resolvía así que repasé el código y encontré que en mi blog pasaba por esta instrucción:

.post img, table.tr-caption-container {
border:1px solid #444444;
padding:1px;
}

Si alguien más ve que con lo dicho en el resto de los comentarios no le sale nada, que busque esto y cambie por 0 el valor del border, claro está. Un saludo

Anónimo

Jorge Garrido Tal como dices es ahora, en las nuevas plantillas del diseñador, así es.

arkitekton

Hola Rosa. He hecho mi primer post en el Blog, he revisado el codigo HTML de la imagen, con border="0", y sigue sin quitarme el borde, al igual que con cualquier imagen que pongo, y no se como quitarlo. Te dejo la direccion del blog que acabo de crear es http://urarchitecture.blogspot.com.
Aparte no se como alinear la fecha de arriba con los post de entrada.
Muchas gracias Rosa por este blog y todos los comentarios utiles que nos das.

Anónimo

Localiza esto:
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
Y déjalo así:

.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
}

arkitekton

Hice lo que me has dicho pero sigue haciendome las entradas con la imagen con borde negro, como con sombra. ¿Se te ocurre algo mas que pueda hacer?
Gracias por adelantado. Un saludo Rosa.

arkitekton

Ya lo hice Rosa, y funciono, es que tenia que hacer lo que me dijistes en dos partes de la estructura de HTML. Gracias. Un saludo.

Anónimo

gracias gracias gracias

Unknown

muchas gracias, con esto ahora las ecuaciones de mi blog ya no ocupan tanto espacio :)

VC- Corpsegrinder

Hola, disculpa, y si quiero quitarle el borde a una sola imagen de un post cuando hay varias? Lo que pasa es que si pongo en la plantilla el codigo

border: 0px double;

me quita el borde de todas las imagenes... y si lo dejo asi

border: 3px double;

y en la imagen del post donde no quiero borde pongo la propiedad border="0" me sigue apareciendo el borde... y no se como hacerle, tengo aproximadamente 2 imagenes por post... y quiero que el borde solo aparezca en una, se puede?

Saludos y agradeceria tu respuesta... te cuidas. la direccion del blog donde quiero hacer eso es http://distilled-brutality.blogspot.com/

Anónimo

VC- Corpsegrinder Puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2007/06/imgenes-con-o-sin-borde-en-las-entradas.html

RinoPC

Hola Rosa; Felicidades por tu Blog es muy bueno. Sabes te queria hacer una consulta, resulta que en mi blog hay mucho espacio entre mis post, eh tratado de dar con el problemas pero no logro dar, talvez me puedas ayudar. Gracias.

RinoPC

me olvidaba, este es mi blog: http://rinopc.blogspot.com

Anónimo

RinoPC Reduce el valor del margin en .post-footer { y si es necesario el valor del padding-bottom en .post {

RinoPC

@Rosa
Balla, muehcas gracias, ya puedo solucionarlo y gracias a ti.
Además de reducir el margin en post-footer tambien reduci el margin en .post {
Una ves más muchas gracias.

ivan

hola rosa mira mi blog es este: http://bloodangel-83.blogspot.com/
me gustaria muchisimo quitar el borde de la imagen principal. si sabes como hacerlo dime porfabor.

Anónimo

ivan Cual es para ti la imagen principal?

ivan

es la unica imagen que tengo la que esta a la izquierda que se sale un poco del margen hacia la izquierda y no entra. me gustaria quitarle todos los bordes para que encage mejor y no se note que sale por un lado.
Gracias T_T toi desesperado por ello

http://bloodangel-83.blogspot.com/

Anónimo

ivan Eso no es un borde, es el fndo del gadget... reduce la imagen unos pixeles y no tendrás ese problema.

Nati Cortez

Hola Rosa!!!

Gracias, si me funciono...

Saludos,
Nati

Irene M

Gracias!

A TEXTO

¡Hola!
¿Podrás entrar a http://desgrabacionesatexto.blogspot.com/ y decirme si hay alguna forma de quitar ese marco que bordea todo el cuerpo central? No encuentro la forma de hacerlo...
¡Gracias!
Muy útil tu página. Saludos.

Anónimo

A TEXTO Bien, veo que ya usas otra plantilla sin el marco en Outer...

Publicar un comentario

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