Ahora imaginemos que un buen día queremos cambiar la plantilla y aquello que añadimos a nuestras imágenes ya no pega, o bien que simplemente nos cansamos de ese estilo y queremos usar otro. Está claro que tendríamos que descargar TODAS las imágenes, volverlas a editar y reponerlas en su sitio. Un coñazo, vamos.
Pues bien, las hojas de estilo (CSS) están para lo que están y que es principalmente facilitarnos la tarea de cambiar el aspecto de todos los elementos de todas nuestras páginas, desde un sólo sitio y de una sola vez.
Precisamente eso es lo que vamos a ver a continuación para las imágenes de las entradas de nuestro sitio: algunos sencillos sistemas para formatearlas desde la hoja de estilo.
El resultado puede no ser tan espectacular como con un editor de imágenes, pero seguro que la ventaja del ahorro de tiempo nos compensa con creces.
En un principio, para cambiar cualquier cosa que afecte a las imágenes sólo tenemos que incluir en nuestra plantilla las propiedades necesarias para la etiqueta img, que es con seguridad la que llevan todas. Por ejemplo, pongamos un borde negro sólido de 10px. Nótese que no lleva ningún punto delante, ya que no se trata de una clase creada ex-profeso para nuestro sitio, sino una etiqueta general de HTML:
img {border: 10px solid #000000;}
Podéis probar esto pero teniendo en cuenta dos cosas:
- La primera es que atacando directamente la etiqueta img, cambiaremos en un principio, el estilo de TODAS las imágenes del sitio web, tanto las de las entradas como las de la barra lateral o las de los gadgets. Hasta los iconos de edición rápida que sólo vemos los administradores se verán con un borde con el código del ejemplo.
- La segunda es que si hay otra clase más cercana (rodeando) a la imagen que incluya también esta etiqueta (img), el código que se ejecutará con prioridad será este último más cercano, quedando sin efecto el primero para esos elementos en concreto
Es el caso genérico de las plantillas Blogger, que suelen incluir formatos específicos para las imágenes de las entradas. Si buscáis en vuestro código hay muchas posibilidades de que encontréis algún .post img o un .post-body img.
Así las cosas, si por ejemplo tenemos el siguiente CSS y HTML, todas las imágenes se verán con un borde negro excepto las de las entradas, ya que las propiedades de la clase .post mandarían sobre las genéricas por estar las imágenes dentro de esa clase:
img {border: 5px solid #000000;}
.post img {border: 0px;}
.post img {border: 0px;}
<div class='post'>
<img src='http://blog/imagen.jpg'>
</div>
<img src='http://blog/imagen.jpg'>
</div>
Esto de la prioridad se puede saltar añadiendo !important a los valores de cualquier propiedad. Esa instrucción hace que lo que está junto con ella se ejecute prioritariamente, obviando lo antes explicado de la cercanía. Por tanto, para probar lo del borde a todas las imágenes y saltarnos cualquier otra clase que modifique ciertas imágenes, habría que añadir ese comando:
img {border: 5px solid #000000 !important;}
Otra opción para no usar !important sería buscar a mano las clases existentes que modifican imágenes y cambiar sus propiedades o incluso eliminarlas, según el caso.
En las plantillas estándar que proporciona Blogger, las clases utilizadas son .post img para las plantillas clásicas y .post-body img para las del nuevo diseñador. Buscando en vuestra plantilla podréis encontrar cual es la que corresponde en vuestro caso particular.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Vale totalmente claro, pero ahora una duda, dentro de post yo quiero declarar un "div" el cual lleve imágenes, pero quiero que las imágenes dentro de ese "div" no hereden las propiedades de la clase .post img ¿es posible eso?
ResponderEliminarClaro. Añade una clase a ese DIV y luego declara el CSS con ella. Por ejemplo <div class="imagenespecial">LOQUESEA....
EliminarY el CSS:
.post .imagenloquesea img {PROPIEDADES}