Jason Hasselkus

Ok so I had a few people ask me “How did you add a drop shadow to your post”. Well I can tell you that it’s easy if you want to manually edit your pages, and that’s what I’m going to show you how to do.

So the first thing your going to have to do, is add some statements to your css. Go ahead and add the following to the bottom of your style.css file. The reason I say the bottom, is because I hate having to look through that whole file every time I want to change something so small. Now I should come clean and tell you that the approach I am build off of can be found at the following address: http://alistapart.com/articles/cssdropshadows/

OK, OK, I know back to how I got this to work. So we left off where we were going to edit the css. So lets open up our style.css file. Once there add the following to the bottom:

/* Drop Shadow for images */
.img-shadow {
clear: both;
float:left;
background: url(’images/shadowAlpha.png’) no-repeat bottom right !important;
background: url(’images/shadow.gif’) no-repeat bottom right;
margin: 10px 10px 0 17px !important;
margin: 10px 10px 0 8px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

.p-shadow {
width: 90%;
float:left;
background: url(’images/shadowAlpha.png’) no-repeat bottom right !important;
background: url(’images/shadow.gif’) no-repeat bottom right;
margin: 10px 0 10px 30px !important;
margin: 30px 0 0 15px;
}

.p-shadow div {
background: none !important;
background: url(’images/shadow.gif’) no-repeat left top; padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}

Now go ahead and place the two files: shadow.gif and shadowAlpha.png in your images directory. Remember this is the images directory that’s part of your theme, NOT the images that are at the root level, unless of course you have changed that. So once your done, your ready to add that shadow to some image in your post. Below is how I did it, basically just add the img-shadow class around your image.