Monday, July 16, 2012

blogging etc. - removing shadow boxes and borders

I am new to blogging, so it was nice to find blogger to be so user friendly. When I started anna knits, etc., I was happy with the Simple template I chose as it was. But as I got more advanced in my blogging, I started to want to add images without the shadow box or border that surrounded all images in my Simple template.

With shadow box and border:

Without shadow box or border:


After some searching on the internet, I discovered that you can easily do this by adding some CSS code. I wanted to share how to do this in case anyone else was trying to do the same thing. I got my directions from the stie Helper Blogger

Here's what you do:
1. Go to Blogger Dashboard -> Template -> Customize
2. Click on Advanced -> Add CSS
3. Paste the following CSS code into the box:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
    padding: none !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;
}

4. Click Apply to Blog.

You should be free of the shadow boxes and borders! For more blogging tips, see my post on social media buttons here.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...