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.
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.
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
After
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;
}
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.
