Redecorar

Uno de los recursos CSS que más ultilizo es el de oscurecer o colorear las imágenes.
Lo leí hace un tiempo en CSS-Tricks y lo sigo usando. Se trata de añadir un gradiente de color al background así podemos ponerlo por encima de la imagen.

Vamos a verlo con un ejemplo. Crearemos un div con la clase «oscurecer»:

<div class="oscurecer"></div>

Y luego en nuestro CSS le vamos a asignar un background que contendrá el gradiente y la imagen de fondo. El gradiente será el color negro con una opacidad del 0.5. El truco es hacer un gradiente con el mismo color! 😉
Recordar también dar un ancho y una altura al div igual a las medidas de la imagen:

.oscurecer {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://www.comolademo.es/demos/colorear-foto.jpg);
height: 480px;
width: 720px;

}

Para añadir CSS a tu tema puedes seguir esta entrada donde lo expliqué en detalle.

Esta es la foto original:

Veamos el resultado con la clase oscurecer:

Ahora vamos a hacer lo mismo pero con un color que no sea negro; por ejemplo en rojo.

Crearemos un div con la clase «colorear».

<div class="colorear"></div>

Y luego creremos el CSS con el gradiente en rojo para el background.

.colorear { 
background-image: linear-gradient(
      rgba(255, 0, 0, 0.3), 
      rgba(255, 0, 0, 0.3)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

El resultado:

 
Y finalmente haremos un gradiente de dos colores, un azul y un rosa. Crearemos un div con la clase «gradiente»:

<div class="gradiente"></div>

Y en este caso el CSS serà:

.gradiente { 
background-image: linear-gradient(
      rgba(25, 209, 231, 0.5),
      rgba(243, 17, 224, 0.5)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

Comprobemos el efecto:

 
Pues ya lo véis que fácil es dar un toque colorista a vuestras imágenes.
Saludos y espero vuestros comentarios o consultas!

Ana

Vamos a ver como cambiar el aspecto de un tema con unas líneas de CSS.
En este caso jugaremos con los bordes de las imágenes para adaptar el tema a nuestro estilo.
Un ejemplo lo haremos con el tema Outfitter Pro. Este es el aspecto inicial del tema:

Y ahora añadiremos un borde del color destacado y de un tamaño lo suficientemente ancho para dar un impacto visual el las imágenes de los productos.
El CSS añadido en este caso es:

/* Añadir bordes en imágenes de productos */
li.product a img {
    border: 30px solid;
    margin-bottom: 0;
}

Y el resultado obtenido es este:

Ahora vemos un cambio parecido en el tema Market de StudioPress.
Este es el aspecto inicial:

Añadiendo este CSS en los bordes de las imágenes que enlazan a contenido destacado:

/* Añadir bordes en imágenes de contenido destacado */
.entry-image.attachment-page {
    border: 16px solid;
}

Obtenemos el siguiente aspecto:

Vemos que según la imagen que queramos transmitir a nuestro público, podemos ajustar el estilo de la plantilla modificando como se muestran las imágenes.