Remove shadows from content outer in Blogger Default Template

If you are using the simple template or default template provided by Blogger, you will see shadows on content outer, some people likes it and some wants to remove it, so this tutorial is for those who don't want the shadows. 


You will see the shadows on default template by Blogger, if you are using some light and clean background then the shadows will look awkward and you will want to remove it. For your ease i am posting this tutorial.

See the difference between template with shadow and without.

Before
remove shadows from outer content simple template


After
removed shadows how to


There are two ways to remove the shadows, one is to write/add a CSS to your template that will overwrite the existing codes that is rendering the shadows and other is removing the code directly. I prefer removing the code directly, if you overwrite (as found on much tutorials) , you won't be able to style it again. 

This tutorial will require you to make changes to your template, so before your proceed please backup your template.

Let's start, go to your Blogger Dashboard > Template > Edit HTML > Proceed > Now hit CTRL+F and search for this line in the template code. Inserting the first line will bring up the whole CSS code block.


.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  margin-bottom: 1px;
}

Once you find the line, select it 


css remove shadows from template simple blogger

Delete the line and hit on Save Template

Hope it helps you but remember that it's now important for this trick to work on your own custom template, if you want to get solution for your own template then please comment with your blog address.