2011-09-16, 12:00 AM
2011-09-16, 01:15 AM
^Thanks for all the comments
Ok, here is the code to use this only at certain categories using Yumi's Template Conditionals plugin.
Editing templates:
Preview:
Ok, here is the code to use this only at certain categories using Yumi's Template Conditionals plugin.
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: (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 />
- 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>
- 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>
- 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%"> </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:
2011-10-10, 04:03 PM
2011-10-10, 04:17 PM
(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.
2012-05-08, 11:17 PM
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.
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.
2012-05-20, 12:34 AM
(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:
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...)
2012-05-20, 04:07 AM
^1 & 2 = edit your css.
@Tecca, IDK if you still need help, I'm searching for the solution.
@Tecca, IDK if you still need help, I'm searching for the solution.
2012-05-20, 09:14 AM
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.
2012-05-21, 05:18 AM
Glad to hear it.
2013-04-18, 02:04 PM
Is there any chance you can refine things to look a bit more like this in structure?