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.

The Overview – Remove Box Shadows and Borders from Blogger

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.

writing css - selector, property and value

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

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

84 comments

    • Ellie M on

      Hello. The only thing I can see a shadow on is the photo, correct? If that’s it, then you need to find the following code in your HTML. From what I can see, it is what still has a box-shadow.

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

      and remove the box-shadow code between the curly brackets, changing the padding to 0px might also help. This will remove the shadow. Let me know how you get on.

      Reply
  1. Anu on

    Uuugh! Still not working. for some reason the finder can’t find the code you asked me to look for. Basically telling that the code I am looking doesn’t exist.

    Reply
    • Ellie M on

      It should be between b:skin and /b:skin, possibly under the widget heading depending on your template. If you click into the HTML box and then click CTRL & F or CMD & F, a different search box will appear. If you still can’t find it, try searching for just .post-body img. Let me know ๐Ÿ™‚

      Reply
      • gerson on

        Can you give me the css code to add I dont seem to find the #blog-pager or thr .footer on the html code, I used your css code successfully to remove shadow from the posts.

        Thanks!

        Reply
        • Ellie M on

          Exact same CSS as above so it’s #blog-pager { -moz-box-shadow: none !important; -goog-ms-box-shadow: none !important; -webkit-box-shadow:none !important; box-shadow:none !important; border: 0px !important;} and .footer-fauxborder-left { -moz-box-shadow: none !important; -goog-ms-box-shadow: none !important; -webkit-box-shadow:none !important; box-shadow:none !important; border: 0px !important;}

          Reply
    • Ellie M on

      When composing a post, click Edit HTML tab. Find your selected image and add the above rules/values to it like so

      <img src="IMAGE URL" style="border: none; padding: none; box-shadow: none;">

      Reply
  2. Ellyphant on

    I don’t know if you can help or not, but on my blogger I seem to have these red lines around my blog posts and I can’t figure out how to get rid of them or at the very least change the colour. They really clash with the colour scheme on my page ๐Ÿ™

    Not sure if I can post a print screen so I’ve got the link to my page/site so you can see. Thanks in advance if you see this ๐Ÿ™‚

    http://ellyphantinsight.blogspot.co.uk/

    Reply
    • Ellie M on

      Hello, are you seeing it on your main blog page? As red line appears while in Blogger Template Designer (Template > Customise > Advanced). Could you email me with a print screen as I can’t see the lines from here. Will try help you figure out what causing it.

      Reply
    • Ellie M on

      Hello. Go to Layout and click edit on the gadget containing the code for the banner. Before the code add <div id="bannerad">, at the end of the code add </div>. Then go to Template > Edit CSS and find ]]> </b:skin>, add #bannerad {text-align: center;} above it and save.

      Reply
      • emma on

        Please on the go to Template > Edit CSS Do you mean Temple > Edit HTML and find ]]> </b:skin> , add #bannerad {text-align: center;} above it and save. THANKS

        Reply
        • Ellie M on

          Hello, yes sorry – go to Layout and click edit on the gadget containing the code for the banner. Before the code add <div id="bannerad">, at the end of the code add </div>. Then go to Template > Edit HTML and find ]]> </b:skin>, add #bannerad {text-align: center;} above it and save.

          Reply
  3. enyinnayaemma on

    Big Thanks…
    You are blessed and special to our generation, you are special and you will live long for many who will need your help… God bless you.
    All this is to thank you for helping me to center my blog below description banner which is centered now through your help, once again Big Thanks and God bless…
    Comr. Emma

    Reply
  4. Lucy on

    Thank you so much for this! Your blog is great and so useful! ๐Ÿ™‚

    Thanks to you I can clean up my blog so much and make it looked so much more personal and professional!

    xx

    Reply
  5. allie on

    hey, I’ve tried both the CSS and edited HTML code to remove a shadow around my blog posts but neither are working, I can’t find .content-outer in the HTML at all. I need to get rid of these orange lines, I’ve been trying for a week!

    Thanks

    Reply
  6. Lifeplus1 on

    Hi! I love your blog, it has been such a big help to me in getting my new blog set up and laid out how I want it. It really is a labor of love.

    I’m trying to insert images on my sidebar as headings for things like ‘Connect’, ‘Archive’, ‘Search’, ect. When I design those headers in a photo editor and then insert them as an image widget on the sidebar the shadow appears around them. Which I don’t want. However, I like the shadow on my post images.

    Is there any way to remove the shadow just from the images that I put in my sidebar?

    Thanks!!

    Reply
  7. Anja on

    Hi!
    Please, I need a help.. I’ve been trying to remove this annoying border around my blog posts and just can’t succeed..I’ve been trying and trying, but nothing seems to be a good solution..

    Thanx
    Anja

    Reply
  8. Chelsea on

    Thank you so much for all you amazing and simple posts!! So much better, simple, and trust-able than any others I’ve found out there! Quick question? I ‘m so grateful for this post I’ve been wanting to take away the box around my photos, and used the “Remove shadows and borders from images” but is there any way to leave a small drop shadow? Thank you again!!

    Reply
  9. Jessica {My Love of Style} on

    I tried this on my blog signature in wordpress and it worked!!1 Whoooo Hoo!! :-)Thank you so much I truly appreciate you posting this tutorial, as I have spent hours looking for a tutorial that shows how to remove a box-shadow from wordpress images and since there wasn’t anything out there for wordpress I decided to try your tutorial for blogger and am THRILLED that I did!!! Thanks again ๐Ÿ™‚

    Reply
  10. Rebecca on

    Hello, there! I came upon your blog by searching for a way to do a drop down navigation bar and loved your tutorial so much that I’ve decided to go through them all and I’ve now collected enough tutorials to go build my own blog! Thanks for your blog, it’s helped a lot. Wish me luck!

    Reply
  11. Al Ngullie on

    Thank you, Ellie, the CSS override worked like a charm in removing the shadows. The first code varies; it depends on your template.

    Unsolicited advice for some of you here who, I believe, are confusing the contrast offered by the SITE / BLOG’s background, for shadows after editing the HTML or adding CSS:

    Once you have overridden / edited the HTML, those of you using a darker background would still see an outline or a ‘shadow’. Don’t worry, that’s the area where the real shadow was, originally. It is removed (if you have edited the HTML or added CSS code). You see the outline / shadow because your background was darker or lighter (compared to the color you use for either your post or PAGE’s background. You can correct it by going to Customize –> Advanced —> Page and adjust the colors to blend according to your liking.

    Reply
  12. Christina on

    I’m so pleased you’re still getting comments on this post (and you’re responding ;)) I’ve entered the code for html and css and it didn’t work. This code is to remove the shadow behind the posts and sidebar correct? Do you mind helping me troubleshoot? Thank you! Christina

    Reply
    • Elaine Malone on

      Hello Christina, you don’t seem to have shadows on your posts or sidebar. There is a border around them, to remove this find .main-inner .widget, .date-outer and .main-inner .widget h2 + div, .footer-inner .widget h2 + div and change border: 1px solid #eeeeee;; to border: 0px solid #eeeeee;;

      Reply
  13. kay on

    Hi, this worked perfectly on my main page but hasn’t done the same for all my other pages. For example, if you click on the ’email me’ bird it takes you to a contact page and the borders are still there!

    Reply
  14. Ellie on

    Hi I’m trying to remove the gray borders around images on my company’s blog. I’ve tried everything you suggested multiple times, including your responses to other posters, but nothing is working. There’s the main image and the button in the sidebar. I’d really appreciate any help!! Thanks. Ellie.

    Reply
      • Ellie on

        It’s still not working. Don’t know what I’m doing wrong. I tried a right bracket, left bracket, curly brackets, nothing made any difference.

        Reply
        • Elaine M on

          Hi Ellie, you have an extra character before .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img and are missing a closing bracket before .post-body img, .post-body .tr-caption-container which is blocking other CSS. You also have border and padding values set for that, as well as background values which is causing that border.

          Reply
          • Ellie on

            YES! I removed the border and background values and it totally worked. I’m so happy. Thank you so much for your help. Now I’ll know what to do for any future images too. Thanks again.

  15. Dosima on

    Hello. I would love to get rid of the borders , but I want to keep the image description. I’ve been looking for days how to remove borders but not the text and I don’t find it nowhere. Can you please help me here? Thanks

    Reply
    • Elaine M on

      Remove the background, border and box-shadow values from .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img. That will leave you with just the caption ๐Ÿ™‚

      Reply
  16. Ashley Nudge on

    Hi!

    I’m trying to remove the border & shadow around the images in mobile view and I’m not sure what changes to make? I really want to make the shadow go away because it shows around the signature image.

    What to do?

    Thanks for all your help!

    Reply
    • Elaine Malone on

      Hello, you need to remove the box shadow and border for .mobile .post-body img, that will remove from mobile view. There’s also a couple of errors in your CSS, you have HTML present which shouldn’t be in the CSS section and could be causing issues with your CSS being read.

      Reply