[Template] Add avatars to shoutbox

[?Leslie?]

Awww...not a problem! Thank you for letting me know, I appreciate the reply. Perhaps Brian will know what to do in order to change the avatar sizes. Thanks anyways Clockwork!

[Brian]

Can anyone link me to a forum with avatars present in the shoutbox? I can give a CSS resize code once I test it in my developer console on a page with it live.

[Thomasss]

Mine has it.

pbafterdark.proboards.com

[?Leslie?]

theshimmeringwand.proboards.com

Mine has it too...with the slight alteration to the code which I posted above.  However, if you could add something that will allow us to put a specific size, I wouldn't really need the alteration.

[Brian]

Thanks.

Add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet, changing each height and width to the maximum avatar size allowed in the shoutbox posts.

.shoutbox_messages .shoutbox-post .avatar-wrapper { height: 50px; width: 50px; }
.shoutbox_messages .shoutbox-post .avatar-wrapper img { max-height: 50px; max-width: 50px; }

Then in your layout templates, change this code's float line width so that it's 10 pixels wider than your avatars.

<div style="float: left; width: 60px;">

[?Leslie?]

My avatar is still staying the same shape...it isn't squaring itself. I don't think I did anything wrong though. Would it matter that I've changed my forum avatar size to a specific shape and size? Right now the avatars are set to be 275px by 175px...will this keep them from being squares? I would have thought not. Sorry Brian, I'm awful!

[Brian]

Aug 21, 2013 12:54:37 GMT -8 ?Leslie? said:

My avatar is still staying the same shape...it isn't squaring itself. I don't think I did anything wrong though. Would it matter that I've changed my forum avatar size to a specific shape and size? Right now the avatars are set to be 275px by 175px...will this keep them from being squares? I would have thought not. Sorry Brian, I'm awful!

I'm not sure what you mean. Looking at your forum, the only avatar shown in the shoutbox is already square. You also haven't changed the widths and heights in the CSS I provided.

[?Leslie?]

Hmmm....to me it looks like the avatar is taller than it is wide. I left it at 50 X 50 because I thought that would make the images squared...when I look at them in the shoutbox they don't appear to be squared. But...its not really that big of a deal. Just as long as they aren't gigantic images!

[Brian]

Aug 21, 2013 14:10:00 GMT -8 ?Leslie? said:

Hmmm....to me it looks like the avatar is taller than it is wide. I left it at 50 X 50 because I thought that would make the images squared...when I look at them in the shoutbox they don't appear to be squared. But...its not really that big of a deal. Just as long as they aren't gigantic images!

Firefox says the image is 150x150, resized to 50x50. That's about as square as square gets.

[?Leslie?]

lol...stupid firefox! I have no idea why I have such issues...on google is says that the image is 50x50...that is annoying lol. I'll check on firefox in a bit and change it from there. Thanks for the help Brian!

[Brian]

Aug 22, 2013 4:18:55 GMT -8 ?Leslie? said:

lol...stupid firefox! I have no idea why I have such issues...on google is says that the image is 50x50...that is annoying lol. I'll check on firefox in a bit and change it from there. Thanks for the help Brian!

It's 50x50 on Firefox too. It tells you the original dimensions of the image, followed by what it was resized to.

[Welshling]

delusional.freeforums.net I must be reading the instructions wrong or something, because the avatar's aren't showing at all.

Thanks to anyone who replies.

EDIT: Ok i re read all the posts, found the fix by Eli and all's good.

[Thomasss]

Sept 30, 2013 8:52:21 GMT -8 Welshling said:

delusional.freeforums.net I must be reading the instructions wrong or something, because the avatar's aren't showing at all.

Thanks to anyone who replies.

EDIT: Ok i re read all the posts, found the fix by Eli and all's good.

Glad it all worked out for ya.

[?uee? ?' ?h? ?am?ed]

I used the fix by Eli, but for some reason my avatars still aren't showing, it brought my name back from when it disappeared from the first coding, but the avatars still aren't showing.

[Tk]

This code appears to just have deleted the name of the people posting... It doesn't matter whether it is in the sidebar or under the forum...

Help?

Forum:Here

EDIT: This fixed it thanks

Apr 28, 2013 13:22:06 GMT -8 Thomasss said:

Okay everyone, i think i fixed the code for right now. See if this works for you guys.


{foreach $[shoutbox_post]}
<div class="$[shoutbox_post.content_class] content-box"{if $[shoutbox_post.edited]} title="$[shoutbox_post.edited]"{/if}>
<div style="float: left; width: 60px;">
$[shoutbox_post.created_by.avatar_small]
</div>

$[shoutbox_post.created_by]: <span class="message">$[shoutbox_post.message]</span>
<span class="details">
$[shoutbox_post.edit_button]
$[shoutbox_post.date]
{if $[shoutbox_post.edited]}<span class="edited">*</span>{/if}
</span>
$[shoutbox_post.delete_button]
<div class="ui-helper-clearfix"></div>
</div>
{/foreach}