image boarder « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » CleanCut

image boarder

15 posts from 6 voices

Started 2 years ago by TheSamEffect
Latest reply from Dude
This topic is closed
This topic is not a support question

Tags:

TheSamEffect
Member

I need to know how to remove specific image boarders. I like the boarders on most images, but I have some specific ones I'd like to remove. help? thanks

Posted 2 years ago #
Dude
Dude
You can do this by adding a style information to the img tag. So if you're using the wordpress editor you'll see something like:

img src="wp-content/uploads/2010/05/your-image.jpg" alt="" title="" class="alignnone size-full wp-image-74"

add style="border: 0px;" to this tag - it should look like this:

img src="wp-content/uploads/2010/05/your-image.jpg" alt="" title="" class="alignnone size-full wp-image-74" style="border: none;"

If you've many images you want to display without a border you can also define a class in the stylesheet ( filename extension .css). The syntax should look like this:
```
.no-border {
border: none;
}
```
Now if you want to display an image without a border just add the class no-border to the image. You don't need the style information anymore.

img src="wp-content/uploads/2010/05/your-image.jpg" alt="" title="" class="alignnone size-full wp-image-74 no-border"

The Dude

** edited by James Morrison to move corrected .no-border code here and change 0px to none **
Posted 2 years ago #
TheSamEffect
Member

awesome. thanks so much

Posted 2 years ago #
autonom
Member

thanks from me too!

Posted 2 years ago #
jmillgraphics
Member

thank you
thank you

I only learn code along my journey, so this was a HUGE help lol. I feel silly that I didn't get this on my own.

Posted 2 years ago #
3dfocus
Member

Hi

I’m am having trouble implementing this. I have gone into Appearance – Editor. Then I click on Stylesheet under Styles. Right at the bottom of the css file I have pasted -

.no-border
{
border: 0px;
}

I then ‘Update File’.

I then go to one of my posts with an image in it and go into the html window. However, when I add ‘no border’ a border is still present. Here is a copy of what I have added ...

http://www.3dfocusnews.com/wp-content/uploads/2010/08/3D-TV-World-Forum-Image-d.jpg"><img class="alignnone size-full wp-image-136 no-border

Here is the link to the post - http://www.3dfocusnews.com/?p=51

I would like to remove all borders from all my images.

Any advice?

Thank you,

Jon

Posted 2 years ago #

Dude
Dude

I think you messed with my tutorials :-)

I visited your website and in the sourcecode I could find following:

<img class="alignnone size-full wp-image-136 border: none" title="3D TV World Forum Image d" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3D-TV-World-Forum-Image-d.jpg" alt="" width="553" height="368" />

You can remove the border by using a class OR by defining the border in the style tag. You mixed both solutions and so it doesn't work.

You can use a class - the source code would look like that (you defined no-border right in your style.css - I've checked it already):

<img class="alignnone size-full wp-image-136 no-border" title="3D TV World Forum Image d" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3D-TV-World-Forum-Image-d.jpg" alt="" width="553" height="368" />

OR you write border:none; in your style tag (style="border:none;") like:

<img class="alignnone size-full wp-image-136" title="3D TV World Forum Image d" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3D-TV-World-Forum-Image-d.jpg" alt="" width="553" height="368" style="border:none;" />

The Dude

Posted 2 years ago #

3dfocus
Member

Hi 'The Dude'

What a massive help you have been. Sorry for the delay in responding but I have been away.

I'm really sorry but I'm still struggling to remove the borders. I add the term 'no-border' but a border will still appear. I have kept the class in the css so thought I could just add the no-border tag so no borders appeared.

Here is the example of some code for one of my pictures ...

I also tried it with the other images and have the same problem. Is there a way of turning off the border by default?

Thank you for your time,

Jonathan

Posted 2 years ago #

Dude
Dude

Try this example code:

<a href="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png"><img title="3dtc changes lives orange tv" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png" alt="" style="border:none;"/></a>

<a href="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png"><img title="3dtc changes lives orange tv" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png" alt="" class="no-border"/></a>

The Dude

PS: Please put your code between backtick ( ` ) characters, because otherwise it won't show up as text.

Posted 2 years ago #

3dfocus
Member

Hi Dude

Thank you for your continued help and I'm sorry for my persistent questions! I don't know what I am doing wrong but I still get borders.

For example, I tried the above technique and here is the resulting code ...

'<img class="alignnone size-full wp-image-159" title="3dtc changes lives orange tv" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png" alt="" width="541" height="101" class="no-border"
<div></div>'

As you can see, I have put in the no border class.

In the template code, is there anyway of switching off the border code entirely? I would rather do it that way as I will never want borders on any of the images.

Thanks Dude and sorry again for the hassle!

Jon

Posted 2 years ago #

Dude
Dude

You defined two class declarations --> class="alignnone size-full wp-image-159" and class="no-border" - please write only one class decleration, so combine both:

<img class="alignnone size-full wp-image-159 no-border" title="3dtc changes lives orange tv" src="http://www.3dfocusnews.com/wp-content/uploads/2010/08/3dtc-changes-lives-orange-tv.png" alt="" width="541" height="101" />

If you want to remove the borders from all images you need to find img classes in your stylesheets and delete all "border properties".

i.e.

.box img, .entry img, .wp-caption{
border:1px solid #E1E1E1;
}

.box a:hover img, .entry a:hover img, .entry-previewimage:hover{
border:1px solid #999;
}

turns to

.box img, .entry img {
border:none;
}

.wp-caption{
border:1px solid #E1E1E1;
}

.box a:hover img, .entry a:hover img {
border:none;
}

.entry-previewimage:hover{
border:1px solid #999;
}

The Dude

Posted 2 years ago #

3dfocus
Member

Hi Dude

Thank you for your continued help. I'm still having trouble. I have copied exactely how you said and it still has a border...

''

Also, I can't find that code in my Newscast Stylesheet file.

I feel bad keep asking for help. Do you offer any paid for support so you could go into my Wordpress account to have a look?
I'm quite keen to get this fixed soon.

Thanks again

Posted 2 years ago #
Dude
Dude

I'll have a look at it - I don't promise anything. I think it's only a minor problem, so I won't charge anything for now.

Posted 2 years ago #
Stephen
Member

I would put this code right before the title tag if you don't want a border. style="border: none; background: none;"

Posted 2 years ago #
Dude
Dude

Thanks for the hint. I posted various methodes to remove the border in the faq thread here: http://www.kriesi.at/support/topic/how-to-remove-the-image-borders

Posted 2 years ago #