I'm around and round we go
Moderator
Nov 28, 2013 13:37:24 GMT -5
Something I had made for a while, just decided to clean it up and post. Makes the boards look a little nicer than default, and a bit more condensed.
Preview:
Layout Templates > Board > Board List
{foreach $[board]}
{if !$[board.is_redirect]}
<div class="container" style="margin: 1px 0;">
<table class="list" role="grid" width="100%">
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon last">$[board.icon]</td>
<td class="main clickable">
<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
{if $[board.num_mods]}
<span class="moderators">
- Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</span>
{/if}
<br />
<p class="description">$[board.description]</p>
</td>
<td rowspan="{if $[board.sub_board]}2{else}1{/if}" class="latest">
{if $[board.posts] > 0}
{if $[board.last_thread]}
<span class="date">$[board.last_thread.last_post.created_on]</span><br />
$[board.last_thread.last_post.created_by] posted in $[board.last_thread.recent_link]
{/if}
{else}
There are no posts
{/if}
</td>
<td rowspan="{if $[board.sub_board]}2{else}1{/if}" class="posts">
<div class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts] Post{/if}{if $[board.posts] != 1}s{/if}</div>
<div class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads] Thread{/if}{if $[board.threads] != 1}s{/if}</div>
</td>
</tr>
{if $[board.sub_board]}
<tr>
<td class="main sub-boards-bar" colspan="2">
<span class="description">Sub-Boards:</span>
{foreach $[board.sub_board]}
<div class="sub-boards">
<a href="$[board.sub_board.href]">$[board.sub_board.name]</a></div>
{/foreach}
</td>
</tr>
{/if}
</table>
</div>
{else}
<div class="container" style="margin: 1px 0;">
<table class="list" role="grid" width="100%">
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon last">$[board.icon]</td>
<td class="clickable redirect" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
</table>
</div>
{/if}
{/foreach}
{if !$[board]}
<div class="container" style="margin: 1px 0;">
<table class="list" role="grid" width="100%">
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
</table>
</div>
{/if}
Advanced Styles & CSS > Style Sheet > Search and replace /* Board List */
/* Board List */
@board_names_color: @empty;
@board_names_font: 105% @default_forum_text_font_family;
@board_desc_color: @empty;
@board_desc_font: normal 90% @default_forum_text_font_family;
@board_mod_color: @empty;
@board_mod_font: 75% @default_forum_text_font_family;
@board_sub_color: @empty;
@board_sub_font: 75% @default_forum_text_font_family;
@board_align_main: left;
@board_align_threads: center;
@board_align_posts: center;
@board_align_last_post: right;
.boards .main { width: 63%; text-align: @board_align_main; }
.boards .threads { font: @board_desc_font; width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { font: @board_desc_font; width: 12%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { font: @board_desc_font; width: 25%; text-align: @board_align_last_post; }
.boards .main.redirect { border-right: 0px; }
.boards .main .link a { color: @board_names_color; font: @board_names_font !important }
.boards .main .description { color: @board_desc_color; font: @board_desc_font; padding-left: 0px; padding-bottom: 3px; }
.boards .main .moderators { color: @board_mod_color; font: @board_mod_font; padding-bottom: 3px; }
.boards .sub-boards { display: inline-block; margin: 2px 0 2px 0; padding: 1px 5px; background: @container_background_color_1; border: 1px solid @container_inner_border_color; color: @board_sub_color; font: @board_sub_font; }
.boards table.list > tbody > tr > .sub-boards-bar { margin: 5px 0 0 0; padding: 1px 10px 1px 10px; background: @container_background_color_2; }
.boards table.list { table-layout: auto; }
.boards table.list th.main { padding-left: 10px; }
.boards table.list > tbody > tr > td { padding: 5px 10px; }
Enjoy!