I'm around and round we go
Moderator
Aug 11, 2013 17:08:58 GMT -5
I made this while messing with layout templates, so I decided it was good enough to be shared and I liked it.
Preview:
Note: When you click on "Was Online", the 24 users replaces the online users. Click on "Now Online" to change it back. It works like a hide/show.
Layout Templates > Home > Find {if $[show_stats]} and replace that code with:
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>$[forum.name] Info Center</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td width="25%">
<table>
<tr>
<td class="info">
<table>
<tbody>
<tr><th>Forum Stats</th></tr>
<tr><td>Total Posts: $[total_posts]</td></tr>
<tr><td>Total Threads: $[total_threads]</td></tr>
</tbody>
</table>
</td>
<td class="info">
<table>
<tbody>
<tr><th>User Stats</th></tr>
<tr><td>Newest Member: $[newest_user]</td></tr>
<tr><td>Total Members: $[total_members]</td></tr>
</tbody>
</table>
</td>
<td class="info">
<table>
<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[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}.</td></tr>
<tr><td>Most Users Online: $[most_users_online]</td></tr>
</tbody>
</table>
</td>
<td class="info">
<table>
<tbody>
<tr><th>Today's Users</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="info">
<table>
<tbody>
<tr><th>Last Topics</th></tr>
<tr><td>
{if $[last_updated_thread]}
Last Updated Topic: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by] ($[last_updated_thread.last_post.created_on])
{/if}</td></tr>
<tr><td>
$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]</td></tr>
</tbody>
</table>
</td>
<td colspan="2" class="info">
<table>
<tbody>
<tr>
<th>
<span href="javascript:void(0);" onClick="document.getElementById('nowOnInfo').style.display=''; document.getElementById('wasOnInfo').style.display='none';">Now Online</span> / <span href="javascript:void(0);" onClick="document.getElementById('nowOnInfo').style.display='none'; document.getElementById('wasOnInfo').style.display='';">Was Online</span>
</th>
</tr>
<tr id="nowOnInfo"><td>
{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}
</td>
</tr>
<tr id="wasOnInfo" style="display: none;">
<td>
{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_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
Advanced Styles & CSS > Stylesheet > Find /*Info Centers*/ and replace that code with:
/* Info Centers */
@info_background: @empty;
@info_inner_border: 1px solid @container_inner_border_color;
@info_text_color: @container_text_color_1;
@info_text_font: @empty;
@info_links_color: @container_links_color;
@info_links_font: @empty;
@info_links_decoration: @empty;
@info_titles_color: @empty;
@info_titles_font: @empty;
.stats table { background: @info_background; width: 100%; }
.stats .content > table { margin: 5px; }
.stats .content > table table tr td { background: @content_area_background; vertical-align: top; padding: 4px 6px; border: @info_inner_border; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; }
.stats .content { color: @info_text_color; font: @info_text_font; }
.stats .content a { color: @info_links_color; font: @info_links_font; text-decoration: @info_links_decoration; }
.stats th { padding-bottom: 5px; color: @info_titles_color; font: @info_titles_font; text-align: left; }
.stats .icon { width: 70px; text-align: center; vertical-align: middle; }
.stats .info { padding: 10px 10px 10px 0px; }
.stats .content > table { width: auto; table-layout: auto; }
.stats .content > table table table tr:last-child td a { white-space: nowrap; }
.stats .content > table > tbody > tr > td:first-child { }
.stats .content > table > tbody > tr:first-child > td { }
Feel free to make any changes to fit the design of your forum. Cookies & questions accepted!
Aug 12, 2013 15:38:16 GMT -5
Too much boxiness for me, but never the less...
Oct 22, 2013 10:53:32 GMT -5
Hello
SmangiiHow would i add a group / user legend to that ?
Oct 22, 2013 11:58:56 GMT -5
Maybe if we remove the
Recent Threads, Recent Posts and RSS Feeds from the bottom and place a simple coloured text legend there instead ?
Oct 22, 2013 12:06:36 GMT -5
Maybe if we remove the
Recent Threads, Recent Posts and RSS Feeds from the bottom and place a simple coloured text legend there instead ?
Ok well in that case that makes it a lot simpler
Admin > Themes > Layout Templates > Home
Press ctrl+f and paste the following in the box that appears:
$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]</td></tr>
Hit enter on your keyboard, and it should take you to the line where it is.
Now highlight it, and press delete. Now type something like the following:
<font style="color: #ffff00;">Administrator</font>, <font style="color: #ffff00;">Global Moderator</font>, <font style="color: #ffff00;">Moderator</font>
Replace the hex codes: #ffff00 with the colour of your choice (colorhexa.com is a good place for hex codes).
Feb 3, 2014 17:12:28 GMT -5
I'm using this on my forum and it's awesome! Thank you!
I have one question though, how would I (if it's possible) get "Mark All Boards Read" to be shown with this?
Any help is appreciated. Thank again!