Side by Side boards help?

[Novaskyi]

I currently have the following code being used for the side-by-side board listing; support.proboards.com/thread/465062/side-boards?page=1&scrollTo=5372126, however, I would like to know if there is a modified version to which I can choose which ones are side by side and which are 'normal'. So perhaps
prntscr.com/ighlm0 - Side by side
prntscr.com/ighmib - to be normal width

I have tried looking for a modified version of the code, but I've not been able to find one. If someone could let me know if there is any way that I can do what I need, or not.

- Novaskyi.

[Novaskyi]

BUMP!

[Novaskyi]

BUMP!

[Brian]

That particular template modification is a bit harder to manipulate in that manner because it relies entirely on the HTML to handle its side by side behavior. If you use a modification that relies on CSS to handle it instead it's a lot less messy and quite a bit easier to manipulate.

I would recommend creating a copy of your theme to experiment with this before adding it to the real thing since there's no way to undo the changes after leaving the page.

Themes > Layout Templates > Home
(this replaces everything from the opening {foreach $[category]} to its closing {/foreach})

SPOILER: Click to show

{foreach $[category]}
    $[category.anchor]
    <div class="container boards categories category-$[category.id]">
        <div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
        <div class="content cap-bottom">
            $[category.board_list]
        </div>
    </div>
{/foreach}

Themes > Layout Templates > Board > Board List
(replaces everything in that template)

SPOILER: Click to show

{foreach $[board]}
    <div class="board-flex">
        <table class="list" role="grid">
            <tbody>
                {if !$[board.is_redirect]}
                    <tr id="$[board.content_id]" class="$[board.content_class]">
                        <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="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">
                                        {if $[board.last_thread.last_post.edited]}
                                            $[board.last_thread.last_post.edited.date]
                                        {else}
                                            $[board.last_thread.last_post.created_on]
                                        {/if}
                                    </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="main clickable redirect">
                            <span class="link">$[board]</span><br />
                            <p class="description">$[board.description]</p>
                        </td>
                        <td class="latest last"></td>
                    </tr>
                {/if}
            </tbody>
        </table>
    </div>
{/foreach}
{if !$[board]}
    <table class="list" role="grid"><tbody><tr class="last"><td class="last center">No boards were found.</td></tr></tbody></table>
{/if}

Themes > Advanced Styles & CSS > Style Sheet
(goes at the bottom)

SPOILER: Click to show

.categories > .content {
    display: flex;
    flex-flow: row wrap;
}
.categories .board-flex {
    flex: 0 1 50%;
}
.categories table.list td {
    height: 100px;
}
.boards .main {
    width: auto;
}

Now if you want to make a certain category's boards look the normal way all you have to do is get the category's numerical ID from the end of its URL shown when hovering over it in the dropdown that appears when hovering over your forum's name in the navigation tree. Then you add this to your style sheet, replacing the number in red with the number corresponding to that category.

.category-123 .board-flex {
    flex-basis: 100%;
}

Attachments: