tech, simplified.

Using Transparent Images with WooThemes Canvas

I love WooThemes' Canvas Theme. It's so versitle and simple to use, which is why I decided to use it for Techinch's redesign last year. Since then, I've tweaked it in a number of ways, mainly using just Canvas' internal settings. No code, no mess, just simple settings and a quick Save and you're done.

I was pretty content with the way everything was looking, except for images. Canvas puts images in a white box with a light grey border, which looks nice enough for standard photos but looks rather awful with full window screenshots that include shadows with transparency. But try as I might, there's not an option to turn off (or tweak) the image background in Canvas.

WooThemes forums to the rescue. A quick search later, and I found the tiny line of code I needed to add. So, if you want to remove the Canvas image box background and border from your site, just add this line of code to Canvas' custom CSS box in its settings:

.entry img, img.thumbnail { background:none; border: 0px;}

And that's it. Full image transparency support in Canvas, so your site with a non-white background color or texture doesn't look so odd anymore. And if you happen to still want a background and border behind some images, just add a caption, and you'll still get the original styling. Works great so far for me.

Thoughts? @reply me on Twitter.