MyBB Community Forums

Two column Categories

Go to ACP -> Templates & Style -> Templates & Style -> <template set that is used by your current forum theme->forum bit templates -> forumbit_depth1_cat

Delete all content and paste this

<div  id="cat_{$forum['fid']}" style="width:49%;display: inline-block;padding:2px;clear:both;white-space:nowrap;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" 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 class="tcat" colspan="2"> <span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span> </td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
</div>

Open global.css (that is used by your theme) and all category id that your see on right side

for example

#cat_4 {
float:right;
}

Screenshoot : http://i56.tinypic.com/25qeptt.png
Screenshoot 2: http://i56.tinypic.com/316q7pe.png

For each category on right side you need to add following content in global.css

#cat_x {
float:right;
}

x - your category id

Triple column categories

Go to ACP -> Templates & Style -> Templates & Style -> <template set that is used by your current forum theme->forum bit templates -> forumbit_depth1_cat

Delete all content and paste this

<div  id="cat_{$forum['fid']}" style="width:32%;display: inline-block;padding:2px;clear:both;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" 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 class="tcat" colspan="2"> <span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span> </td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
</div>

For each column in middle add this to css

#cat_x {
margin-left:2px;
width:34% !importnat;
}

x - your category id

For each column on right side add this to css

#cat_x {
float:right;
}

x - your category id


Screenshoot : http://i52.tinypic.com/33y2hb6.png

There seems to be multiple problems when collapsing categories. I can't provide a screenshot, but if you collapse a few you'll see what I mean.

can you do for each forum different column like each 2 forums have 1 row?

(2011-02-28, 04:15 PM)Malcolm. Wrote: [ -> ]There seems to be multiple problems when collapsing categories. I can't provide a screenshot, but if you collapse a few you'll see what I mean.

Something like this:
http://i53.tinypic.com/2cztv8w.png

Yeah, I think so.

If I have 4 Categories (all with 1 forum in them), and I collapse 1 and 3 (the left ones) then 4 (bottom right) goes to the left.

(2011-02-28, 04:32 PM)Malcolm. Wrote: [ -> ]Yeah, I think so.

If I have 4 Categories (all with 1 forum in them), and I collapse 1 and 3 (the left ones) then 4 (bottom right) goes to the left.

It's now fixed in Two column Categories,for triple i'm going to run some additional tests.

How to make it like this: ??

One more problem I'm facing;

If I have 4 Categories (all with 1 forum in them), and I collapse 1 (top left) then 3 (bottom left) will 'follow' 1 and appear directly underneath it.

(2011-02-28, 04:43 PM)Adrenaline Wrote: [ -> ]How to make it like this: ??

it will be cool if someone do this..

(2011-02-28, 04:45 PM)Malcolm. Wrote: [ -> ]One more problem I'm facing;

If I have 4 Categories (all with 1 forum in them), and I collapse 1 (top left) then 3 (bottom left) will 'follow' 1 and appear directly underneath it.

4 categories (each with 1 forum in them) before collapsing :

http://i53.tinypic.com/mbnzeq.png


After collapsing top left and bottom left categories

http://i54.tinypic.com/33oilus.png


First post has been updated with fix for two column categories (clear:both; has been addes to style).
Also for each category on the right you will need to add few lines in css (global.css)
#cat_x {
float:right;
}

where x is your category ID.