Tabbed Categories home template

[Tumbleweed]

<style>
/*Begin Tabbed Categories CSS */
/* .tabbedcategories{margin:0x;
}*/
.tabbedtd {
background-color: #1f1f1f;
   text-align: center;
   border: 1px solid #dddddd;
   padding: 2px;
   margin: 2px;  
}

.tabbedtd:hover {
   background-color: @container_highlight_color;
}

.tabbedtdactive {
   background-color: #bbbbbb;
   text-align: center;
   border: 1px solid #dddddd;
   padding: 2px;
   margin: 2px;
}
/*End Tabbed Categories CSS*/


</style>


$[news]
<center>
<table class="tabbedcategories">

<tr>

{foreach $[category]}

<td class="tabbedtd" id="tab$[category.id]">

<a style="text-decoration: none;">

<div width="100%;" height="100%">

<h2>

<font size="3">

$[category.name]

</font>

</h2>

</div>

</a>

</td>

{/foreach}

</tr>

</table>
</center>



<script>

$(document).ready(function() {

$('td.tabbedtd').click(function() {

$('td.tabbedtdactive').removeClass('tabbedtdactive').addClass('tabbedtd');

$(this).removeClass('tabbedtd').addClass('tabbedtdactive');

var catid = $(this).attr('id').split('tab')[1];

$('div.container.boards.tabbedcatsdiv').hide();

$('div.container.boards.'+catid+'.tabbedcatsdiv').show();

localStorage.setItem('tabcats',catid);

});

if(localStorage.getItem('tabcats') != undefined) {

var catId = localStorage.getItem('tabcats');

$('div.container.boards.tabbedcatsdiv').hide();

$('div.container.boards.'+catId+'.tabbedcatsdiv').show();

$('td.tabbedtd#tab'+catId).removeClass('tabbedtd').addClass('tabbedtdactive');

}

else if(localStorage.getItem('tabcats') == undefined || localStorage.getItem('tabcats') == null) {

$('div.container.boards.tabbedcatsdiv').hide();

   $('div.container.boards.2.tabbedcatsdiv').show();

$('td.tabbedtd#tab2').removeClass('tabbedtd').addClass('tabbedtdactive');

}

});

</script>







{foreach $[category]}

$[category.anchor]

<div class="container boards $[category.id] tabbedcatsdiv">

<div class="content cap-bottom">

$[category.board_list]

</div>

</div>

{/foreach}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th>Threads and Posts</th></tr>
<tr><td>Total Threads: $[total_threads]      Total Posts: $[total_posts]</td></tr>
{if $[last_updated_thread]}<tr><td>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by] ($[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>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info">
<table>
<tbody>
<tr><th>Members</th></tr>
<tr><td>Total Members: $[total_members]</td></tr>
<tr><td>Newest Member: $[newest_user]</td></tr>
<tr><td>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<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>
{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>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online_24]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_todays_active_members_link.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>
{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}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}

[Tumbleweed]

Testing.