[Tutorial]Forums in columns
#11
Sweet, just saw this. May use it in a future theme. +Rep
Reply
#12
^Thanks for all the comments Big Grin

Ok, here is the code to use this only at certain categories using Yumi's Template Conditionals plugin.

Editing templates:
  1. Open your theme global.css style sheet and put this at the end:
    table.forumh {
    	width:100%;
    	margin: 0px auto auto;
    	clear:both;
    }
    table.forumh h3 hr{
    	width:98%;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    }
    table.forumh h3.forumdisplay{
    	text-align:center;
    }
    table.forumh h3  img {
    	margin-right:3px;
    	vertical-align:text-bottom;
    	max-width:30px;
    	max-height:25px;
    	filter:alpha(opacity=60);
    	opacity:0.6;
    }
    table.forumh h3 span {
    	font-weight:normal;
    }
    
    table.forumh ul {
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }
    table.forumh ul li {
    	list-style: none;
    	width: 50%;
    	margin-bottom:10px;
    	float: left;
    }
    table.forumh ul li table {
    	width: 98%;
    	min-height: 110px;
    	margin: auto auto;
    	background: #feffe8;
    	background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
    	background: -webkit-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
    	background: -o-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
    	background: -ms-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
    	background: linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
    	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    table.forumh ul li table td img {
    	max-width:150px;
    	max-height:110px;
    }
    table.forumh ul li table div {
    	font-size:80%;
    }
    table.forumh ul li table div.last {
    	font-size:80%;
    }

  2. Open your theme forumbit_depth1_cat template and replace everything with this: (replace the first line X with your categories ID)
    <if ($forum['fid'] == X) || ($forum['fid'] == X) then>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh">
    <thead><tr><td>
    <h3><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /><a href="{$forum_url}">{$forum['name']}</a> - <span class="smalltext">{$forum['description']}</span><hr/></h3>
    </td></tr></thead>
    <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"><tr><td>
    <ul>{$sub_forums}</ul>
    </td></tr></tbody>
    </table>
    <else>
    <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>
    </if>
    <br />

  3. Open your theme forumbit_depth2_forum template and replace everything with this: (replace the first line X with your forum ID that are inside the categories in step two)
    <if ($forum['fid'] == X) || ($forum['fid'] == X) then>
    <li><table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
    <tr>
    <td align="center" valign="middle" width="1px" rowspan="2"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}"/></td>
    <td valign="top">
    <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}
    <div>{$forum['description']}{$modlist}{$subforums}</div>
    </td>
    </tr>
    <tr>
    <td valign="top">
    {$lastpost}
    </td>
    </tr>
    </table></li> 
    <else>
    <tr>
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
    <td class="{$bgcolor}" valign="top">
    <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
    </td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
    <td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
    </tr>
    </if>

  4. Open your theme forumbit_depth2_forum_lastpost template and replace everything with this: (replace the first line X with your forum ID from step three)
    <if ($forum['fid'] == X) || ($forum['fid'] == X) || ($forum['fid'] == X) then>
    <div class="last">Last post {$lang->by} {$lastpost_profilelink}, {$lastpost_date} {$lastpost_time}<br />
    <a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a></div> 
    <else>
    <span class="smalltext">
    <a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a>
    <br />{$lastpost_date} {$lastpost_time}<br />{$lang->by} {$lastpost_profilelink}</span>
    </if>

  5. Open your theme forumdisplay_subforums template and replace everything with this: (replace the first line X with your categories ID from step two)
    <if ($fid == X) then>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh">
    <thead><tr><td>
    <h3 class="forumdisplay">{$lang->sub_forums_in}<hr/></h3>
    </td></tr></thead>
    <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"><tr><td>
    <ul>{$forums}</ul>
    </td></tr></tbody>
    </table>
    <br /> 
    <else>
    <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 class="tcat" width="2%">&nbsp;</td>
    <td class="tcat" width="59%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
    <td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
    <td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
    <td class="tcat" width="15%" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
    </tr>
    {$forums}
    </table>
    </if>
    <br />

Preview:
[Image: 20110915181437.th.png]
Reply
#13
I run into this after customizing this tutorial a bit.

http://simpuma.com/community/forum-4.html
Reply
#14
(2011-10-10, 04:03 PM)Jason L. Wrote: I run into this after customizing this tutorial a bit.

http://simpuma.com/community/forum-4.html

Is not suppose to look like that? Did you used the templates conditionals version of the tutorial?

Try to revert forumbit_depth2_forum and forumdisplay_subforums.

I think the problem is with forumbit_depth2_forum, maybe you edited something wrong.

Or maybe you didn't paste the corrects fid.
Reply
#15
Somewhat old thread, but hopefully you're around still. I've gotten it looking pretty good, but when I click on a forum to view the threads, I get this:

http://img521.imageshack.us/img521/2906/errornn.png

No link because it's not live. Which template should I be editing to get this fixed?

Great tutorial by the way, this makes the forum look awesome.

EDIT: Never mind, I figured this out. Apparently I edited forumdisplay_thread on accident. I simply put the correct code back in there, and everything is good to go.
Reply
#16
(2011-08-29, 01:53 AM)Omar G. Wrote: This is the same basic idea from the "Subforums in colums" tutorial (http://community.mybb.com/thread-32008.html).

Preview at the bottom.

Editing templates:
Open your theme global.css style sheet and put this at the end:
table.forumh {
	width:100%;
	margin: 0px auto auto;
	clear:both;
}
table.forumh h3 hr{
	width:98%;
	filter:alpha(opacity=60);
	opacity:0.6;
}
table.forumh h3.forumdisplay{
	text-align:center;
}
table.forumh h3  img {
	margin-right:3px;
	vertical-align:text-bottom;
	max-width:30px;
	max-height:25px;
	filter:alpha(opacity=60);
	opacity:0.6;
}
table.forumh h3 span {
	font-weight:normal;
}

table.forumh ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
table.forumh ul li {
	list-style: none;
	width: 50%;
	margin-bottom:10px;
	float: left;
}
table.forumh ul li table {
	width: 98%;
	min-height: 110px;
	margin: auto auto;
	background: #feffe8;
	background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
	background: -webkit-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
	background: -o-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
	background: -ms-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
	background: linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
table.forumh ul li table td img {
	max-width:150px;
	max-height:110px;
}
table.forumh ul li table div {
	font-size:80%;
}
table.forumh ul li table div.last {
	font-size:80%;
}

Open your theme forumbit_depth1_cat template and replace everything with this:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh">
<thead><tr><td>
<h3><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /><a href="{$forum_url}">{$forum['name']}</a> - <span class="smalltext">{$forum['description']}</span><hr/></h3>
</td></tr></thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"><tr><td>
<ul>{$sub_forums}</ul>
</td></tr></tbody>
</table>
<br />

Open your theme forumbit_depth2_forum template and replace everything with this:
<li><table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tr>
<td align="center" valign="middle" width="1px" rowspan="2"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}"/></td>
<td valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}
<div>{$forum['description']}{$modlist}{$subforums}</div>
</td>
</tr>
<tr>
<td valign="top">
{$lastpost}
</td>
</tr>
</table></li>

Open your theme forumbit_depth2_forum_lastpost template and replace everything with this:
<div class="last">Last post {$lang->by} {$lastpost_profilelink}, {$lastpost_date} {$lastpost_time}<br />
<a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a></div>

Open your theme forumdisplay_subforums template and replace everything with this:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh">
<thead><tr><td>
<h3 class="forumdisplay">{$lang->sub_forums_in}<hr/></h3>
</td></tr></thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"><tr><td>
<ul>{$forums}</ul>
</td></tr></tbody>
</table>
<br />

Preview:
[Image: 20110828062512.th.png] [Image: 20110828062441.th.png]

Notes:
You will need to change the images from the code as I used hotlinked images.

For the collapse icons, I use these two:
http://www.iconfinder.com/ajax/download/...12606&s=48
http://www.iconfinder.com/ajax/download/...12605&s=48

For the on/off/offlock icons I use (150w)x(110h) images.

Anything else just edit the css code.

That is it.

Pd: Why can't I upload attachments here?

------------------------------------------------------------

1. how do we change the background color mine is white thanks..maybe to our themes original background color..

2. how do we reduce the size of the forums..(their boxes/width/height etc...)
Reply
#17
^1 & 2 = edit your css.

@Tecca, IDK if you still need help, I'm searching for the solution.
Reply
#18
I'm good to go, thanks. It was an error on my part - I edited a template I shouldn't have. It's fixed now, though.
Reply
#19
Glad to hear it.
Reply
#20
Is there any chance you can refine things to look a bit more like this in structure?

[Image: XGnO1S1.png]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)