Remove shadows and borders on Blogger

A quick tutorial on how to remove the shadows and borders that are found on some of the templates by Blogger. I am not a huge fan of shadows, I much prefer flat design that is becoming popular.

The shadow effect can be great when used sparely, but on Blogger templates it can seem a little overdone. This post will show you how to remove the shadow from your blog posts, images and headers. Hope you find it useful.

Remove box shadows and borders from Blogger elements

The code for shadows is in your CSS Secton. To access that go to Template > Edit HTML. This shows your template code. The CSS is in between <b:skin> and ]]><b:skin>. Not sure how to find that? Check out this post for help.

If there is something with a shadow or border on your blog that you wish to get rid of, look for the element in the CSS section of your template. Find box-shadow or border property and change it the value to 0 or none.

Remove box shadows from Blogger

Find all the elements on your blog that have a box-shadow. It may look something like the following

selector {
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 10px #333333;
  box-shadow: 0 0 40px rgba(0, 0, 0, .15);
}

The values may look different if your blog template uses the Template Designer Variables, if so it will look something like this

selector {
  -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
}

You’ll want to carefully edit the values in both instances to remove the shadow by replacing the declarions within the brackets with the following

/* remove shadows by xomisse */
-moz-box-shadow: none;
-goog-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;

or remove the declarations altogether which is usually a better choice.

Remove text shadows on Blogger

Again go to Template > Edit HTML and find your CSS section. Look for text-shadow and remove the declaration or change the value to nill.

For example to remove the text shadow from your blog title in the header, find .Header h1 and change it to the following

.Header h1 {
/* remove borders by xomisse */
text-shadow:none;
}

Remove shadows from blog images

In Template > Edit HTML, find the following

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img

and change the values so it looks like

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove shadows by xomisse */
-moz-box-shadow: none ;
-goog-ms-box-shadow: none;
-webkit-box-shadow:none;
box-shadow:none;
}

Remove borders from blog images

The very same as shown above, change the value to none or remove the declarations.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
/* remove borders by xomisse */
border: 0px;
}