Jump to the post that solved this thread.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Solved: 4 Years, 10 Months, 3 Weeks ago How to design MyBB threadlist?
#1
Solved: 4 Years, 10 Months, 3 Weeks ago
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:
   

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!
I'm new to MyBB, has been using WordPress and only know HTML/CSS.
Reply
#2
Solved: 4 Years, 10 Months, 3 Weeks ago
obvious question : is XThreads plugin installed and activated ?
Reply
#3
Solved: 4 Years, 10 Months, 3 Weeks ago
Yes, but in this process, XThreads plugin isn't involved yet since I'm designing the forum layout.
I'm new to MyBB, has been using WordPress and only know HTML/CSS.
Reply
#4
Solved: 4 Years, 10 Months, 3 Weeks ago
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.
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#5
Solved: 4 Years, 10 Months, 3 Weeks ago
(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
I'm new to MyBB, has been using WordPress and only know HTML/CSS.
Reply
#6
Solved: 4 Years, 10 Months, 3 Weeks ago
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
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#7
Solved: 4 Years, 10 Months, 3 Weeks ago
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
Reply
#8
Solved: 4 Years, 10 Months, 3 Weeks ago
(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.
Regards, Ad Bakker (NL)
Reply
#9
Solved: 4 Years, 10 Months, 3 Weeks ago
.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.
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)