Cómo quitar el borde de las imágenes en tu blog


Para quitar el borde que sale en las fotografías de nuestro blog debemos hacer lo siguiente:

1) Vamos Diseño
2) Edición HTML
3) Buscamos lo siguiente (tecleamos Ctrl+F para agilizar la búsqueda): .post img {
4) Veremos que al lado nos aparecerá algo así: { margin:0; padding:3px; border:1px solid #444; }
5) Tan sólo debemos cambiar en border el 1px por 0px.

Clicamos en vista previa y si todo está bien guardamos la plantilla. ¡Listo!

10 comentarios:

  1. hola, te hago una consulta:
    yo quiero colocarle un borde a las imagenes pero no se como. fui a ----.post img {
    padding:4px;
    border:1px solid $bordercolor;---- pero no ocurre nada.
    vos sabes?!
    gracias

    ResponderEliminar
  2. Hola Benjamin. Gracias por tu consulta.

    A ver que me aclare, tus imagenes no tienen borde y quieres que lo tengan. Hasta puesto borde: 1px; y no ocurre nada. Comprueba que este la ;

    ResponderEliminar
  3. Hola, cómo estás?
    Hace un tiempo que no te dejo mensaje. No significa que no haya pasado por tu sitio. De hecho he aplicado muchos de tus concejos y siempre fueron con éxito.
    Hoy quería hacerte esta consulta: quisiera eliminar el border de una imagen en particular de la entrada sin que afecte al resto. Se trata de un botón que diseñe para descarga y no me gusta que tenga borde, pero quiero que el resto de las imágenes lo conserven. ¿Es posible hacer esto?
    Te mando un gran saludo y gracias

    ResponderEliminar
  4. Hola Remy. ¡Me alegro mucho de volverte a ver por aquí! Cuando estés creando una entrada y hayas adjuntando una imagen, pon la entrada como HTML, allí verás el código HTML de la imagen con su enlace etc etc. Entre el código verás que pone img border y hay un valor. Quítalo o añádelo a tu gusto.

    Un saludo y gracias a ti.

    ResponderEliminar
  5. Aporto, en algunas plantillas aparece el codigo de otra forma deben dejarlo asi.

    .post-body img {
    padding:0px;
    background:#ffffff;
    border:0px solid #ffffff;
    max-width:495px;

    Cambie los 1px a 0px y puse los colores de de fondo y borde en blanco como el fondo de mi blog, asi no habra problemas con imagenes en formato PNG.

    ResponderEliminar
  6. Hola Alfre2Flores. Sí, puse que en la entrada que en la plantilla "aparecerá algo parecido a"... Lo importante es cambiar el valor de 1px a 0px. Gracias por tu aporte compañero. Un saludo.

    ResponderEliminar
  7. Hola, intento quitar el borde blanco de las imagnes de mi blog, pero como he utilizado una de las nuevas plantillas de diseño (Watermark), no me queda claro donde debo realizar la modificación que indican mas arriba.
    En el diseño HTML aparece asi:

    /* Posts
    ----------------------------------------------- */
    .post-outer {
    padding: 15px 20px;
    margin: 0 0 25px;

    background: $(post.background.color) $(post.background.url) repeat scroll top left;
    _background-image: none;

    border: $(post.border.style) $(post.border.size) $(post.border.color);

    -moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
    -goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
    box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
    }

    h3.post-title {
    font: $(post.title.font);
    margin: 0;
    }

    .comments h4 {
    font: $(post.title.font);
    margin: 1em 0 0;
    }

    .post-body {
    font-size: 105%;
    line-height: 1.5;
    position: relative;
    }

    .post-header {
    margin: 0 0 1em;

    color: $(post.footer.text.color);
    }

    .post-footer {
    margin: 10px 0 0;
    padding: 10px 0 0;

    color: $(post.footer.text.color);
    border-top: dashed 1px $(widget.alternate.text.color);
    }

    #blog-pager {
    font-size: 140%
    }

    #comments .comment-author {
    padding-top: 1.5em;

    border-top: dashed 1px $(widget.alternate.text.color);

    background-position: 0 1.5em;
    }

    #comments .comment-author:first-child {
    padding-top: 0;

    border-top: none;
    }

    .avatar-image-container {
    margin: .2em 0 0;
    }

    Done debo realizar la modificación, es aquí o en algun otro sector del HTML ?
    Gracias por su ayuda, no soy muy habil en estas cuestiones.

    Saludos

    ResponderEliminar
  8. no encuentro esa parate en mi html, lo busque con Ctrl F pero nada :S... yo quiero ponerle borde a algunas imagenes... espero puedan ayudrame, gracias

    ResponderEliminar
  9. Hola Claudia, para encontrar la parte de código que te dicen, tienes que ir a plantilla y darle al botón de plantilla antigua que hay en la parte inferior de la página, allí Control+F y localizarás el código, aunque tengo que decir que yo tmb estoy utilizando una plantilla nueva para aun nuevo blog y siguiendo estos pasos tampoco puedo quitar el borde de la foto. :(

    ResponderEliminar
  10. Hola! Esto sirve para la imagen del blog en general, pero si entras a una entrada del blog, las fotos siguen teniendo el borde.

    Cual habría que editar para quitar el borde de las de las entradas de blog?

    Gracias

    ResponderEliminar