Hello my little bumble bees! It's tutorial time again and today I'm going to share how to remove those annoying default borders from around your photos. Example:
Ugly, right? Here's how to get rid of these pesky borders, once and for all! :)
Here's what you need to do:
1. Log into blogger, and select the blog you'd like to remove your photo borders from.
2. Go to Template >>> Customize >> Add CSS.
3. Put the code (below) in the box and watch those ugly disappear!
4. Don't forget to save your changes!
Now here is the lovely css code (provided by the web):
.post-body img, .post-body .tr-caption-container, .ss, .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;
}
Have a question? A comment? A suggestion? Just comment below! I'd love to hear from you. :)
xx Nicole Rose
This is awesome, thank you so much, Rose! By the way, what CSS snippet did you use to get your images to fade on hover?
ReplyDeleteTane ♥
To get the CSS code for fading images on hover, go to this link: http://a-dancers-pointe.blogspot.com/2014/02/how-to-make-your-photos-fade-on-hover.html#.UxyqQPldWSo
DeleteI hope that helps! :)
xoxo,
Rose
Oh, thanks so much, Rose!
DeleteBut wait- how do you make it fade slowly, like yours?
DeleteWhen I add it- it works, but on hover, it fades too fast for me.
DeleteHey Rose, I'm trying to design someone else's blog, and this code and the fade on hover code both don't seem to work. I'm using the Watermark Template. Help? :(
ReplyDeleteHello Autumn. :)
DeleteThe codes I use work for the Simple template, and since I have very little experience with the Watermark Template, I don't know how I can help you. Maybe you could give me the link to the blog you are designing, and I could check it out? I don't know. :-/ Sorry.