Hoy os enseñaré dos métodos estupendos para eliminar de forma definitiva o colocar de forma selectiva los bordes, sombras y el horrible relleno blanco que vienen por defecto para las imágenes en muchas plantillas de blogger (sirve tanto para clásicas como personalizadas). Con lo cual, veremos como lidiar definitivamente con estos parámetros con esta guía resumida y bien explicada.
Pues bien, lo primero que haremos será dirigirnos a la parte de Tema > Editar HTML de nuestra plantilla y abrimos el buscador del editor presionando Ctrl + F. Si se muestra en el navegador, haz click en el cuadro de códigos para que te aparezca así.
Hecho esto, para continuar debes elegir entre los dos métodos
que he publicado para llevar a cabo esta modificación.
que he publicado para llevar a cabo esta modificación.
Antes de empezar con este método es imprescindible ocultar los códigos de los bordes y sombras de nuestra plantilla para posteriormente poder asignarles en las entradas el atributo class y así aplicar estos efectos de forma precisa e individual.1. MÉTODO PARCIAL
Para ello pegaremos el siguiente texto en el buscador del editor 🡺
Se nos resaltarán de amarillo dos líneas de nuestra plantilla tal y como te he resaltado yo también en el ejemplo de abajo:
El primer código.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, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.post-body img, .post-body .tr-caption-container {
padding: 10px;
}
El segundo código
Los valores marcados de rojo corresponden consecutivamente al ancho (en píxeles) del borde y de sus sombras.
Los valores marcados de azul corresponden al color e intensidad de las sombras.
Los tres primeros dígitos "0, 0, 0" hacen referencia al color (en rgba) de las sombras.
El último dígito ".5" hace referencia a la intensidad, siendo el valor mínimo 0 (transparente) y 10 (opaco) el máximo.
Los valores
El valor marcado de morado corresponde al ancho (en píxeles) del molesto relleno blanco exterior.
Este parámetro puede encontrarse tanto dentro del primer .post-body img como del segundo, pero nunca en ambos a la vez.
Ahora cambia todos los valores que hay coloreados en el código del ejemplo de arriba por ceros. Debe quedarte algo parecido a ésto:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.border.color);
border: 0px solid $(image.border.color);
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
}
.post-body img, .post-body .tr-caption-container {
padding: 0px;
}
Imagen por defecto de blogger Imagen sin ningún estilo aplicado
Ahora sí, localizamos la etiqueta
Los valores marcados de rojo corresponden consecutivamente al ancho (en píxeles) de las sombras y del borde.<style>
#conborde {
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
padding: 0px;
background: none;
border: 1px solid #000;
border-radius: 0px 0px 0px 0px;
}
</style>
El código #000 que ésta al final del valor border: hace referencia al color del borde (en forma hexadecimal)
Los valores marcados de azul corresponden al color e intensidad de las sombras.
Los tres primeros dígitos "0, 0, 0" hacen referencia al color (en rgba) de las sombras.
El último dígito ".5" hace referencia a la intensidad, siendo el valor mínimo 0 (transparente) y 10 (opaco) el máximo.
El valor marcado de morado corresponde al ancho (en píxeles) del relleno blanco.
El código none dentro del valor background: corresponde al color de ese relleno blanco (se escribe en forma hexadecimal).
Los valores marcados en naranja corresponden a la cifra del redondeado (en píxeles) que aplicaremos a cada una de sus esquinas.
Ahora solo quedaría aplicar este otro código justo entre medias de los atributos
Debe quedarte de esta forma para que funcione bien:
<img border="0" id="conborde" src="URL de tu imagen"/>
El texto en color rojo es el que debes añadir obligatoriamente entre medias de esos dos valores.
Si te aparece también el valor border="0" entre medias, no lo tengas en cuenta, dado que ya definimos ese parámetro en los estilos.
Ejemplo de imagen con borde y sombras
Si queremos añadir a nuestra plantilla más diseños creados por nosotros mismos, basta con escribir un valor
Para este supuesto caso, ingresaríamos el nuevo valor<style>
#conborde {
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
padding: 0px;
background: none;
border: 1px solid #000;
border-radius: 0px 0px 0px 0px;
}
#conbordedoble {
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);
padding: 0px;
background: none;
border: 2px double #000;
border-radius: 0px 0px 0px 0px;
}
</style>
<img border="0" id="conbordedoble" src="URL de tu imagen"/>
NOTA: Te recomiendo usar encarecidamente este método debido a que podrás aplicarlo en las imágenes que usted quiera y en las demás no se aplicará absolutamente nada. Así de sencillo y para toda la familia ;)
Para eliminar bordes, sombras y relleno de forma definitiva escribiremos esto en el buscador del editor 🡺2. MÉTODO DEFINITIVO
Se nos resaltarán de amarillo dos líneas de nuestra plantilla tal y como te he resaltado yo también en el ejemplo de abajo:
El primer código.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, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.post-body img, .post-body .tr-caption-container {
padding: 10px;
}
El segundo código
Los valores marcados de rojo corresponden consecutivamente al ancho (en píxeles) del borde y de sus sombras.
Los valores marcado de azul corresponde al color e intensidad de las sombras.
Los tres primeros dígitos "0, 0, 0" hacen referencia al color (en rgba) de las sombras.
El último dígito ".5" hace referencia a la intensidad, siendo el valor mínimo 0 (transparente) y 10 (opaco) el máximo.
Los valores
El valor marcado de morado corresponde al ancho (en píxeles) del molesto relleno blanco exterior.
Este parámetro puede encontrarse tanto dentro del primer .post-body img como del segundo, pero nunca en ambos a la vez.
Lo que queremos en este caso es eliminarlo todo, por lo que tendremos que cambiar todos los valores que hay coloreados en el código del ejemplo de arriba por ceros. Finalmente debe quedarte algo parecido a ésto:
Si en algún momento te hartas del nuevo diseño o no te ha convencido y decides restablecerlo, simplemente tienes que rectificar las cifras que hayas modificado previamente, guardar la plantilla y listo..post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.border.color);
border: 0px solid $(image.border.color);
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-goog-ms-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
}
.post-body img, .post-body .tr-caption-container {
padding: 0px;
}
AVISO: Recomiendo cambiarlo todo manualmente antes que copiarlo directamente, debido a que cada caso puede precisar de una configuración particular y algo distinta del procedimiento estándar. De esta forma nos ahorraremos muchos quebraderos de cabeza con errores e incompatibilidades. No obstante he tratado de poner todos los ejemplos lo más genéricos que me ha sido posible de modo que causen la menor confusión posible.
En la regla border: el código solid corresponde al tipo de borde que utilicemos. Estas son todas las variables que puedes utilizar.3. TRUCOS EXTRA
SOLID
DOTTED
DOUBLE
DASHED
GROOVE
RIDGE
INSET
OUTSET
Si lo que quieres es añadirle bordes redondeados a las imágenes, pega esta línea debajo del valor border: 1px. No hace falta que lo elimines, pueden estar ambos códigos al mismo tiempo.
border-radius: 5px 5px 5px 5px;
Estos valores marcados en naranja corresponden a la cifra del redondeado (en píxeles) que aplicaremos a cada una de sus esquinas.
También podemos atribuir colores distintos para las líneas de código de cada uno de sus cuatro lados.
Únicamente tendríamos que sustituir la línea completa del valor border: 1px por estos cuatro códigos de aquí abajo:
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
Sustituye los valores marcados en azul por los códigos en forma hexadecimal de los colores que quieras y listo.
No hay comentarios:
Publicar un comentario