[Template] Paul's Board Layout Mod

[pawl]

This is a little template modification that changes how boards are displayed on the main page. It puts everything in one cell, and makes the whole thing a little sleeker.
Preview: click
If you're still with me, read on. =]

---

All the editing you're going to do is in the Board List template; Admin Panel -> Themes -> Layout Templates -> Board -> Board List Tab


Start with the header section, beginning at line 3 - just add in the purple sections;

<tr>
<!-- <th class="icon"></th>
<th class="main">Board</th>
<th class="threads">Threads</th>
<th class="posts">Posts</th>
<th class="latest last">Last Post</th> -->
<th class="main" colspan="5">Board Stats</th>
</tr>

This comments out the original header row, stopping it from being displayed. Should you want it back, it will still be hidden away for you to use.
Alternatively, if you want to get rid of the whole thing, move the <!-- and --> so that they are before the <tr> and after the </tr> tags, removing the entire row.


Below this you'll find a <tbody> tag, finishing just below the end of the template. I chose to comment all of this out too, with the same <!-- --> as before.
I replaced it by adding the following just below;

<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="main clickable last" colspan="5">
<table width="100%">
<tr>
<td width="5%">
$[board.icon]
</td>
<td width="30%">
<span class="link"><a href="$[board.href]">$[board.display_name]</a></span><br />
<span class="description">Total Threads: $[board.threads]<br />
Total Posts: $[board.posts]</span>
</td>
<td width="65%" class="description" align="right">
$[board.description]
</td>
</tr>
</table>
</td>
</tr>
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
{/if}
{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
</tbody>



And done! That was fairly painless, right?
As ever, any problems, or if you've spotted a mistake, just post a reply. =]

[smashwords2]

Get 2 description images, using the Board Description Images plugin, with Total Threads at top of image and Total Posts at bottom of image.

I tried the <!-- and --> around the $[board.icon] and the $[board.description] but the images still overlapped. Oh crap.

What code do I need to remove or add to fix the double description?

[Relic]

Hey pawl! This looks absolutely fantastic! Before I use it on my forum, though, I'm wondering if you've tested it with Shrike's Board Description Images plugin?

[smashwords2]

Jan 28, 2013 18:45:41 GMT -8 Relic said:

Hey pawl! This looks absolutely fantastic! Before I use it on my forum, though, I'm wondering if you've tested it with Shrike's Board Description Images plugin?

Look at post above regarding Board Description Images.

[Relic]

From your post, it seems like it's not compatible because it duplicates things...? Or am I wrong?

[smashwords2]

Jan 29, 2013 11:17:47 GMT -8 Relic said:

From your post, it seems like it's not compatible because it duplicates things...? Or am I wrong?

Yes, it duplicates images and messes up the Threads/Posts data and Last Post information.

[LifeOfWylie]

Another great one, pawl! I tweaked it a little to suit me, as seen below:
I removed the red, which put the Threads and Posts on the same line...

<span class="description">Total Threads: $[board.threads]<br />
Total Posts: $[board.posts]</span>

...and changed the line to the blue to separate the fields:

<span class="description">$[board.threads] Threads, $[board.posts] Posts</span>

which reads as # Threads, # Posts. This reduces the box height even more! I tried a combo of the board.threads.posts, but that totaled it all together.

[pawl]

Just a quick post to say to @smashwords1993 and Relic that I don't know how the plugin you're talking about is coded, or how it works. Best bet would be to talk to the plugin's author, and see if they know what's gone wrong. =/

[Tk]

pawl I love it.
Just a quick question - Is there a way to get the board description to align left?
I'd rather they were under than to the side.
founders-forum.proboards.com/

Nevermind I did it by changing it to this:

<td width="95%">

<span class="link"><a href="$[board.href]">$[board.display_name]</a></span>

<span class="description">$[board.threads] Threads, $[board.posts] Posts<br />

    $[board.description]</span>

</td> 

[iTehSoupi]

Hello, bare with my simple and probably silly question, but after I replace Row 3 with the purple and move onto the <tbody> tag, there are several <tbody> tags in my template... Therefore, I'm confused as to which one I replace. I haven't added a single other code/template the site yet, just for your information.

[LifeOfWylie]

Apr 29, 2013 10:51:49 GMT -8 iTehSoupi said:

Hello, bare with my simple and probably silly question, but after I replace Row 3 with the purple and move onto the <tbody> tag, there are several <tbody> tags in my template... Therefore, I'm confused as to which one I replace. I haven't added a single other code/template the site yet, just for your information.

In my board list, it's lines 10 - 59 that get arrowed out. The very first <tbody>, just below the </thead>.

[iTehSoupi]

Erm... Sorry, LifeOfWylie. ^^; That doesn't really help any... It still looks exactly the same. I don't know if I'm just doing it wrong, or what. :B

[pawl]

Apr 29, 2013 10:51:49 GMT -8 iTehSoupi said:

Hello, bare with my simple and probably silly question, but after I replace Row 3 with the purple and move onto the <tbody> tag, there are several <tbody> tags in my template... Therefore, I'm confused as to which one I replace. I haven't added a single other code/template the site yet, just for your information.

Hey there iTehSoupi, sorry to have missed this for so long.
Still having a problem at all? If so, just double check that you have both a <!-- and a --> added to the template for each section, as per my first post. If you're still not sure, post up your template so that we can have a look. =]

[iTehSoupi]

It's precisely the "<!-- -->" that I think I'm missing/screwing up, and its the portion I don't quite understand... I still haven't been able to get it to work, despite my constant meddling. It's a biiiig change from the old template systems. xD I'm just not savvy enough with it yet to quite grasp the instructions entirely.

Its just all the placement that's getting me. :B

[pawl]

May 12, 2013 16:41:34 GMT -8 iTehSoupi said:

It's precisely the "<!-- -->" that I think I'm missing/screwing up, and its the portion I don't quite understand... I still haven't been able to get it to work, despite my constant meddling. It's a biiiig change from the old template systems. xD I'm just not savvy enough with it yet to quite grasp the instructions entirely.

Its just all the placement that's getting me. :B

Any chance you could post up the templates for me, iTehSoupi ? =]