Skip to:
Content
Pages
Categories
Search
Top
Bottom

Putting a border on images


  • Michael3185
    Member

    @michael3185

    I’ve just added the Allow-Images plugin to a forum to bring a little life to some topics. There’s a post you can see at http://mbforum.letsdoo.org/topic/visitors-who-arent-registered#post-17.

    I’m trying to figure out a way to put a 1 pixel grey border around images, like the avatar image on the left has. The avatar has its own CSS formatter, but I’m not so hot with CSS and can’t work out how to do it for the image in a post. I’ve used the usual bbcode [ img ] xyz [ /img ], but putting a CSS format tag in the [ img ] part stops the image from being displayed.

    I guess I could hard code it into the plugin, but any better ideas..?

    Edit:

    Duh. I answered my own question. I just changed the stylesheet

    img.avatar { display: block; border: 1px solid #ddd; border-width: 3px; border-style: double; }

    to

    img, img.avatar { display: block; border: 1px solid #ddd; border-width: 3px; border-style: double; }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Put it in your CSS?

    .threadpost img
    {
    Your CSS Here
    }


    Michael3185
    Member

    @michael3185

    Cheers Ipstenu – speedy reply! I realised that possibly the img, if defined in the stylesheet, would then be set when rendered. And it was.

    Rock on :) If you specify it my way (or img.threadpost I imagine), it won’t affect images outside of a post.


    Michael3185
    Member

    @michael3185

    Cheers Ipstenu. I changed the post image so text wraps, and left the avatar as it was;

    img { float: left; border: 1px solid #ddd; border-width: 3px; border-style: double; margin-right: 8px; }
    img.avatar { float: none; display: block; border: 1px solid #ddd; border-width: 3px; border-style: double; }

    Amazing how a simple change makes everything look so different.

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.