[Tutorial]Forums in columns
#1
For 1.8 please visit this.

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?
Reply


Messages In This Thread
[Tutorial]Forums in columns - by Omar G. - 2011-08-29, 01:53 AM
RE: [Tutorial]Forums in columns - by kavin - 2011-08-29, 07:52 AM
RE: [Tutorial]Forums in columns - by faviouz - 2011-08-29, 07:54 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2011-08-29, 06:13 PM
RE: [Tutorial]Forums in columns - by envira - 2011-08-30, 08:22 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2011-08-30, 05:09 PM
RE: [Tutorial]Forums in columns - by TheNova - 2011-09-05, 10:56 PM
RE: [Tutorial]Forums in columns - by Omar G. - 2011-09-05, 11:42 PM
RE: [Tutorial]Forums in columns - by Dragonzsoul - 2011-09-06, 12:13 AM
RE: [Tutorial]Forums in columns - by TheNova - 2011-09-15, 11:56 PM
RE: [Tutorial]Forums in columns - by Jason L. - 2011-09-16, 12:00 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2011-09-16, 01:15 AM
RE: [Tutorial]Forums in columns - by Jason L. - 2011-10-10, 04:03 PM
RE: [Tutorial]Forums in columns - by Omar G. - 2011-10-10, 04:17 PM
RE: [Tutorial]Forums in columns - by Tecca - 2012-05-08, 11:17 PM
RE: [Tutorial]Forums in columns - by FooFighter - 2012-05-20, 12:34 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2012-05-20, 04:07 AM
RE: [Tutorial]Forums in columns - by Tecca - 2012-05-20, 09:14 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2012-05-21, 05:18 AM
RE: [Tutorial]Forums in columns - by xomp - 2013-04-18, 02:04 PM
RE: [Tutorial]Forums in columns - by xomp - 2013-04-18, 11:03 PM
RE: [Tutorial]Forums in columns - by Omar G. - 2013-04-20, 04:01 AM
RE: [Tutorial]Forums in columns - by mostarac - 2013-05-30, 07:44 AM
RE: [Tutorial]Forums in columns - by Tempest - 2013-11-20, 11:50 AM
RE: [Tutorial]Forums in columns - by Twisty - 2014-09-01, 10:30 PM
RE: [Tutorial]Forums in columns - by Omar G. - 2014-09-02, 04:08 AM
RE: [Tutorial]Forums in columns - by Twisty - 2014-09-02, 04:09 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2014-09-02, 04:16 AM
RE: [Tutorial]Forums in columns - by iAndrew - 2014-09-07, 04:59 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2014-09-07, 06:03 AM
RE: [Tutorial]Forums in columns - by Bangles_AU - 2015-04-06, 11:33 PM
RE: [Tutorial]Forums in columns - by Vanz - 2015-04-07, 07:17 AM
RE: [Tutorial]Forums in columns - by luk19as - 2015-06-07, 12:25 AM
RE: [Tutorial]Forums in columns - by Omar G. - 2015-06-09, 05:51 AM

Forum Jump:


Users browsing this thread: 1 Guest(s)