Post by Riley on May 5, 2024 11:59:24 GMT -8
Forum URL: onceandforall.boards.net/
And this is the div class from the CSS, incase that's of any help:
Update, 5/10 - I have resolved this issue! I realized I was missing an inline-block code.
Heya, trying to create a custom look for how subboards are displayed but running into a roadblock. In the image below is how I'm aiming for it to look - I've gotten the box design down just fine (red for now for easier viewing) but am running into an issue with the div classes I used to get here.
Visual Mock-up (Google Slides):
Site:
Run into this issue before, with divs liking to stack on top without a table. Don't remember how to solve it ):
It also appears outside of the designated tr class, since my boards are actually just images aside from the text and subboards.
The wrong colour and spacing is an easy fix for later when the actual subboards are in the right spot on that little 'tree bar' underneath. May be worth noting that this is within the 2nd <tr> in the template beneath the board's main content.
Here is the current code in the Board List layout template (sorry in advance lol):
<!-- RILEY'S BOARD LIST REMODEL CODE BEGIN -->
<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr class="{if $[board.is_new]}board-new {else}board-old{/if}">
<!-- MAIN SECTION OF BOARD; INTERACTIVE TITLE + DESCRIPTION -->
<td class="board-info clickable">
<div class="board-title">$[board]</div>
<div class="board-desc">$[board.description]</div>
</td>
<td class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link]<br />
by $[board.last_thread.last_post.created_by]<br />
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
</td>
</tr>
<tr><td> <!-- SUBBOARDS -->
<div align="right">
{if $[board.sub_board]}
<div class="boardSub">
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>{/foreach}</div>{/if}
</div></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>
<div class="board-divider"></div>
{/if}
{/foreach}
</tbody>
</table>
And this is the div class from the CSS, incase that's of any help:
.boardSub {
background-color:red;
padding:5px;
border-radius:5%;
width:150px;
text-align:center;
}
Many thanks for any help! I'm just too rusty to remember the right thing to do here without convolution.
