Eliminar el borde a las imágenes de un "post"

Hola amig@s!

¿Cuándo agregáis una imagen a un artículo aparece con un borde?? ¿Un borde sombreado??




Vamos a eliminarlo comentando unos estilos de nuestra plantilla.









El día que redacté mi primer artículo y fuí a añadir una imagen observé que le ponía un borde sombreado. Este efecto no era lo que yo quería así que inspeccioné que css me estaba añadiendo este borde y lo comenté.


Si tampoco os gusta este estilo que añade blogger automáticamente lo eliminaremos en un periquete.




Para eliminarlos tendremos que ir a la vista "Template" de nuestro interfaz blogger. Dentro de "Template" seleccionamos Edit HTML"



Se nos abrirá un editor de texto en el que aparece la plantilla de nuestro blog.

 *Si os asusta tocar no tenéis más que copiar el código y pegarlo en un documento por si luego quereis volver atrás . Si hacéis algo raro no tenéis más que pegar el código original enterito y ya está. Aunque bueno, ya sabéis que mientras no guardéis o apliquéis cambios no pasa nada.

Ahora vamos a buscar "moz". Para ello pinchamos sobre el código y con la combinación de teclas "ctrl+f" se nos abrirá un buscador. Este nos facilita la búsqueda dentro del código de nuesra plantilla. Introducimos "moz". 



Buscamos "moz" hasta que encontremos el código que se muestra en el recuadro:  

* para saltar de una búsqueda a otra pulsamos tecla "enter". Esto lo digo porque es posible que en vuestra plantilla aparzca "moz" alguna vez más antes de encontrar la clase que queremos.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: $(image.border.small.size);
 background: $(image.background.color);
 border: 1px solid $(image.border.color);
 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Lo que queremos eliminar es la propiedad de borde a nuestra imagen. Para los distintos navegadores se denomina "border", "-moz-box-shadow", "webkit-box-shadow" y "box-shadow" . Podríamos poner a cero los valores en píxeles. Yo he optado por comentar esas propiedades y listo. Cuando comentamos un trozo de código es como si lo eliminásemos. Pero así lo tenemos ahí por si alguna vez queremos volver a ponerlo.

Comentamos la propiedad de borde de imágen para los distintos navegadores introduciendo "/*" y "*/" dónde se muestra a continuación.


Vuestro código tiene que quedar de la siguiente manera:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
   padding: $(image.border.small.size);
   background: $(image.background.color);
/* border: 1px solid $(image.border.color);
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
   box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);*/
}


Guardamos los cambios y ya está listo.

RESUMEN: Buscar los css que aplican el borde a la imagen (en los distintos navegadores) y comentarlos con barra lateral asterisco, asterisco barra lateral.




Saludos y 

1 comentario:

  1. Muchas gracias por los consejos, la verdad es que una imagen con el borde no queda bien ;).

    Un besito
    www.mispequenossecretos.com

    ResponderEliminar

INSTAGRAM @missmint_design