WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding a border to selected images (16 posts)

  1. Christiaan
    Member
    Posted 8 years ago #

    I want to add a black 1 pixel border to most, but not all, of the images that I post to my blog, including those that are also links.

    What's the best technique for doing this. I'd be particularly interested in utilising css rather than simply adding the 'border' tag using the HTML editor.

    It would be nice if the WP image system allowed me to assign a class when I upload, but I guess I'm going to have to add a class to my stylesheet and then assign the class to any relative images using the HTML editor.

    If so, what code do I need to add to my stylesheet? And what code will I need to add to a post when I include an image which I want to have a border?

  2. marcy
    Member
    Posted 8 years ago #

    Since you want the border on most images, I would add

    border: 1px solid #000;

    to the CSS for "img," then make a new class, like

    .no-border
    {
    border: none;
    }

    At least I think that would work.

    Then, in your posts, any time you don't want the image to have a border, include class="no-border" in the HTML img tag.

  3. Christiaan
    Member
    Posted 8 years ago #

    Thanks Marcy, however this adds borders to emoticons. Should be able to sort it our from here though, thanks.

  4. Christiaan
    Member
    Posted 8 years ago #

    One thing though, my stylesheet (Kubrick) has p img instead of just img.

    How do I make a new class for borders? Will this work:

    .border p img

  5. marcy
    Member
    Posted 8 years ago #

    Are the emoticons in the posts?

    If not, you could create a class that would only apply in "post" divs.

    #post img
    {
    border: 1px solid #000;
    }

    Otherwise I think you're right that

    .border p img

    would work.

  6. Christiaan
    Member
    Posted 8 years ago #

    Yeah, emoticons are in posts, although I could just refrain from using them.

    .border p img didn't seem to work.

    This was in the stylesheet:

    p img {
    padding: 0;
    max-width: 100%;
    }

    So I added this:

    .border p img {
    padding: 0;
    max-width: 100%;
    border: 1px solid #000;
    }

    And then added class="border" to one my images but it didn't work. Any ideas?

  7. Direkt
    Member
    Posted 8 years ago #

    Well, if you are going to add the class, what you'd just want to do is have it just as:

    .border { style stuff here }

  8. Christiaan
    Member
    Posted 8 years ago #

    Great, that did the trick. I was also able to use this on linked images (by adding the border class), which overrides: a img { border: none; }

  9. Sam_a
    Member
    Posted 8 years ago #

    And then added class="border" to one my images but it didn't work.

    I think you want

    img.border { border: 1px solid black;}

    p img {...} is just an image within a paragraph -- I don't think it matters for your case.

  10. Christiaan
    Member
    Posted 8 years ago #

    Out of interest, why would you use img.border as opposed to .border?

  11. whooami
    Member
    Posted 8 years ago #

    img.border would allow you to have seperate borders for different items. For instance, you can put a different kind of border around flash objects using object.border

    its just more control.

    My smilies within posts do not contain borders, yet they are images, and my other images do get borders :P

  12. Sam_a
    Member
    Posted 8 years ago #

    Out of interest, why would you use img.border as opposed to .border?

    I depends -- but in this case I was trying to be more specific, and also point out the problem with the previous selector:

    .border p img {} means "an image in a paragraph in any element marked with class=border." In your case, you wanted to refer to an image that was itself marked with class=border (img.border).

    /* no borders on images... */
    img { border: none; }
    /* ...except ones marked as [img class="border"] */
    img.border { border: 1px solid black;}

  13. marcy
    Member
    Posted 8 years ago #

    That's the aspect of CSS I haven't quite grasped yet -- I know how to make a class and use it, but the greater specificity stuff is pretty new to me.

    Glad you other folks stepped in to clear it up.

  14. Christiaan
    Member
    Posted 8 years ago #

    I've actually ended up adding the following to my stylesheet:

    img.border {
    border: 1px solid #000;
    }

    img.margin-r {
    margin-right: 10px;
    }

    img.margin-l {
    margin-left: 10px;
    }

    img.border-margin-r {
    border: 1px solid #000;
    margin-right: 10px;
    }

    img.border-margin-l {
    border: 1px solid #000;
    margin-left: 10px;
    }

    This then gives me the ability to control image borders and margins. Now, if only I could add a pulldown menu to the "Insert/edit image" popup window with these options!

  15. Sam_a
    Member
    Posted 8 years ago #

    I've actually ended up adding the following to my stylesheet:

    img.border {...}

    img.margin-r {...}

    img.margin-l {...}

    You can actually do it all with those three selectors, if you use multiple classes:

    <!-- image with border -->
    <img class="border" .../>
    <!-- image with right-margin -->
    <img class="margin-r" .../>
    <!-- image with border and right-margin -->
    <img class="border margin-r" .../>

  16. Christiaan
    Member
    Posted 8 years ago #

    Ah, cool, thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags