Beautify Your Blog || Deleting the Photo Shadow

A few weeks ago I helped host a blogger round table all about blog design. There seemed to be a lot of the same questions from bloggers - they all wanted a simple fix for similar problems. Rather than just share it with the few ladies at the round table, I wanted to share it with all of you. Because we all deserve a pretty blog, even if we don't have the funds to purchase one. So here we are with my new mini-series beautify your blog. Today's topic? Deleting the Shadow Box Around Your Photos.

----------------------------------------------------------------------

The default for most layouts puts a pesky little shadow border around every photo. Today I am going to give you a few simple steps to get rid of that irritating border.

1. In the left sidebar of your blogger dashboard click "Template".
2. Under the Live on Blog thumbnail click "Edit HTML".
3. Use Ctrl F to open finder and type in the following: .post-body img
4. That search will pull up the following code

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
} 

5. Replace the bolded lines with:

-moz-box-shadow: 0px0px0pxtransparent!important;
-webkit-box-shadow: 0px0px0pxtransparent!important;
box-shadow: 0px0px0pxtransparent!important;
}

6. Click "Preview Template".
7. If it looks good click "Save Template".

8. You're good to go! Have a happy day!

What tutorial would you like next?

Anything you want to learn to beautify your blog?