2-Grid Forum Layout

   (0 reviews)

In this wee guide, I'm going to show you how to do a side by side forum layout with MYBB and Jcink. This is the only customization that this code does.

Mybb Preview (select Grid Forum from the theme selector down the bottom).

Jcink Preview.

What we're basically going to do is this:

<div class="forum-flex">
  Category Header and other goodies
  <div class="forum no1">
    Forum Header
    Other goodies
  </div>
  <div class="forum no2">
    Forum Header
    Other goodies
  </div>
  <div class="forum no3">
    Forum Header
    Other goodies
  </div>
</div>

And with the CSS that is at the bottom of this post, we will get something like this:

The HTML for MyBB

forumbit_depth1_cat

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td>
<div class="forum-flex">
{$sub_forums}
</div>
</td>
</tr>
</tbody>
</table>
<br />

forumbit_depth2_forum

<div class="forum no{$forum['fid']}">
<table style="width: 100%; height: 100%;">
<tr>
<td class="{$bgcolor}" align="center" width="1">
<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>
</td>
<td class="{$bgcolor}">
<strong>
<a href="{$forum_url}">{$forum['name']}</a>
</strong>{$forum_viewers_text}
<div class="smalltext">
{$forum['description']}{$modlist}{$subforums}
</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">
{$threads}{$unapproved['unapproved_threads']}<br>
	Threads
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">
{$posts}{$unapproved['unapproved_posts']}
	<br>
	Posts
</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">
{$lastpost}
</td>
</tr>
</table>
</div>

The only important part for this code is the flex is the div, you can change whatever you like within the divs. So really, all you need is this:

<div class="forum no{$forum['fid']}">
<!-- your forum coding here -->
</div>

forumdisplay_subforums

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
</tr>
    <tr>
        <td>
            <div class="forum-flex">{$forums}</div>
        </td>
    </tr>
</table>
<br />

HTML For Jcink

Category Headers

<div class="tableborder category" id="cat-<!-- |cat_id| -->">
 <div class='maintitle<!-- |collapsed_class| -->' align='left'>
<span style='float:right;'><a href='#' onclick='catcollapse("<!-- |cat_id| -->");return false;' id='main_<!-- |cat_id| -->'><!-- |collapse_img| --></a>&nbsp;&nbsp;</span>
<{CAT_IMG}><a href="index.php?c=<!-- |cat_id| -->"><!-- |cat_name| --></a></div>
<div id='cat_<!-- |cat_id| -->' style="<!-- |collapsed_style| -->">
     <table width="100%" border="0" cellspacing="1" cellpadding="4">
    <tr>
        <td>
            <div class="forum-flex">
                <% FORUM_ROWS %>
            </div>
        </td>
    </tr>
     </table>
</div>
</div>
<br class='cat-lb' />

Forum Row

<div class="forum no<!-- |forum_id| -->">
<table style="width:100%;height:100%">
<tr class='forum-row'> 
    <td class="row4" align="center">
        <!-- |img_new_post| -->
    </td>
    <td class="row4">
        <b><a class="tooltip" tooltip="<!-- |description_clean| -->" href="?showforum=<!-- |forum_id| -->" alt="<!-- |name| -->"><!-- |name_text| --></a></b>
        <br />
        <span class='desc'><span class='forum-desc'><!-- |description| --></span>
        <!-- |subforums| -->
        <br />
        <span class='forum-led-by'><!-- |moderators| --></span>
        </span>
    </td>
    <td class="row2" align="center">
        <!-- |topics| -->
    </td>
    <td class="row2" align="center">
        <!-- |replies| -->
    </td>
    <td class="row2" nowrap="nowrap">
        <!-- |last_post| --><br />
        In: <!-- |last_unread| --><!-- |last_topic| --><br />
        By: <!-- |last_poster| -->
    </td>
</tr>
</table>
</div>

The only important part of the above code is the div class forum. You can change whatever you like within that. So all you really need is this:

<div class="forum no{$forum['fid']}">
<!-- your forum coding here -->
</div>

CSS for both Jcink and MyBB

.forum-flex {
display: flex;
flex-wrap: wrap;
}

.forum-flex .forum {
flex-basis: 48%; /* not working? Try and decrease this number */
margin: 1%;
flex-grow: 2;
}

So what's going on here?

• Display flex tells the coding that the children of the forum-flex are to behave flexibly.
• Flex-wrap tells the children of forum-flex to wrap onto a new line if need be.
• Flex basis is the width of the forum, if possible. I put 48% to account for the 1% margin on either side.
• Flex-grow tells the forum to grow to fill the entire available space.

If you wanted to fit more forums on a line, just change the flex-basis! Also, so that the forums look neatly uniform, I recommend putting a height on .forum.

Anyway, that's it! I hope that helps, if you need any assistance, please feel free to yell.