Thursday, April 21, 2011

Blogger: Simple Template, Remove Content Box Shadow

The Blogger Simple template has a box shadow placed to either side of the blog content. Some people like it, others hate it. I've removed it from all of my own blogs and helped a few others do the same. Luckily, it's a simple CSS Tweak you can do in just a few moments.

Making the Change
Open the blog in Design->Edit HTML view, hit Ctrl+F to search for .content-outer to find the below style:
.content-outer {
-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);
margin-bottom: 1px;
}
Delete the four box-shadow lines, then preview your changes. Poof the shadow along the sides of your blog content are gone. Save the template and you're done. Short, sweet and simple.
8 Comments
Comments

8 comments :

Unknown said...

just what i was looking for! thanks!

Jeanne said...

THANK YOU!! Great tip!! Shadow is gone.

Unknown said...

Thanks for the help!

iiimjiiim said...

Thank you so much. I hate those gradients. Be gone pest!

Unknown said...

thank you for this collection of templates.
Bloggerjin

Mary Sullivan Frasier said...

Thank you soooooo much! Worked like a charm!

Unknown said...

Thank you so much....yea! The shadows are gone.

Unknown said...

Thank you!

I also found this CSS plug in, if you want a short cut version

.Header h1 { text-shadow: none; } .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { -webkit-box-shadow: none; box-shadow: none; } .content-outer { -webkit-box-shadow: none; box-shadow: none; }

Post a Comment