Sign in to follow this  
Kit the Human

Skins 2-Grid Forum Layout

Recommended Posts

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 code examples 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:

 

example.png.edfa08108401ce40075f4b1e66e415d7.png

 

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']}
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">
{$posts}{$unapproved['unapproved_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%;
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.

  • Fuck Yeah! 2
  • Love 1

Share this post


Link to post
Share on other sites
Awards

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.