Removing the Shadow Box Lines around an Image

This article deals with the issue of the shadow lines that blogger inserts around images on your posts.  I could never understand why this was the default option.  Although the same outcome can be achieved by editing the html template, I have found that the easiest way is to insert some CSS code instead of having to delve in to the template code.

To add the CSS code first log in to your blogger dashboard.  Choose from the left vertical menu the “template” option (tenth one down), and, click on this.  On the next page the top of the screen will show a live on blog image, with a button marked “customise” below.  Click on this button, to bring up a new page that allows you to alter the layout of your blog.  On the left menu click on the “advanced” link.  This brings up a sub menu, which allows you to change the various fonts, colours and background of your post.  On this sub menu scroll down to the last item on the list, and, click on the link titled “Add CSS”.  This opens up a text box to add your custom CSS code.  You now need to copy and paste the following code into this box (from img to the last “}” bracket).  Please note that you also need to keep in the code the “!important” phrase as this forces the code to override the normal CSS styling.

img {

padding: 0 !important;

border: none !important;

background: none !important;

-moz-box-shadow: 0px 0px 0px transparent !important;

-webkit-box-shadow: 0px 0px 0px transparent !important;

box-shadow: 0px 0px 0px transparent !important;

}

After pasting the above in to the box you need to press the orange “Apply to Blog” button at the top right of the page.  Please ensure you do this otherwise blogger will not save the code.  To check that it has saved correctly, you can click on another menu option say “gadgets”, and, then again on the “Add CSS” link.  This will now display the code you have just inserted if you have saved it correctly.  You can now click on the “back to blogger” link at the top of the page to return to your blogger dashboard.

The CSS code that you have just inserted will now override all the default template options, and, hence will remove the shadow lines from around the image.

Well that is it, simple really.  I hope you have found this useful, and, happy blogging.