I'm around and round we go
Moderator
Nov 29, 2013 14:53:22 GMT -5
Something I did by accident but I thought it could look decent.
Layout Templates > Board > Board List{foreach $[board]}
{if !$[board.is_redirect]}
<div id="$[board.content_id]" class="container $[board.content_class] dividedBoard">
<div class="divided-title-bar bbcode">
<div class="title_wrapper main">
<span class="link">$[board]</span> {if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
</div>
</div>
<div class="content cap-bottom">
<table class="list">
<tbody>
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main">
<p class="description">$[board.description]</p>
{if $[board.num_mods]}
<p 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}
</p>
{/if}
{if $[board.sub_board]}
<p class="sub-boards">
Sub-board{if $[board.sub_board] != 1}s{/if}:
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}
</p>
{/if}
</td>
<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
<td class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link]<br />
by $[board.last_thread.last_post.created_by]<br />
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
</td>
</tr>
</tbody>
</table>
</div>
</div>
{else}
<div id="$[board.content_id]" class="container $[board.content_class] dividedBoard">
<div class="divided-title-bar bbcode">
<div class="title_wrapper main">
<span class="link">$[board]</span> {if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
</div>
</div>
<div class="content cap-bottom">
<table class="list">
<tbody>
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" style="width: 100%;">
<p class="description">$[board.description]</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}
{/foreach}
{if !$[board]}
<div class="last"><div class="last center" colspan="5">No boards were found.</div></div>
{/if}
Advanced Styles & CSS > StyleSheet > Add this anywhere:
/* For Divided Boards List Mod*/
.dividedBoard:first-child {
margin-top: 20px;
}
.dividedBoard:last-child {
margin-bottom: 20px !important;
}
.dividedBoard {
display: inline-block;
margin-top: 0;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.dividedBoard > .divided-title-bar {
background-color: @container_outer_border_color;
background-image: @title_bar_background_image;
background-attachment: @title_bar_background_attachment;
background-repeat: @title_bar_background_repeat;
background-position: @title_bar_background_position;
border: @title_bar_border;
.rounded-corners(@title_bar_border_radius);
}
You can adjust the margin #s to adjust the spacing, or edit the .divided-title-bar to any values that you want. Right now it copies the regular .title-bar that you can edit in the Visual Editor.