Four Column Info Center

This info center mod is the same thing as the info center mod for Our Forum Version 1. It gives your info center stats in four columns.

Here is a preview of what it looks like:


First, go to Admin > Themes > Layout Templates > Home. Locate the begin of the info center
{if $[show_stats]}
Select the current code and go all the way down to the closing {/if} portion of the info center and press delete. Then, copy and paste the following code where that code just was.

{if $[show_stats]}
<div class="container stats">
<div class="content">
   <table style="width: 100%; height:100%; border: 0px;" >
 <tr>
     <th scope="col" width="275px" style="color: #FFFFFF; font-family: Verdana, Arial; font-size: 16px; font-weight: normal; padding-left: 10px;"><br />    Forum Statistics<br /><br /></th>
     <th scope="col" width="275px" style="color: #FFFFFF; font-family: Verdana, Arial; font-size: 16px; font-weight: normal; padding-left:10px;"><br />    Users Online Now<br /><br /></th>
   <th scope="col" width="275px" style="color: #FFFFFF; font-family: Verdana, Arial; font-size: 16px; font-weight: normal; padding-left: 10px;"><br />    Users Online Today<br /><br /></th>
     <th scope="col" width="175px" style="color: #FFFFFF; font-family: Verdana, Arial; font-size: 16px; font-weight: normal; padding-left: 10px;"><br />    Social Media/Links<br /><br /></th>
 </tr>
 <tr>
     
     <td style="width: 273px; padding-left: 10px;; vertical-align: top;"><br /><p style="color: #409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px;" >     THREADS AND POSTS</p>     Total Threads: $[total_threads]     Total Posts: $[total_posts]<br /><br />
         <p style="color: #409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px;" >     MEMBERS</p>     Total Members: $[total_members]<br /><br />
         <p style="color: #409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px;" >     WELCOME TO OUR NEWEST MEMBER</p>     Our Newest Member is: $[newest_user]<br /><br /> </td>
     
     <td style="width: 273px; padding-left: 10px; vertical-align: top;"><br /><p style="color: #409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px;" >     USERS ONLINE NOW</p>     $[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}<br />
              {foreach $[online_user]}
<a href="$[online_user.href]" title="$[online_user.name]">$[online_user.avatar_small]</a>{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}<br /><br />
         </td>
     
     <td style="width: 273px; padding-left: 10px; vertical-align: top;"><br /><p style="color: #409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px;" >USERS ONLINE IN THE LAST 24</p>{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}
<br /><br />
         </td>
     <td style="width: 173px; padding-left: 10px; vertical-align: top;"><br /><p style="color:#409f74; font-weight: bold; font-family: Verdana, Arial; font-size: 12px; text-align: center;"><a href="#" title="facebook"><img src="http://i.imgur.com/9itCyGQ.png" alt="facebook"></a><br /><br /><a href="#" title="twitter"><img src="http://i.imgur.com/7Si8nwS.png" alt="twitter"></a></p></td>
 </tr>
       
</table>
</div>
</div>
{/if}

You will have to edit the colors of several parts of the above elements where it says color:######; just replace that color code with the colors of your choice. Some of the font-families may have to be edited to suite your theme. Enjoy