Template Help Board List

[Teg]

pawl , Brian , David Clark , or anyone else that might be able to help me. 

I'm trying to recode a theme I coded in Codepen.io, to work with ProBoards. That said. I'm having issues with the board list layout. Essentially, each row will contain 4 boards (4 columns).  Each board will have it's own custom board icon (new/old) via the plugin.

I've tried converting it over to tables the way PB does it and it just isn't working.

For the no pb version, the codepen.io can be found here: codepen.io/teg/pen/YqbPQw <!--Boards--> is marked in the HTML and the css for those sections is at the bottom of the css...

Here is what I currently have for my Board List Template. Mind you I've changed it over and over again achieving no results for the past 5-6 hours. Please, help. I do want to keep my class names if possible.

Forum URL: itshogwarts.boards.net

{foreach $[board]}
{if !$[board.is_redirect]}
<table style="background:url('http://storage.proboards.com/6525103/i/Dxwp7VQvuwM7DOZrN8fx.png') no-repeat center; margin-top: 15px; width: 100%;" class="list">
<tr>

<td style="width: 25%;" class="main clickable">
<div class="forumBan">
{if $[board.category_id] == "1"}
<h3 class="enHallTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
{elseif $[board.category_id] == "3"}
<h3 class="groundsTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
{elseif $[board.category_id] == "4"}
<h3 class="castleTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
{else}
<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
{/if}
<p class="boardDescriptions">$[board.description]</p>
<span style="padding-right: 5px;">Posts:</span>
<span>{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</span>
<span style="padding-left: 10px; padding-right: 5px;">Last Post:</span>
{if $[board.posts] > 0}
{if $[board.last_thread]}
<span>by $[board.last_thread.last_post.created_by]</span>
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts.
{/if}
{/if}
</div>
<td class="icons">$[board.icon]</td>
</td>


</tr>
</table>
{/if}
{/foreach}

[Brian]

I'm seeing two problems towards the end.

- You have an extra closing {/if}
- Your icons <td> element is starting in the middle of another <td> element instead of after the closing </td> of that element

{else}
No posts.
{/if}
{/if}
</div>
<td class="icons">$[board.icon]</td>
</td>


</tr>
</table>
{/if}
{/foreach}

[Teg]

May 17, 2016 8:26:45 GMT -8 Brian said:

I'm seeing two problems towards the end.

- You have an extra closing {/if}
- Your icons <td> element is starting in the middle of another <td> element instead of after the closing </td> of that element

{else}
No posts.
{/if}
{/if}
</div>
<td class="icons">$[board.icon]</td>
</td>


</tr>
</table>
{/if}
{/foreach}

I blame sleep deprivation for that (lol). That said, I've fixed that, and it's still not displaying properly.


{foreach $[board]}
{if !$[board.is_redirect]}
<table style="background:url('http://storage.proboards.com/6525103/i/Dxwp7VQvuwM7DOZrN8fx.png') no-repeat center; margin-top: 15px; width: 100%;" class="list">
   <tr>
       <td style="width: 25%;" class="main clickable">
           <div class="forumBan">
               {if $[board.category_id] == "1"}
               <h3 class="enHallTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {elseif $[board.category_id] == "3"}
               <h3 class="groundsTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {elseif $[board.category_id] == "4"}
               <h3 class="castleTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {else}
               <span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
               {/if}
               <p class="boardDescriptions">$[board.description]</p>
               <span style="padding-right: 5px;">Posts:</span>
               <span>{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</span>
               <span style="padding-left: 10px; padding-right: 5px;">Last Post:</span>
               {if $[board.posts] > 0}
               {if $[board.last_thread]}
               <span>by $[board.last_thread.last_post.created_by]</span>
               <span class="date">$[board.last_thread.last_post.created_on]</span>
               {else}
               No posts.
               {/if}
           </div>
       </td>
       <td class="icons">$[board.icon]</td>
   </tr>
</table>
{/if}
{/foreach}

[Brian]

Actually, I misread the if statements. Bring back the {/if} that I instructed you to remove.

If it's still displaying improperly after that a link to a page showing the issue would be of assistance as I have no idea what's visually wrong with it based on the HTML alone.

[Teg]

Brian, the link was in the first post from the beginning. That said, it wasn't "linked" as I forgot the http:// before the board's url.

Essentially, the $board.icon needs to be placed inside a div as shown in the code below. That said, I did as suggested and still no change.

{foreach $[board]}
{if !$[board.is_redirect]}
<table style="background:url('http://storage.proboards.com/6525103/i/Dxwp7VQvuwM7DOZrN8fx.png') no-repeat center; margin-top: 15px; width: 100%;" class="list">
   <tr>
       <td style="width: 25%;" class="main clickable">
           <div class="forumBan">
               {if $[board.category_id] == "1"}
               <h3 class="enHallTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {elseif $[board.category_id] == "3"}
               <h3 class="groundsTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {elseif $[board.category_id] == "4"}
               <h3 class="castleTitles"><a href="$[board.href]">$[board]</a></h3>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
               {else}
               <span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
               {/if}
               <p class="boardDescriptions">$[board.description]</p>
               <span style="padding-right: 5px;">Posts:</span>
               <span>{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</span>
               <span style="padding-left: 10px; padding-right: 5px;">Last Post:</span>
               {if $[board.posts] > 0}
               {if $[board.last_thread]}
               <span>by $[board.last_thread.last_post.created_by]</span>
               <span class="date">$[board.last_thread.last_post.created_on]</span>
               {else}
               No posts.
               {/if}
               {/if}
               <div class="homeIcons">
                   $[board.icon]
               </div>
           </div>
       </td>

   </tr>
</table>
{/if}
{/foreach}

[Brian]

The div containing your board icons appears to have a z-index of -1. Since the .forumBan element it's contained within has no z-index specified it defaults to 0 which is higher than that of the board icons and thus causes the icons to appear behind the .forumBan element.

You'll need to increase the z-index of the icons to make them show.

[Teg]

May 18, 2016 8:59:13 GMT -8 Brian said:

The div containing your board icons appears to have a z-index of -1. Since the .forumBan element it's contained within has no z-index specified it defaults to 0 which is higher than that of the board icons and thus causes the icons to appear behind the .forumBan element.

You'll need to increase the z-index of the icons to make them show.

It's not just the icons, it's the rows... there should be 4 boards displaying in each row... and there's only 1

[Brian]

The way you currently have them set up doesn't permit that.

You have each board producing a table with a width of 100%. With your current HTML structure in the board loop the only way for your boards to be side by side with 4 per row is if you change the width of the table on line 3 to 25% and add a float: left; property to its styles.

[Teg]

Ah, see... I told you I was tired when I posted this.... I'm going to re-evaluate and try to fix that. If I still have issues I'm going to bump & tag you in this thread.