Adding Corners & Drop Shadows to your WordPress Blog Images

3 Dec 2012 – Grant Dickson

Have you ever wanted to apply drop shadows and corners to your WP Blog images? I have!

After many months of being VERY annoyed that my WP Blog and WP theme did not automatically add or have controls to “add or customise” drop shadows or round corners to my uploaded blog images,  today I decided to investigate and apply to some time to solving this minor but VERY irritating bug bare of mine.  To some this may seem trivial, but to me its been hanging around and frustrating me.  The awesome zeeBusiness WP theme that our Blog is based on, doesn’t include a simple feature like this so I looked for WP Plug-in to do the task…. all to no avail – I could find what I wanted.

 

Today, with a mere 5 minutes on Google and little effort, the answer was clearly evident, yes I could fix it myself and best of all, I could do it in 2 minutes (I have taken longer to write this blog) and I didn’t need to edit each image in Photoshop prior to uploading.  All these months of frustration would end and I could  finally move on armed with more knowledge surrounding WordPress customisation.

WP Blog owners can in fact customise the drop shadows and effect of individual images when uploaded via the “Advance Settings” settings tab under images – then apply “Styles” to the image – eg: box-shadow: 0px 7px 7px #888888;

HOWEVER…… what Blog Admin wants to do this to each image they upload… not I said the bear!

 

Solution:

It really is this simple:

In the WordPress Settings area – select Appearance then Editor.   Scroll to the bottom and on the right side from the “Styles” area, select the Stylesheet – Style.css. Scroll to the bottom of the script and add the code below, Save and refresh your blog.  Corners and drop shadows will be applied to all current and newly POSTED images, however all other images, (header, footer, sidebar, adverts etc) will not be affected.

The radius, drop shadow size, colour etc can all be edited.  The code below covers all modern browsers and adds a little white space above and below the images.

Note that this works in Firefox, Opera, Chrome and Android, however IE may be hit an miss as it’s rubbish!…

 

Happy Blogging…

G

CSS CODE To add to Style.css:

/***** PlusOne Dynamics Posted Image Style (www.PlusOneDynamics.com ********************/
.post img {
-webkit-border-radius: 70px 20px 90px 20px
-webkit-box-shadow: 15px 15px 15px #B3B3B3;  /* Saf3-4, iOS4, Android2.3+ */

-moz-border-radius: 70px 20px 90px 20px;border-radius: 70px 20px 90px 20px;
-moz-box-shadow: 15px 15px 15px #B3B3B3;  /* Firefox 3.5-3.6 */

box-shadow: 15px 15px 15px #B3B3B3;  /* Opera 10.5, IE9, FF4+, Chrome6+, iOS5 */
margin-top: 20px; margin-bottom: 20px;
}