bbPress Support Forums » Topic: Putting a border on images

Michael3185 on "Putting a border on images"

Michael3185 — Fri, 03 Jul 2009 18:28:52 +0000

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.

Ipstenu on "Putting a border on images"

Ipstenu — Fri, 03 Jul 2009 17:43:50 +0000

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

Michael3185 on "Putting a border on images"

Michael3185 — Fri, 03 Jul 2009 16:59:09 +0000

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

Ipstenu on "Putting a border on images"

Ipstenu — Fri, 03 Jul 2009 16:55:31 +0000

Put it in your CSS?

.threadpost img
{
  Your CSS Here
}

Michael3185 on "Putting a border on images"

Michael3185 — Fri, 03 Jul 2009 16:50:12 +0000

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; }

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