Did you notice that all the images on my post content have drop shadow? I did not edit all the images to have drop shadow manually. The images are just normal picture. Then, how does the drop shadow come out?
If you compare the above image with the image on the sidebar (if the picture still there, 
), you will notice that the image on sidebar does not have drop shadow. Both of them are using the same picture. Just the image at post content has some helps from CSS to make it to have drop shadow.
Okay, let’s start the tutorial.
1. Download this shadow.gif file.
2. Copy it to your WordPress theme images folder.
3. Add “.PostContent img { background:url(images/shadow.gif) no-repeat right bottom; padding:4px 10px 10px 4px; border:none; border-top:#eee 1px solid; border-left:#eee 1px solid; }” in CSS.
Well, that’s all. Enjoy your images’ drop shadow. 
27 Responses
Leave a Reply
Featured ...
Guide for ...
Thanks for the tutorial Jayce =)
I don’t understand #3, where do we have to copy the code in CSS ? (I’m CSS noob =p )
Erm, that’s mean we have to keep our photo in our own hosting? Is it possible if I want to keep my photo in photobucket and have the shadow too ?
Yup. You need to copy that to your theme CSS file. And you can use any photo from any website. The drop shadow will come out after you settle your CSS.
Jayce, Can i know where should I paste the code in CSS ?
I paste this
“.PostContent img { background:url(images/shadow.gif) no-repeat right bottom; padding:4px 10px 10px 4px; border:none; border-top:#eee 1px solid; border-left:#eee 1px solid; }”
behind of my “Layout control” and “Content”, but look nothing happen.=.=”
Hmm… Your CSS is not same as mine. Therefore, you need to change “PostContent” to your own content div name.
Is it changing it to “Layout Control” or “Content”. I saw this 2 title in my CSS file.
So where should i place the code in? Anyone within Layout Control or Content?
Hmm… I need to study your theme first before can help you. Do you have any link to download your theme template?
Thanks Jayce for helping. This is the link to download my template.
http://www.uniqueblogdesigns.com/UBD-Moneymaker-Theme
Look toward to your next tutorial. Thanks Jayce!
Let me have a look on it first…
Thanks Jayce! You’re so nice =)
Just drop the tutorial here after you get to know how to edit it.
I’ll come and visit again ^^
Hey, your comment did not go to SPAM folder this time. LOL
lol..that’s weird..sometimes it will jump to Spam folder and sometimes it’s not..
I never put link in comment but it will go to Spam folder too..bleks..
Aiyo… Went there again…
You better change to other name. “Make Money Blogging” is too common already. LOL
Nope, it’s nothing to do with my name lo..I suspected that my blog URL has been deemed to be included in the Spammer List. Darn..=.=”
Jayce, do you check how to edit my CSS ? =) I’m looking forward for this, thanks Jayce for your effort for helping me! =)
[...] P/s: Thanks for the drop shadow tips [...]
wah, thanks for the tips!
gonna try it!
aiya, also didn’t work on my theme
Changing “.PostContent img” to suit your CSS should make it work. Basically, it just make the image at your PostContent to have drop shadow. Therefore, find out your CSS content DIV name. Then, replace “.PostContent img” with “.YourContentName img” will do. Hope this will help.
Actually i’m not really understand how to edit it.=.=” I dono what my “.PostContent img” name to be in my template.
I did found “Layout Control” and “Content”, I follow your step to replace the “.PostContent img” to “Layout Control img” and “Content img”. But nothing changed.=.=”
Give me your latest theme. I will try to help you to solve it then.
Hehe thanks Jayce! I’ll give you the themes within this week, I’ll change my theme on this weekend, because I need to edit the coding first. =)
Thank you Jayce!!
this tools is great, i always make my picture to have some white border, to avoid my picture stick with my content, now can have a try on this method
Yup. I copied it from other blog long time ago.
Jayce, this is my new themes.
http://www.dailyblogtips.com/demos/?p=8
You can pls download here. It’s called “PassionDuo Red Theme”, please download it via this link. http://www.dailyblogtips.com/wordpress-themes/
Thanks Jayce for help, I’m Css noob. =.=” Hope to get your tutorial soon. Thanks Jayce again!
Thanks for the information. It does make your pictures look different from other sites.
Make Money Blogging, will look into it soon.
flowerhorn, yeah… I like the frame look.
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
I love your site.
Love design!!! I just came across your blog and wanted to say that I