Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #278

    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

    #30611

    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 **

    #30613

    awesome. thanks so much

    #30614

    thanks from me too!

    #30615

    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.

    #30616

    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

    #30617

    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

    #30618

    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

    #30619

    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>

    or

    <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.

    #30620

    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

    #30621

    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

    #30622

    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

    #30623

    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.

    #30624

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

    #30625

    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

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘image boarder’ is closed to new replies.