When I input the code to include the image in a post, my image is surrounded by the post-form colour. In other words, I have an image with a white background which is surrounded by the post-form colour. The image is the only content in the post.

Posts without images are surrounded by the post content colour. In other words, the text has a white background throughout. No post-form colour as in the outer edge of the image.

How can I change so that the image is surrounded by the post content colour, in this case white, instead of the post-form colour?

Using bbpress .9.0.2, with allow images .7.1

[@chrishajer Participant 17 years ago]

Link to your forum?

[@chrishajer Participant 17 years ago]

The link that was posted gave me a 404 error. Maybe someone will be able to resolve it by knowing off-hand rather than having to see it.

[@_ck_ Participant 17 years ago]

Probably needs a css tweak but I’d need a demo.

[@kannued Participant 17 years ago]

I had the 404 too when I tested from the post. Then I wondered if there was a no follow. So I copied the link, then pasted it into a new window or tab. It worked then.

[@kannued Participant 17 years ago]

I added this

.threadpost img

{

background-color: transparent;

max-width:100%;

}

But it didn’t change anything. The max-width is to restrict larger images.

[@musnake Member 17 years ago]

Until someone who know what they’re doing chimes in… you could use CSS Selectors (of your own making e.g. ‘foo’) to trap and apply styles to elements with the ‘foo’ attribute…

[foo]        -- Has an attribute named "foo"

[foo="bar"]  -- Has an attribute named "foo" with a value of "bar" ("bar")

[foo~="bar"] -- Value has the word "bar" in it somewhere ("blue bar stools")

[foo^="bar"] -- Value begins with "bar" ("barstool")

[foo$="bar"] -- Value ends with "bar" ("I was at the bar")

[foo*="bar"] -- Value has bar somewhere ("I was looking for barstools")

So I guess, if you had <img foo='inpost'... and

[foo ="inpost"] { background-color: transparent; max-width:100%;} that might work.

If you posted an actual link to the test site (or emailed it), folks could use FF web developer plugins etc to nail down the CSS tree for that theme…

I hope this helps.

[@kannued Participant 17 years ago]

I did use web developer tool. The buffalo’s outer box is div class=”threadpost”. Then the next box which the picture sits in is div class=”post”. For the text only post, the outer box sits outside of the threadpost, inside the thread li.

I would be willing to email the link to the moderators or to yourself. But I’m not willing to post the link here for the test site.

[@musnake Member 17 years ago]

I’m only 3 days new to bbPress so I hope I don’t steer you wrong…

There are probably alternating colors too…

#thread li.alt .threadpost

#thread li .threadpost

I think it’s the background color of the li not the img to be changed…

Hmm, I’m going to bow out, sorry. The solution is probably ridiculously facile and I look forward to seeing it. A bbPress content filter for the img tag inside an li?

Sorry!

[@kannued Participant 17 years ago]

Musnake, you had the solution. If I had posted another reply, I would have seen that, of course, the posts alternate background colours. Thank you for pointing me in the right direction. Essentially, there was nothing wrong.

Related to this, the width of the text-alone box is wider than the image-only post. In sending more posts to the topic, the first one with the buffalo seems to have set the width for that alternate color. Then the white text only background is the width for all subsequent posts of that color. Isn’t the idea to have the same width for all the posts? Isn’t that how it is designed?

[@kannued Participant 17 years ago]

I solved the width problem!