The Post Where I Destroy The Internet with Aunt Bea

Guess what!  Another question!  This time from my friend Kristy, who would be more than happy to style your hair, should the mood strike you.

reuben! I didn’t know who else to ask! I am dying to figure out how to get rid of my annoying gray border around my photos on my new blog (www.pbandmyhoney.blogspot.com) You have helped me in the past and this is driving me bananas!! Ps. I prefer a bea

Boy did you ask the wrong person!!  I don’t know hardly anything about how the internet works.  If anyone out there reading this knows more about html than i do (which is pretty much nothing…) feel free to chime in and let Kristy and I know what’s up.

Also, before I answer the question, I should point out to you and future question askers that it looks like there might be a maximum question length that I was not aware of.  I’m not sure if I got your whole P.S. or not.  Since I can’t be certain, I will assume that when you say, “I prefer a bea” that you are referring to Aunt Bea.  And let me just say, “YES!  I, too, prefer Aunt Bea.”  What a delightful lady!

 

But I’ll do my best to answer your question (anyone who is not Kristy should stop reading now). Keep in mind that I actually have no idea what I’m talking about, nor have I ever done this before, so I’m just making stuff up.  Try this at your own risk!!!

Ok, here are some thoughts on how to remove the borders and shadows from images in the Blogger Watermark template designed by Josh Peterson. (someone should just ask Josh Peterson this question, since he probably knows).

Looking at your source code, it looks like there are at least two parameters controlling the image border.  The first is “padding,” which is the blank white border around your images between the edge of the image and the grey shadow effect.  The second is the grey shadow effect.  They are two separate parameters, which you can adjust independently.  In your code, you’ll find the following stuff:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;
background: #fff;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}
.post-body im
g, .post-body .tr-caption-container {
padding: 8px;
}

This is the part of your code that is adding the padding and the grey shadow effect, so you need to change this.  First thing you want to do is download a copy of your code and save it so you can replace it if you totally mess up your blog. I’m serious.  I know people always say stuff like this and you never do it, but you should totally do it this time.

This code is specifying the width and color of the padding, the width and color of the shadow, and specifying which page elements these parameters apply to.  Notice that the same borders appear on all photos anywhere on your blog – even in the sidebar and stuff. You need to decide if you want to get rid of both the padding, and the shadow effect, or just the padding.  You also need to decide if you only want the padding and/or shadow removed from your post-body images (images that appear inline with text in your posts) or if you want all padding removed from all images (like images in your sidebar and your “About Me” photo and stuff).

Here are some options:

  • If you want to get rid of all white borders everywhere, but leave the grey shadow effect everywhere, try changing the “padding: 5px;” and “padding: 8px;” lines to “padding: 0;”.  [If you’re specifying something to be 0 pixels, you don’t need to type “0px”, just “0” will work.]  This will remove the white borders from the photos, and the grey shadow effect will appear immediately next to the photos (instead of 5 or 8 pixels away).  I kind of like the shadow effect without the white border.
  • If you also want the shadows removed from everything, you can replace all of those “1px” and “5px” references to shadows with zeros as well. [i.e. shadow: 0 0 0 rgba(0, 0, 0, .5);]
  • If you’re feeling really adventurous, and you don’t want any borders or shadows of any sort on any images anywhere on your page, you might even try just plain deleting that whole chunk of code I’ve copied above.  I don’t think there’s any harm in leaving the code in with a bunch of 0 pixel widths, but it might be just as easy to delete it. Careful, though, this might unmake the universe.

Now, if you’re looking for something more complicated (like you want to remove the padding and shadow from all post-body images, but leave both the padding and the shadow on all images anywhere else, you’ll have to do something a little bit more complicated, but still something you can handle, I think.  Let me know and we can make it work for you.

Did that answer your question?  Hope you don’t wreck your blog trying any of these!!!

Ask Me Anything!!!

5 comments to The Post Where I Destroy The Internet with Aunt Bea

  • Ren

    ZOMG. I can't stand Aunt Bea. Yeesh!

  • reuben! Did I tell you this worked and you are amazing!! Thank you!! I know I can always count on you!

  • Kristy, you're welcome. I looked at your code again, and it looks like you chose a different route than the ones I suggested. You've left both the padding and the shadow in place, you just changed the color of the shadow to white, so it's invisible against your white background. This works too. I'm glad you got it figured out.

  • Between You and Me I am not sure Marshall liked that I asked another man to help, heeehheee. So he decided to try and figure it out on his own. I thought he did what you suggested! Oh Well! I am happy it is fixed now! Thanks again!

  • Kristy – that's funny. Well, between You and Me and the rest of the internet, I'm glad you guys found a fix that you're happy with.