Image Border - 2 ways to make it disappear!

I've often seen questions in the Blogger Help Forum, concerning the little border around an image. Mostly, the bloggers are asking "How do I get rid of the border around my images?"




Well, most answers from the 'helpers' are uniform - "You have to do this and that to the Template".

That's NOT exactly true! Yes, it is one way, but there is also another way - on most Blog Templates!



Here's two ways to rid your blog of the image border. One easy way - which doesn't require a knowledge of the Template Codes, and the more traditional way - 'adjusting the code' on your Template.


1) How many bloggers know how to use the Fonts and Colors option on their template? Not many.
Well, if you do not like the image border, get to know your Fonts and Colors. In most templates, there is an Option for changing the Color of the Blog Border(s). This includes the Image Border, folks!

• Go to the 'Customise' (Layouts)(Page Elements) Screen
• Click on 'Fonts and Colors'
• Search the scroll bar for 'Border Color'
• Change that to the same color as the 'Blog Background Color'

Are you with me, folks? White on white, Green on green, or whatever? Can't see it, can you?

Well, it's the same with the Image Border color - if it is the same as the Blog Background, you won't see it, either. Image Border is (effectively) - GONE !


2) OK - this is where you have to be careful, because you have to enter/change code on your Template. Naturally, the first thing you do is to download a copy of the Template, before working on it.

Say, for instance, that you can't change the 'border color' on Fonts and Colors. How are you going to change the border around the images? One way is: Without removing the image border, or changing the size of it on the Template, you can also 'Change the Color' of the border, by using the Template code. That is, match it up with something else - eg:

.post img {
padding:4px;
border:2px solid $bordercolor;
}

---

Change that Color from $bordercolor; to, say, $titlecolor; if you just want to change the color of it.

---

.post img {
padding:4px;
border:2px solid $titlecolor;
}


Or, if you really do want to get rid of the border, you have to change the size code to ' 0 '. Like this:

.post img {
padding:4px;
border:2px solid $titlecolor;
}

---

Change the 'border:2px solid...' to 'border:0px solid...'

---

.post img {
padding:4px;
border:0px solid $titlecolor;
}

< SAVE TEMPLATE >

Then, make another copy of your Template, after the changes are made!


There you go, folks - easy as.


TOP