Add Avatars to Shoutbox..

[Skindstad]

Check my edit above. You had missed something. But after that it works fine for me.

[blueshead]

It lives!!

[Xikeon]

Sorry about that guys, quick mistake. Also fixed in my post for future reference.

[Lilmermaid2]

I tried this but we get double posts until we refresh the whole page! One without the avatar and one with. It's annoying. Is that supposed to happen? Can it be fixed?

[www.halowarsjunkie.com]

I am really having difficulties with this.



Can someone explain to me step by step on how to do this. I followed xikeon's instructions but it didnt work

[www.halowarsjunkie.com]

oh and can I ask how to place my shoutbox at the very top of my page without using plugins. because I am using the beta version and it wont let me use the plugin feature

[jendi77]

Hi, I tried putting this code in and the avatar comes up fine but now it displays the avatar instead of the username. How do I get it to show both?

[sleepysage]

Not working for me =[

[Tim Camara]

You'll have to tell us what's wrong or provide a link, or both, before we can help you with anything. 

[Demian Kinley]

try this,, is working for me..

   Shoutbox
<div class="$[shoutbox_class] container full">
<div class="title-bar"><h2>ShoutBox</h2>
<div class="content">
<div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}">
<div class="$[shoutbox_posts_class]" style="height: $[height];" aria-live="polite">
{if $[shoutbox_posts]}
$[shoutbox_posts]
{else}
<b>There are no posts here.{if $[can.post]} Start the conversation {if $[reply_box_position] == 'bottom'}below{else}above{/if}.{/if}</b>
{/if}
</div>
{if $[can.post]}
<div class="shoutbox_form_container">
$[shoutbox_form.header]
<div class="shoutbox_form content-box">
$[shoutbox_error]
$[refresh_button]
$[reply_box_buttons]
$[shoutbox_form.message.input]
$[message_character_count]
$[post_button]
$[cancel_button]
</div>
$[shoutbox_form.footer]
</div>
{/if}
</div>
</div>
</div>


   Template Individual post
{foreach $[shoutbox_post]}
<div class="$[shoutbox_post.content_class] content-box"{if $[shoutbox_post.edited]} title="$[shoutbox_post.edited]"{/if}>
&nbsp;$[shoutbox_post.created_by]&nbsp;  <span class="message">$[shoutbox_post.message]</span>
       <div style="float: left; height: 50px; width: 50px;">
$[shoutbox_post.created_by.avatar_small]
</div>
<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>
{/foreach}
   CSS  Style Sheet


   /* Shoutbox */
@shoutbox_message_background: @empty;
@shoutbox_message_border: @empty;
@shoutbox_message_border_radius: 5px;
@shoutbox_message_text_color: @empty;
@shoutbox_message_text_font: @empty;
@shoutbox_shouts_background: @empty;
@shoutbox_shouts_border: 0px solid @container_inner_border_color;
@shoutbox_shouts_border_radius: 5px;
@shoutbox_shouts_text_color: @empty;
@shoutbox_shouts_text_font: @empty;
@shoutbox_shouts_edit_color: @empty;
@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;
@shoutbox_shouts_edit_decoration: @empty;
@shoutbox_shouts_delete_background: @empty;
@shoutbox_shouts_delete_border: 0px solid @container_inner_border_color;
@shoutbox_shouts_delete_border_radius: 5px;
@shoutbox_shouts_delete_text_color: @container_text_color_1;
@shoutbox_shouts_delete_text_font: bold @default_forum_text_font_family;
@shoutbox_shouts_delete_text_decoration: none;
@shoutbox_shouts_selected_background: @container_highlight_color;
@shoutbox_reply_background: @empty;
@shoutbox_reply_border: 1px solid @container_inner_border_color;
@shoutbox_reply_border_radius: 5px;
@shoutbox_reply_counter_color: @container_text_color_1;
@shoutbox_reply_counter_font: 85% @default_forum_text_font_family;
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 10px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 10px; margin-right: 10px; padding: 5px 15px 5px 10px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }
.shoutbox_messages .shoutbox_edit_button.hidden { visibility: hidden; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 10px; height: 80px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: -5px; }
.shoutbox_form textarea.gray { color: #666666; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox .content { padding: 10px; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; word-wrap: break-word; }
.shoutbox_messages .details { float: right; margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }
.shoutbox_form.reply-box-bottom { margin-top: 10px; }
.shoutbox_form.reply-box-top { margin-bottom: 10px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 0 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }
.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 22px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { margin-left: 0px; }
.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }
.shoutbox_name { padding: 10px 0; height: 22px; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150%; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 174px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 114px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }

[Galactus]

Nov 17, 2012 4:26:20 GMT -8 Xikeon said:

Admin Home > Themes > Layout Templates

Choose Shoutbox and then the tab Individual Posts. For people who can do HTML and all: there's a variable you can choose at the right:
current_user -> avatar (or small/medium version). This will import the image.

For people who just want to have it imported, replace the whole template with:
{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}

This will look like this (I don't have an avatar, that's why it shows default avatar):

Awesommme! works like a charm - thx a lot!