wordpressshdaowHOW CAN I APPLY DROP SHADOW TO THE IMAGES ON WORDPRESS SITE

I had been struggling to apply drop shadow to the images on my WordPress blog as I feel that it gives a kind of beauty to the images but I was finding difficult to do it. I was using photoshop to apply drop shadows and then import it to the wordpress site.

Then suddenly I found a way to do it easily. You don’t need to apply drop shadow to the images in Photoshop. You can just import the images to your WordPress site and apply a piece of CSS code (Cascading Style Sheet) which automatically applies drop shadow effect to all of your images.

First of all it depends on the type of the theme. You need to know which element the image belongs to. I am using simple catch theme and I have images belong to “#main #content .post-img img“. This is the featured image which you see at the left hand side or the top of the list of  blog post when you see the main page of the blog.

Below is the figure of the featured image.

featuredimage

And another is “#main #content img” which you can see when you click the topic of the blog and enter into the detail page for the post. Below is the figure for the content image.

contentimge

 TIP: You can use a Firefox addons named “firebug” to analyze to find the elements name and change its CSS property.

So after finding out the element now you need to edit the “Style.css” file for your theme.

Go the Dashboard for your website.

Select  “Appearance” and click on “Editor”.

appeareanceeditor

Now you are in the Editor window. On the right hand side you can see different files like header.php,comment.php etc. Check the list and select “Style.css” and click on it.

Now you need to scroll down and see the element for your images. Note that my image element names were “#main #content img” and “#main #content .post-img img“. I will scroll down through the Style sheet to find the name of the elements. Or else I will press “Ctrl and F” buttons together to bring the find box and type “content” because all the images belongs to the content section of the blog page. Then you can see the attributes related to the images e.g font type, color, size etc. Now you need to apply attributes related to the drop shadow.

box-shadow: 2px 2px 1.5px 1.5px #888888;

The number with px is the dimension for the box shadow as how much thick or thin it should be and the number after hash tage “#” denotes the color of the box shadow. Now you can experiment by changing the dimension of the shadow or the color of the shadow.

Just add the above CSS code to all the images  Sytle.css and you can automatically apply drop shadow to all the images.

Good luck and thanks.