Info Center Mod w/Round Avatars

After a little bit of help from support.proboards.com, I was able to finalize our info center at the bottom of our forum on the main page. The code was originally written by Hades of PB Support. However, I adjusted a bit with in his original code and made it my own, also removing two errors. With that being said, Here is the code that you will need to create this info center.


Preview

Go to Admin >> Themes >> Layout Templates >> Home
* Find the part of code that says
{if $[show_stats]}
Copy The code From the above all the way to the bottom and delete it. Then add the following code:

{if $[show_stats]}

<div class="container stats">

<div class="title-bar"><h2>Board Stats</h2></div>

<div class="content">

<table>

<tbody>

<tr>

<td>

<table>

<tr>

<td class="icon">$[image.stats]</td>

<td class="info">

<table>

<tbody>

   <tr><td><b>Topics and Posts</b><br>We have a total of $[total_threads] topics and $[total_posts] posts.<br>

{if $[last_updated_thread]} $[last_updated_thread.last_post.created_by] recently posted in $[last_updated_thread.recent_link] ($[last_updated_thread.last_post.created_on]).</td></tr>{/if}

<tr><td>$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</td></tr>
   
   <tr><td><br><b>Members</b><br>Currently we have $[total_members] members. Please welcome our <b>newest member</b>, $[newest_user], to the board!</td></tr>

</tbody>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="icon">$[image.members]</td>

<td class="info">

<table>

<tbody>

   <tr><td><b>Users Online Now</b><br>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, and {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Vistor{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a> are online{/if}.<br>
           {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><br />$[online_user]

   {/foreach}
   </td></tr>
   

   <tr><td><br><b>Active Users in the Last 24 Hours</b> - <b><span style="color: #c774ff;">Admin</span></b> | <b><span style="color: #ffa536;">Moderator</span></b> | <span style="color: #03de35;">Designer</span> | <span style="color: #f1fc01;">Coder</span> | <span style="color: #00acc5;">Registered User</span><br><a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_staff_online] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, and $[total_guests_online_24] Visitor{if $[total_guests_online_24] != 1}s{/if} were online in the last 24 hours.<br>
           
  {foreach $[online_user]}<a href="$[online_user.href]" style="float: left; margin-top: 5px;" title="$[online_user.name]">$[online_user]

   {/foreach}

   

<tr><td>

{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}


{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}</td></tr></tbody></table></td></tr></table></td></tr><tr>



<td></td></tr>

<tr class="last">

<td></td></tr></tbody></table></div></div>

{/if}

Also, you will see a user legend next to the Active 24 hours part, simply find that part of the code, and change the names and colors of the types of users in the legend to what ever suits your needs.

<tr><td><br><b>Active Users in the Last 24 Hours</b> - <b><span style="color: #c774ff;">Admin</span></b> | <b><span style="color: #ffa536;">Moderator</span></b> | <span style="color: #03de35;">Designer</span> | <span style="color: #f1fc01;">Coder</span> | <span style="color: #00acc5;">Registered User</span><br><a class="$[view_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_staff_online] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, and $[total_guests_online_24] Visitor{if $[total_guests_online_24] != 1}s{/if} were online in the last 24 hours.<br>


Now, if you want to get the rounded avatars instead of the square ones, and have a border around them, you will need to do the following:

Go to Admin >> Themes >> Advanced Styles and CSS

Switch to the Style sheet Tab, scroll all the way to the bottom and add the following


.stats .avatar-wrapper img { .rounded-corners(50px); border: 2px solid #1c1c1c;}

There you can change the rounded corners, the border and color of the border.

Enjoy

~ Teg