Two-column board categories

[Fern]

Is there already a plug in available for putting your categories and boards into two columns? If so, what is it?

[Brian]

You'd probably be better off using a layout template modification for that.


Substitute the contents of Themes > Layout Templates > Board > Board List with this:

SPOILER: Click to show

{foreach $[board]}
    <table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 0} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
        <tbody>
            {if !$[board.is_redirect]}
                <tr id="$[board.content_id]" class="$[board.content_class]">
                    <td class="icon">$[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}<br />
                        <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>
            {else}
                <tr id="$[board.content_id]" class="$[board.content_class]">
                    <td class="icon">$[board.icon]</td>
                    <td class="main clickable redirect last" colspan="4">
                        <span class="link">$[board]</span><br />
                        <p class="description">$[board.description]</p>
                    </td>
                </tr>
            {/if}
            {if !$[board]}
                <tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
            {/if}
        </tbody>
    </table>
{/foreach}

Then add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet.

.boards table.list { float: left; width: 50%; table-layout: fixed; }
.boards table.list .board > td { height: 100px; }
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }

[Fern]

I don't want to resize them, I want to make it so there's two columns of them.

[Brian]

But... that's exactly what it does.

You have to resize them because you can't place anything beside an element that's taking up 100% of the width.

[tis ✻ bry]

Hi, I don't mean to butt in, but there's another template that I use, personally, to achieve the two-column effect. It is here. Put it in the same place that Brian told you to put his code. It takes a little bit of CSS styling afterward, but it achieves the two columned look.

[Mojo]

How would you update the CSS to include a break between the columns?

[Tovaana]

I tried using both options above, the first one didn't work... The second one worked, but it took out the coding for fonts and sizes that were imported with a template... I'm horrible with trying to understand code - but is there an easier way to get two columns for the boards under each category? Or a step-by-step coding thing I could try to mess with what I've already got? A plugin would be awesome. TIA! 

SPOILER: Click to show

<table class="list" role="grid">
<thead>
<tr>
<th class="icon"></th>
<th class="main">Board</th>
<th class="threads">Threads</th>
<th class="posts">Posts</th>
<th class="latest last">Last Post</th>
</tr>
</thead>
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[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}<br />
<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>
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
{/if}
{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
</tbody>
</table>