May 4, 2013 13:50:46 GMT -5 PREVIEW:

Admin > Themes > Layout Templates > Home
On a default theme, scroll down to line 25, and replace EVERYTHING from line 25 below, with the following:

Thanks to @smashmaster3 for correcting an error I was unaware of (2 technically).
<!-- Slimline Info Center by Stinky666 - http://smangii.proboards.com / Do not remove this header -->
{if $[show_stats]}
<div class="container stats">
   <div class="title-bar">
   </div>
   <div class="content">
       <table>
           <tbody>
               <tr>
                   <td width="30%" style="padding: 5px 10px 5px 10px;">
                       <table>
                           <tbody>
                               {if $[last_updated_thread]}
                               <tr>
                                   <td>
                                       <b>Last Update:</b><a href="$[last_updated_thread.recent_link.href]" class="lastpost"> $[last_updated_thread.subject]</a><br />
                                       <b>Updated by:</b> $[last_updated_thread.last_post.created_by_user]<br />
                                       <b>When:</b> $[last_updated_thread.last_post.date]
                                   </td>
                               </tr>
                               {/if}
                           </tbody>
                       </table>
                   </td>
                   <td width="25%" style="padding: 5px 10px 5px 10px;">
                       <table>
                           <tbody>
                               <tr>
                                   <td>
                                       <b>Threads:</b> $[total_threads]<br />
                                       <b>Posts:</b> $[total_posts]<br />
                                       View our <a href="$[recent_posts_link.href]"><u>most recent</u></a>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
                   <td width="20%" style="padding: 5px 10px 5px 10px;">
                       <table>
                           <tbody>
                               <tr>
                                   <td>
                                       <b>Categories:</b> $[category.length]<br /><b>Boards:</b>
                                       <script type="text/javascript">
                                           document.write($(".board").length);
                                       </script>
                                       <br />
                                       <b>Sub-Boards:</b>
                                       <script type="text/javascript">
                                           document.write($(".sub-boards a").length);
                                       </script>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
                   <td width="25%" style="padding: 5px 10px 5px 10px;">
                       <table>
                           <tbody>
                               <tr>
                                   <td>
                                       <b>Members:</b> $[total_members]<br />
                                       <b>Newest:</b> $[newest_user]<br />
                                       view today's <a href="/members?dir=asc&sort=name&view=birthdays">birthdays</a>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
               </tr>
               <td colspan="4">
                   <table>
                       <tbody>
                           <tr>
                               <td style="padding: 10px 10px 10px 10px;">
                                   <table>
                                       <tbody>
                                           {foreach $[online_user]}
                                           $[online_user]{if $[online_user.invisible]} <span class="small">(ninja)</span>{/if}$[online_user.comma]
                                           {/foreach}
                                           {if $[total_staff_online] == 0}
                                           {if $[total_members_online] == 0}
                                           There are currently no members online.
                                           {/if}
                                           {elseif $[total_members_online] == 0}
                                           {if $[total_staff_online] == 0}
                                           There are currently no members online.
                                           {/if}
                                           {/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}
                                       </tbody>
                                   </table>
                               </td>
                           </tr>
                       </tbody>
                   </table>
               </td>
               <tr>
                   <td colspan="4" style="padding: 5px 10px 5px 10px; border-top: 1px dashed #3a474d;">
                       <table>
                           <tbody>
                               <tr>
                                   <td>
                                       <table>
                                           <tbody>
                                               <tr>
                                                   <td width="33%" style="text-align: center;">
                                                       <a href="/members?dir=desc&sort=last_online&view=online">Currently Online:</a> <a href="#" class="onlinetotal" title="$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}"><u>$[total_online]</u></a> ($[total_guests_online] {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">guest{if $[total_guests_online] != 1}s{/if}{/if}</a>)
                                                   </td>
                                                   <td width="34%" style="text-align: center;">
                                                       <a href="/members?dir=desc&sort=last_online&view=today">Online in the Last 24hrs:</a> <a href="#" class="onlinetotal24" title="$[total_staff_online_24] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}"><u>$[total_online_24]</u></a>
                                                   </td>
                                                   <td width="33%" style="text-align: center;">
                                                       Most users online: $[most_users_online]
                                                   </td>
                                               </tr>
                                           </tbody>
                                       </table>
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
               </tr>
           </tbody>
       </table>
   </div>
</div>
{/if}



Now go to Admin > Themes > Advanced Styles and CSS > Style Sheet.
Find line 1260, and you should see: /* Info Centers */
If you don't see that, or can't find it for any reason, simply hit ctrl+f, then type in "Info Centers". Press enter, and it should take you to it.
Now we need to adjust some widths, because this info center has its own.

Line 1271:
.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }
Remove width: 43%;, so it becomes
.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; }

Line 1279, you should see:
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }
Remove width: 57%; part, so it now looks like:
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; }


Finally, scroll to the very bottom and press enter once or twice, and paste the following in:

/**************************************************************************
*           Users Online + Last 24hrs Legend                             *
**************************************************************************/
/* Users Online Total */
a.onlinetotal {
 position: relative;
 text-decoration: none;
}
a.onlinetotal:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
   right: -80px;
 background: rgba(255, 255, 255,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #000000;
 font-size: .86em;
   .box-shadow(0px, 1px, 4px, @shadow_color);
}
a.onlinetotal:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}

/* Users Online in 24hrs Total */
a.onlinetotal24 {
 position: relative;
 text-decoration: none;
}
a.onlinetotal24:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
   right: -80px;
 background: rgba(255, 255, 255,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #000000;
 font-size: .86em;
 .box-shadow(0px, 1px, 4px, @shadow_color);
}
a.onlinetotal24:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}

If you need assistance for editing the colours, leave a reply asking

---

Updates...
[2nd August 2013]: Moved "Guests", and added link for Guest IPs.