MyBB Community Forums

Full Version: How to design MyBB threadlist?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
My target:
[Image: 2eykkrm.jpg]

The above is tutorial of creating a forum for showcasing websites.

I want to design my Trade Deals forum something like that but I am stuck on how the code actually works.

Code of the result of the target:
<div class="float_left">
	{$multipage}
</div>
<div class="float_right">
	{$newthread}
</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
	<tr>
		<td class="thead" colspan="{$colspan}">
			<div style="float: right;">
				<span class="smalltext"><strong><a href="misc.php?action=markread&amp;fid={$fid}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&amp;type=forum&amp;fid={$fid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a>{$clearstoredpass}</strong></span>
			</div>
			<div>
				<strong>{$foruminfo['name']}</strong>
			</div>
		</td>
	</tr>
	<tr>
		<td class="tcat" width="100%" colspan="2"><span class="smalltext"><strong>Sort By: <a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']} | <a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']} | <a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']} | <a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']} {$ratingcol} | <a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong></span></td>
		{$inlinemodcol}
	</tr>
</table>
<br class="clear" />
	{$threads}{$nullthreads}
<br class="clear" />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;">
	<tr>
		<td class="tfoot" align="right" colspan="{$colspan}">
			<form action="forumdisplay.php" method="get">
				<input type="hidden" name="fid" value="{$fid}" />
				<select name="sortby">
					<option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>
					<option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
					<option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>
					<option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>
					{$ratingsort}
					<option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>
					<option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>
				</select>
				<select name="order">
					<option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>
					<option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>
				</select>
				<select name="datecut">
					<option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>
					<option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>
					<option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>
					<option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>
					<option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>
					<option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>
					<option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>
					<option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
					<option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
				</select>
				{$gobutton}
			</form>
		</td>
	</tr>
</table>
<div class="float_left">
	{$multipage}
</div>
<div class="float_right" style="margin-top: 4px;">
	{$newthread}
</div>
<br style="clear: both;" />
<br />
<div class="float_left">
	<div class="float_left">
		<dl class="thread_legend smalltext">
			<dd><img src="{$theme['imgdir']}/newfolder.gif" alt="{$lang->new_thread}" title="{$lang->new_thread}" /> {$lang->new_thread}</dd>
			<dd><img src="{$theme['imgdir']}/newhotfolder.gif" alt="{$lang->new_hot_thread}" title="{$lang->new_hot_thread}" /> {$lang->new_hot_thread}</dd>
			<dd><img src="{$theme['imgdir']}/hotfolder.gif" alt="{$lang->hot_thread}" title="{$lang->hot_thread}" /> {$lang->hot_thread}</dd>
		</dl>
	</div>

	<div class="float_left">
		<dl class="thread_legend smalltext">
			<dd><img src="{$theme['imgdir']}/folder.gif" alt="{$lang->no_new_thread}" title="{$lang->no_new_thread}" /> {$lang->no_new_thread}</dd>
			<dd><img src="{$theme['imgdir']}/dot_folder.gif" alt="{$lang->posts_by_you}" title="{$lang->posts_by_you}" /> {$lang->posts_by_you}</dd>
			<dd><img src="{$theme['imgdir']}/lockfolder.gif" alt="{$lang->locked_thread}" title="{$lang->locked_thread}" /> {$lang->locked_thread}</dd>
		</dl>
	</div>
	<br style="clear: both" />
</div>

<div class="float_right" style="text-align: right;">
	{$inlinemod}
	{$searchforum}
	{$forumjump}
</div>
<br style="clear: both" />
{$inline_edit_js}

Result:
[attachment=34835]

Original code of my theme (forumdisplay_threadlist):
<div class="float_left">
	{$multipage}
</div>
<div class="float_right">
	{$newthread}
</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder clear">
	<tr>
		<td class="thead" colspan="{$colspan}">
			<div class="float_right">
				<span class="smalltext"><strong><a href="misc.php?action=markread&amp;fid={$fid}{$post_code_string}">{$lang->markforum_read}</a> | <a href="usercp2.php?action={$add_remove_subscription}subscription&amp;type=forum&amp;fid={$fid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a>{$clearstoredpass}</strong></span>
			</div>
			<div>
				<strong>{$foruminfo['name']}</strong>
			</div>
		</td>
	</tr>
	<tr>
		<td class="tcat" colspan="3" width="66%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']} / <a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']}</strong></span></td>
		<td class="tcat" align="center" width="7%"></td>
      {$ratingcol}
		<td class="tcat" align="left" width="7%"><span class="smalltext"><strong>Post info</strong></span></td>
		<td class="tcat" align="right" width="20%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong></span></td>
		{$inlinemodcol}
	</tr>
	{$selectall}
	{$announcementlist}
	{$threads}{$nullthreads}
	<tr>
		<td class="tfoot" align="right" colspan="{$colspan}">
			<form action="forumdisplay.php" method="get">
				<input type="hidden" name="selectall" value="" />
				<input type="hidden" name="fid" value="{$fid}" />
				<select name="sortby">
					{$sort_by_prefix}<option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option>
					<option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option>
					<option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option>
					<option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option>
					{$ratingsort}
					<option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option>
					<option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option>
					<option value="icon" {$sortsel['icon']}>{$lang->sort_by_icon}</option>
					<option value="lastposter" {$sortsel['lastposter']}>{$lang->sort_by_lastposter}</option>
					<option value="attachmentcount" {$sortsel['attachmentcount']}>{$lang->sort_by_attachmentcount}</option>
					{$xthreads_extra_sorting}
				</select>
				<select name="order">
					<option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option>
					<option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option>
				</select>
				<select name="datecut">
					<option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option>
					<option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option>
					<option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option>
					<option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option>
					<option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option>
					<option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option>
					<option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option>
					<option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option>
					<option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option>
				</select>
				{$prefixselect}
				{$gobutton}
			</form>
		</td>
	</tr>
</table>
<div class="float_left">
	{$multipage}
</div>
<div class="float_right" style="margin-top: 4px;">
	{$newthread}
</div>
<br class="clear" />
<br />
<div class="float_right" style="text-align: right;">
	{$inlinemod}{$forumjump}
</div>
<br class="clear" />
{$inline_edit_js}
Result:
[Image: 1439195883847-59529.png]

For what I can understand, these 2 variables are the "culprit" to display threads.
{$threads}{$nullthreads}

However, I am confused on how to design using it. Confused

Please guide me, thanks!
obvious question : is XThreads plugin installed and activated ?
Yes, but in this process, XThreads plugin isn't involved yet since I'm designing the forum layout.
look at the html:

</tr>
    {$selectall}
    {$announcementlist}
    {$threads}{$nullthreads}
    <tr>

So we see the table row ends, and then the $selectall etc are other templates in the forumdisplay template group.

If you go to the ACP and switch on output the template comments then you will be able to inspect element and see which template is being called. Then you edit that template.
(2015-08-10, 10:01 AM)Leefish Wrote: [ -> ]If you go to the ACP and switch on output the template comments then you will be able to inspect element and see which template is being called. Then you edit that template.

How to switch on output the template comments? Huh
Go to ACP (Admin Control Panel)

Home » Board Settings » Server and Optimization Options

Output template start/end comments?
This will enable or disable the output of template start/end comments in the HTML.

Set to yes
Edit: delayed response

template comments output is already turned on at the referred forum.
XThreads plugin is involved with the required forum display design.
I am still not sure that XThreads plugin is activated & working on that forum
(2015-08-10, 11:04 AM)XP Mai Wrote: [ -> ]How to switch on output the template comments? Huh

AdminCP -> Configuration (Settings) -> Server and Optimization Options

Set "Output template start/end comments?" to yes.

The start and end comments of templates will then be output to the HTML, so you can see in the page source output which templates were used.
.m , for the design (which is basically a ton of tables) s/he doesn't need XThreads. S/he will need Xthreads for some of the fields shown on the display, that is true.