Image in top right corner of first post

[ericgtr]

This is a question for some of you design guru's. I want to place a small image (say 75x75) in the top right hand corner of the first post, in the post itself. I can work out the condition I just need to know the formatting, any help would be great.

[Freesteyelz]

I know you've stated you can work out the condition but to save you time:


<if condition="$post[postcount]==1">
image code here...
</if>



As for your image what postbit template will it be for? If it's for Legacy, do you want the text to wrap around the image?

[ericgtr]

I know you've stated you can work out the condition but to save you time:


<if condition="$post[postcount]==1">
image code here...
</if>



As for your image what postbit template will it be for? If it's for Legacy, do you want the text to wrap around the image?
Yes, it's for the legacy postbit and it would be ideal if the text would wrap it if necessary. :)

[Freesteyelz]

I've added the code just below the title but within the message element. It'll be in form of a background rather than an image. Try:

Find:


<!-- message -->
<div id="post_message_$post[postid]">



Add after:

<div class="postbitimg"></div>



Main CSS in Additional CSS Definitions add:


.postbitimg {
float:right;
display:block;
width:100px;
height:30px;
margin:0 0 10px 10px;
padding:3px;
border:1px solid #000000;
background:#ffffff url(/img/path) no-repeat top left;
}



It's important to define the width and height settings for float blocks. Edit out the variables you don't want and change the values for each to suit your needs. The padding applies inside the element while the margin applies outside it.

I hope this is workable for you. If not just holler me back. Though, I may respond tomorrow since it's about to be party time! :)

[ericgtr]

Thanks for the details, you've been helpful. I should have probably specified that I need javascript to to into this slot, the javascript puts the image with embedded data in it (from digg). Sorry for not being more clear, I don't believe I can use javascript in css from what I can tell.

[Freesteyelz]

Not in CSS but you can add Javascript within the <div></div> tags. :)

[ericgtr]

I tried that and it puts it to the right but more on to the middle bottom, how would I tweak it to top? Ideally as high as the post title.

[Freesteyelz]

Did you add the CSS in Additional CSS Definitions? If not, then add that bit; when you do you may need to adjust the width and height values. If yes, then the alignment is due to the Javascript code.

[valdet]

Although this brings the same effects as Freesteyelz is suggesting, try the code from this mod..
https://vborg.vbsupport.ru/showthread.php?p=1402471

Regards,
Val.