Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Quitar el borde de las imágenes

En las plantillas de blogger podemos encontrarnos con frecuencia un pequeño detalle que "personaliza" las imágenes del blog. Se trata del borde que las enmarca y que tal vez no te guste conservar.

Para deshacerte del marco tan solo debes hacer lo siguiente:

Diseño>Edición de HTML>expandimos artilugios



Busca este bloque de CSS en la plantilla (o de aspecto similar):

.post img {
padding:4px;
border:1px solid $bordercolor;
}

Ahora solo necesitas reemplazar 1px solid $bordercolor por el término none.

También podrás cambiar el valor 1px por 0px, lo que aportará un grosor "invisible" (de cero píxeles) al borde.

En caso de querer quitar el borde a la imagen del gadget "Sobre mí" que hay en tu sidebar, busca este otro bloque y sigue el mismo procedimiento:

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

Guarda la plantilla para terminar.

JOANPA dice...

Viejo lo del marco igual no funciona, necesito aplicar en mi blog
administracionunivalle.blogspot.com, en los links de descargas tengo una imagen transpatente pero no quiero que me salga el marco que rodea al link.


Te agradeceria si me pudieras ayudar

Jaime Trujillo Escobedo dice...

Hola JOANPA, verás eso debe ser porque tu plantilla es tuneada, busca este bloque en lugar del que mostré en el truco...

a img {

border-width:0;

}

Puede que esté situado debajo de:

Hyperlinks *
************************************************/
Aunque depende de la plantilla :-) si sigues sin poder hacerlo, dímelo y te ayudo más :-) un saludo!!

JOANPA dice...

Hola viejo, gracias por responder pero ya lo pude resolver.

}
.post img {
padding:4px;
border:1px solid $bordercolor;
}

En esta parte del codigo fuera de cambiar el padding a 0. el border tambien lo tube que cambiar a 0 px.

y ya esta solucionado. Gracias de todos modos me fue muy util este blog.

Jaime Trujillo Escobedo dice...

Hola JOANPA, me alegra que lo pudieses hacer, esque creí que tu plantilla, al ser tuneada, no tendría esa etiqueta, (muchas no la tienen) un gran saludo! :-)

JOANPA dice...

la verdad es que en mi plantilla aparece asi.

.post img{margin-top:0;margin-right:0;margin-bottom:5px;margin-left:0;padding:0px;border:0px solid #969494}
blockquote{margin:.75em 0;border:1px dotted #969494;border-width:1px 0;padding:5px 15px;color:#3c7f8f}

donde padding:0px;border:0px fueron los valores que cambie, porque originalmente eran 4px y 1px

Ahi le dejo porque a muchos tambien les puede pasar.

Jaime Trujillo Escobedo dice...

Así es JOANPA, algunas veces también aparece así, gracias por el aporte :-) un abrazo0! :-)

Marga dice...

HOLA Jaime !!!
Necesito de nuevo tu ayuda ...
Verás, queria buscar este codigo en un blog que estoy haciendo y soy incapaz de encontrarlo.

p {padding: 0 0 4px; margin: 0;}
form {margin: 0; padding: 0;}
img {border: 4px double #696969 ;
}



Encuentro este :

img { padding:0; margin:0; border:none; text-align:center;}
hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height:1px;}
hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height:1px;}
.red { color:#7f262e;}

form { padding:0; margin:0;}
input { font-family:'Verdana'; color:#282b31; font-size:11px;}
textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}
select { font-family:'Verdana'; color:#282b31; font-size:11px;}


Puede sero lo mismo??? es que me da miedo "destrozar" algo jejeje.

Lo que quiero hacer precisamente es poner bordes a las imágenes.

Gracias
Marga

Jaime Trujillo Escobedo dice...

Marga, no te preocupes, eso es fácil, además tu código es prácticamente igual ;-D para añadir un borde en las imágenes, debes hacerlo así:

img { padding:0; margin:0; border:1px solid #000000; text-align:center;}

hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height:1px;}

hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height:1px;}

.red { color:#7f262e;}



form { padding:0; margin:0;}

input { font-family:'Verdana'; color:#282b31; font-size:11px;}

textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}

select { font-family:'Verdana'; color:#282b31; font-size:11px;}

Te explico lo que hice...

Añadí la línea: 1px solid #000000 en la definición "border". El grosor está en 1px, si quieres puedes cambiarlo aumentando la cifra ;-D el estilo lo puse en solid (normal) pero puedes usar dotted (punteado) groove (estilo marco) dashed (líneas) double (normal pero doble) etc :-D

¡Suerte amiga! :-)

Marga dice...

Hola Jaima, ya lo probé y salió perfecto, pero me gustaría que echaras un vistazo, si puedes ...
Me aparece el mismo borde a un lado y otro de la sidebar !!!!
Te dejo el enlace
elblogdelapebel.blogspot.com
Gracias y que tengas unas felices vacaciones !!!!
Marga

juen dice...

Marga, no entiendo a lo que te refieres, este truco es para quitar el borde en las imágenes... las que ví tienen borde :-S explícame un poco mejor lo que quieres hacer y te ayudo ;-)

Laube Leal dice...

Nada, que ese código que tengo que encontrar, no está en mi plantilla... Ayyyyyyyyy... es que no hay manera. No sé si es que busco mal... Pero se supone que el buscador (CTRL F) tendría que encontrarlo, no?

Jaime Trujillo Escobedo dice...

Laube, no siempre es necesario usar el buscador, es más, algunos códigos no aparecen con el buscador por que llevan espacios o varían según la plantilla :-S

El bloque de la imagen que indica que tiene borde está un poco más arriba de esta línea:

/* Comments
----------------------------------------------- */

Es este:

.post img {
padding:4px;
border:1px solid #xxxxxx;
}

Simplemente cambia el 1 por 0 y listo ;-D

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo