Tabs

               

Friday, March 1, 2013

How To Remove Shadow Box from Images


Screen shot 2013-03-01 at 8.57.12 AM
You may have noticed the ugly shadow boxes that appear on your images when placed in a post or even on your header image. This look can be useful, by allowing a more layered look but most of the time it leaves your site looking unpolished. So here is a quick tutorial on how to remove that box!

First thing to do is locate the CSS file for your site, usually style.css for wordpress. Within this file search for this:

.entry-content img,
.comment-content img, 
.widget img, img.header-image, 
.author-avatar img, 
img.wp-post-image {

 /* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ 
       border-radius: 2px; 
       box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
}

This code is responsible for the border and the box shadow on images. If you are wanting to keep the border box shadow but want it darker, thicker whatever here is where you would do that. To stop this from showing you can either delete the lines of code or I prefer to just comment them out.

.entry-content img,
.comment-content img,
.widget img, img.header-image,
.author-avatar img, img.wp-post-image {

/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
       /*border-radius: 2px; 
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);*/
}
Screen shot 2013-03-01 at 9.07.56 AM
It's always best to preview your page before saving. If it looks right then save your file and your done! Congrats, now that wasn't that hard!

No comments:

Post a Comment