Works for Me Wordless Wednesday: Adding Borders to Your Photos with CSS

Dawn — Tue, 21 Apr 2009 21:29:16 +0000

[I know it sounds like I've jumbled my memes, but I wanted to share something I did on my blog over the weekend that I thought might work for both Wordless Wednesday and Works for Me Wednesday.]

I have established a photography work flow in Lightroom and I upload straight to Flickr for my blog. However, I love the look of borders around photos (look at the nice, subtle ones at Digital Photography School); I just don’t want to take the extra step to add them in Photoshop.

This weekend I decided to add a little code to my blog’s style sheet, enabling me to easily frame the borderless photos I use. At first I decided to use black; it looks nice with most photos, especially black and white. It proved to be a little too much when used with a series of photos in a row – primarily because of the other colors on my blog – so I coded a second border option, using the subtle grayish shade that wraps around the content area of my blog (just inside of the background patterned area).

Here are examples of each:

Here’s where you’ve got to pay attention, because it takes two steps to make this work: adding the code to your style sheet, and adding a bit of code in HTML view when you post your pictures. We’re creating image classes that can be applied to your photos. I’ll explain what the code means, too, because if you’re like me you want to understand it (and if you don’t, you can just skip that part!).

The style sheet is the CSS file on a WordPress blog; on Blogger, the style sheet is found at the top of your one-page template. Here’s what I added to mine:

img.framed {
padding: 12px;
background: #d4cfbb;
}

img.bframed {
padding: 12px;
background:#000000;
}

The top one (.img.framed) makes the lighter colored border (you can make it any color you want, just use the hexadecimal color code), and the bottom one (img.bframed) adds the black one (I put the “b” in front on the black one, so I could remember it – plus it’s got to be different than the other one). What you’re doing is adding a colored background behind your photo. The padding determines how far it extends beyond the edges of the photo. I used 12 pixels; you can use more or less, whatever looks best on your blog.

Just adding this to your style sheet will do absolutely nothing. You have to add a tiny bit of code to your photos in HTML view when creating your post. If you’ve ever looked at the code for one of your photos, it looks something like this:

What we’ve created is called an image class. Within that code (be sure you’re in the bracketed area that starts with “img”), add class=”bframed” and you’ve added the black border, like this:

class=”bframed” width=”334″ height=”500″ alt=”0904_LilyPark_078″ />

You might want to write it down or paste it in an unpublished blog post or a text file so you don’t forget. Be sure you do it just right, with the equal sign and quotation marks. It shouldn’t take long to memorize.

Since the border is part of the style sheet and not connected to the image itself, you have the power to change the color of all the borders you’ve applied simply by changing it again in the style sheet!

Visit 5 Minutes for Mom or Wordless Wednesday for more Wordless Wednesday participants. Visit We are THAT Family for more Works for Me Wednesday participants.

Are you a photographer with white balance problems? Check out the White Balance Lens Cap!

Under Construction

Dawn — Wed, 31 Dec 2008 04:16:25 +0000

I’ve been itching to play with my template and design, and since it’s time to take down the Christmas theme, this seems like the perfect time. PLEASE give me feedback about this layout, whether you’re a first-time visitor or regular reader. I’ve had it on a test blog for months, just unable to decide whether the magazine layout would work for me. I’d like to know not only how you like the appearance, but especially the ease of navigation, too.

I can’t get the Featured Content Gallery to work properly yet, either. *sigh*

At the time I’m posting this, it will be a sloppy mess – give me a little time to tweak

My Home Sweet Home » web design

Works for Me Wordless Wednesday: Adding Borders to Your Photos with CSS

Under Construction