Thread Rating:
  • 4 Vote(s) - 4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[WIP] Multicolumn categories
#1
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
Reply
#2
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.
No longer involved in the MyBB project.
Reply
#3
This user has been denied support. This user has been denied support.
can you do for each forum different column like each 2 forums have 1 row?
<snip - no referral links>
Reply
#4
(02-28-2011, 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



Reply
#5
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.
No longer involved in the MyBB project.
Reply
#6
(02-28-2011, 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.
Reply
#7
This user has been denied support. This user has been denied support.
How to make it like this: ??
[Image: 20110113230356.png]
Reply
#8
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.
No longer involved in the MyBB project.
Reply
#9
This user has been denied support. This user has been denied support.
(02-28-2011, 04:43 PM)Adrenaline Wrote: How to make it like this: ??
[Image: 20110113230356.png]

it will be cool if someone do this..
<snip - no referral links>
Reply
#10
(02-28-2011, 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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)