Adding avatars in info center.

[Milk]

How do I replace the usernames in the info center with avatars?
Could someone please provide me with a code?

Here is an example of what I mean: adoxographyv2.boards.net/

[Craig]

Hi

All usernames, or just those in the online and online in past 24 hours sections?

[Alanna 🥀🖤]

Hey! This is what I have exactly on Adoxography 2.0 for online listings:

{foreach $[online_user]}

<a href="$[online_user.href]" style="float: left; margin-right: 5px; margin-top: 5px;" title="$[online_user.name]">$[online_user.avatar_small]</a>

{/foreach}

{if $[total_online_not_shown]}

, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>

{/if}

And for 24 hour listings:

{foreach $[online_user_24]}

<a href="$[online_user_24.href]" style="float: left; margin-right: 5px; margin-top: 5px;" title="$[online_user_24.name]">$[online_user_24.avatar_small]</a>

{/foreach}

{if $[total_online_not_shown_24]}

, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>

{/if}

[Milk]

@khristian Beautiful! This is what I was looking for. Thank you so much!

(Craig Apologies for being vague. I meant both.)

[blueshead]

Can someone guide me through this? I'm not sure where to place this. Thank you...

[Alanna 🥀🖤]

May 31, 2014 6:32:52 GMT -8 blueshead said:

Can someone guide me through this? I'm not sure where to place this. Thank you...

Go to Admin > Structure > Layout Templates > Home. If you are using the default theme, around line 79 you will see this code:

{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}

Replace that with this:
{foreach $[online_user]}

<a href="$[online_user.href]" style="float: left; margin-right: 5px; margin-top: 5px;" title="$[online_user.name]">$[online_user.avatar_small]</a>

{/foreach}

{if $[total_online_not_shown]}

, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>

{/if}

On line 104 you will see this code:
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}

Replace that with this:
{foreach $[online_user_24]}

<a href="$[online_user_24.href]" style="float: left; margin-right: 5px; margin-top: 5px;" title="$[online_user_24.name]">$[online_user_24.avatar_small]</a>

{/foreach}

{if $[total_online_not_shown_24]}

, and <a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>

{/if}

Does that help?

[Alanna 🥀🖤]

I decided to just go and post it in the template modifications board: support.proboards.com/thread/513462

[blueshead]

Thank you @khristian..worked out fine... I did it for members and not people online for 24 hours..

Nice stuff..

[blueshead]

May 31, 2014 8:56:28 GMT -8 blueshead said:

Thank you @khristian..worked out fine... I did it for members and not people online for 24 hours..

Nice stuff..

Ha..almost perfect (i went ahead and did the 24 hours too)..exceeept.. How do I make the avatars smaller..  I see   avatar.small

But I want smaller..  can I assign a px to that? And how? 

[Alanna 🥀🖤]

May 31, 2014 8:43:48 GMT -8 @khristian said:

I decided to just go and post it in the template modifications board: support.proboards.com/thread/513462

See this ^

[blueshead]

May 31, 2014 13:45:47 GMT -8 @khristian said:

May 31, 2014 8:43:48 GMT -8 @khristian said:

I decided to just go and post it in the template modifications board: support.proboards.com/thread/513462

See this ^

Silly me not to read your post..I Googled small and CSS and tried "smaller" and "x-small"

That's why you're a magical coder..I'm just a blue collar carpenter! 

And you can "quote" me on this..  

Oh yea..All perfect now!