My Home Sweet Home » WFMW

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!

Works for Me Wordless Wednesday: Adding Borders to Your Photos with CSS is a post from: My Home Sweet Home
© 2012 My Home Sweet Home | All rights reserved

Works for Me Wednesday: Photoshop Watermark

Dawn — Wed, 30 Apr 2008 04:01:51 +0000

[Please note: This post involves a Photoshop tutorial and I don't know if it will translate well to other programs. If you aren't a Photoshop user, it might make your eyes roll back in your head, and I wouldn't want to be responsible for that. Proceed at your own risk: you have been warned.]

I haven’t done a Works-for-Me Wednesday in ages because I’m such a Wordless Wednesday addict. Today, however, I’m going to tackle both!

I love taking pictures, and I recently decided to start watermarking some. A reader asked me in comments how I made my watermark, so I thought I would share it with you.

I am the queen of the Google search, so I looked for something like “watermark photos” and came up with this handy tutorial at freetimefoto.com. I worked through the tutorial, but then I saw and downloaded their watermark Photoshop action.

At first I didn’t like it because it made a big black box in the corner of my photo, always seeming to cover something important. Then I thought of the perfect fix: decrease the opacity of the rounded rectangle, or black layer, to 50%, thereby letting the photo show through the watermark. Instead of running the action each time, I saved the .PSD file (with the watermark customized with my URL) and stored it in the folder where I dump all of my blog photos after they’ve been doctored and resized for the web.

When I want to watermark a photo, I finish my photo editing and resizing and then open that .PSD file. I drag both layers (text and black background) into the corner of my photo. The cool thing is that you can drag it to either corner and it will work.

Examples, you say? Here you go!

Visit Rocks in My Dryer for other Works-for-Me Wednesday participants.

Works for Me Wednesday: Photoshop Watermark is a post from: My Home Sweet Home
© 2012 My Home Sweet Home | All rights reserved

Works-for-Me Wednesday: Love-Me-Knots Hairbows and Accessories!

Dawn — Wed, 16 May 2007 06:37:33 +0000

Do you have a little princess in your life? I would like to introduce you to Love-Me-Knots, a new online store for girls’ hairbows and hair accessories!

Love-Me-Knots is a joint venture between my friend, Melissa (she makes the bows) and I (I do the website). We are a couple of SAHMs who are really excited about getting the word out about our new business.

We currently feature over 140 products, including classic solid bows, polka dots, specialty, formal occasion, seasonal/holiday, hand-painted monogrammed bows, itty bitty baby bows, button bows, headbands, and pony streamers. Please stop by and give us the opportunity to meet your girls’ hair accessory needs!

Welcome to Love-Me-Knots!

Works-for-Me Wednesday: Love-Me-Knots Hairbows and Accessories! is a post from: My Home Sweet Home
© 2012 My Home Sweet Home | All rights reserved

Works-for-Me Wednesday: Help for Hanger Horns

Dawn — Wed, 28 Feb 2007 14:48:00 +0000

Don’t you hate it when you put on a shirt and you’ve got hanger horns, those unsightly lumps on your shoulders where the hanger has stretched out the fabric? Here’s a quick fix: squirt them down with a wrinkle release product, then smooth out the lump. It works best if you’re actually wearing the shirt when you do this.For more Works-for-Me Wednesday tips, visit Shannon at Rocks in My Dryer.

Works-for-Me Wednesday: Help for Hanger Horns is a post from: My Home Sweet Home
© 2012 My Home Sweet Home | All rights reserved

Works-for-Me Wednesday: Strikethrough Text

Dawn — Wed, 24 Jan 2007 15:17:00 +0000

I’ve never done this before, but I’m going to post something from the archives. I originally published this in October and it still gets lots of hits from Google searches, so I figure this is something people want to learn how to do. So without further ado…

Strikethrough Text

Do you really ~~like~~ love it when you see that strikethrough text effect, you just don’t know how to do it? Now you can! Just enclose the word or words you want to strike through between the following tags:

~~like~~ gives you ~~like~~
or
~~like~~ will also give you ~~like~~

Those brackets are on your keyboard under the letter “L.” Just don’t forget to include the / on the end tag; that lets your browser know to stop this effect, or else it will ~~just keep striking through everything you write~~.

To my knowledge, this will not work when leaving comments (I haven’t tried it in the new Beta, so who knows?). Have fun, go forth, and ~~strike away~~!

For more Works-for-Me Wednesday ideas, visit Shannon at Rocks in My Dryer.

Works-for-Me Wednesday: Strikethrough Text is a post from: My Home Sweet Home
© 2012 My Home Sweet Home | All rights reserved

Works-for-Me Wednesday: Hot Air Styler and Dryer

Dawn — Wed, 10 Jan 2007 17:50:00 +0000

Can you say, doesn’t follow directions well? Since I obviously missed the theme of today’s WFMW, I was going to shelve it until next week, but I don’t see the option to delete it from Shannon’s linky, so here it is…

First of all, I am really excited that Wednesday has rolled around and I actually remember my WFMW idea (from two weekends ago – I couldn’t remember what it was last Wednesday). The Revlon hot air styler and dryer pictured is one of the greatest inventions I have ever tried for fixing your hair. The girl who cuts my hair uses one, and told me I could pick one up at Target, which I did immediately, although mine is silver instead of this funky purple.

For years I used a hair dryer and a round brush to fix my hair. This is like a round brush with a built-in dryer and two barrel sizes. There is one thing I need to tell you though, or you will not like it: Do not think of this as a hair dryer, but instead as the ultimate round brush. Get your hair almost completely dry (or even completely dry) before you use it. If you use it on wet hair it will take forever.

It takes a little getting used to, but then it makes fixing your hair a snap!

Visit Shannon at Rocks in My Dryer for more WFMW tips!

Works-for-Me Wednesday: Popcorn and Cereal Night!

Dawn — Wed, 20 Dec 2006 19:30:00 +0000

Cooking supper every night for nine people gets a little overwhelming at times. Since we always have a big lunch on Sunday and I’m exhausted by the end of the day, we have declared Sunday evenings to be “Popcorn and Cereal Night.” I don’t have to cook, and the kids think it’s the greatest thing ever!

Go visit Shannon at Rocks in My Dryer for more Works-for-Me Wednesday ideas!

Works-for-Me Wednesday: Crescent-Wrapped Gouda with Red Pepper Jelly

Dawn — Wed, 15 Nov 2006 20:03:00 +0000

For the Christmas edition of Works-for-Me Wednesday, I thought I would share a simple yet elegant appetizer for all of those holiday get-togethers.

Crescent-Wrapped Gouda with Red Pepper Jelly

1 (7-oz.) round of Gouda cheese
1 (8-oz.) can refrigerated crescent dinner rolls
1 egg, beaten
fancy crackers
red pepper jelly

Heat oven to 350Ëš. Cut cheese round in half to form 2 circles; remove wax.

Separate dough into 4 rectangles; firmly press perforations to seal. Press each into a 6×6-inch rectangle. Place 2 rectangles, 3 inches apart, on ungreased cookie sheet. Place 1 cheese circle on center of each rectangle (from experience, I would take a knife and “break-up” the cheese; it will heat through better). If desired, use canape cutter or paring knife to cut 2 to 3 small decorative shapes from the corners of each remaining rectangle; set shapes aside. Place 1 remaining rectangle on top of each cheese round. Press dough around cheese to seal; curl bottom edges over top edges, gently stretching dough to form a ring of dough around cheese, sealing completely. Place decorative shapes on top of each pastry. Brush with beaten egg.

Bake at 350Ëš for 18 to 22 minutes or until golden brown. Cool 10 minutes before serving. Place on a decorative plate or platter, surrounded by fancy crackers and topped with red pepper jelly. 8 servings.

Technically, you could omit the red pepper jelly. To me, however, it is the highlight. Once we were invited to a Christmas party where I brought this appetizer. I didn’t have any red pepper jelly and asked my husband to please pick some up on his way there from work. He ended up being very late because he had so much trouble finding a store that stocked it. He finally found it at Publix. Our hostess later gave me 3 jars as a Christmas gift. I will be making this on Friday night; if I remember, I’ll take a picture and update the post with it.

For more Christmas Works-for-Me Wednesday ideas, visit Shannon at Rocks in My Dryer.

Works-for-Me Wednesday: Can Storage Rack

Dawn — Wed, 25 Oct 2006 12:00:00 +0000

Several years ago, I acquired this handy can rack which takes up almost no space and holds a ton of canned goods. It currently has 82 cans on it, and it isn’t full. My hubby mounted it for me behind the door of my laundry room, where it is easily accessible but out of sight. Just think of how much room those cans would take up on pantry shelves! Plus, all of the cans are visible, not buried behind each other. I’ve had mine a long time, but I assume you could find one at Lowe’s or Home Depot.

Visit Shannon at Rocks in My Dryer for more Works-for-Me Wednesday tips!

Works-for-Me Wednesday: Strikethrough Text

Dawn — Wed, 04 Oct 2006 12:20:00 +0000

Do you really like love it when you see that strikethrough text effect, you just don’t know how to do it? Now you can! Just enclose the word or words you want to strike through between the following tags:

~~like~~ gives you like
or
~~like~~ will also give you like

Those brackets are on your keyboard under the letter “L.” Just don’t forget to include the / on the end tag; that lets your browser know to stop this effect, or else it will just keep striking through everything you write.

To my knowledge, this will not work when leaving comments. Have fun, go forth, and strike away!

For more Works-for-Me Wednesday ideas, visit Shannon at Rocks in My Dryer.