Side by side boards

[User]

I want to put my boards list as squares like this:

Board 1                Posts: 1	Board 2                Posts: 2
Board 3                                 Posts: 3	Board 4                Posts: 4

And put imagens in those squares.

Something like this forum:
fantasiapocalypse.boards.net/

[User]

Someone?

[Nori]

Hello User :3


Using a previous supplied template code by Bennett 🚀 and a few modifications to fit the example look you supplied, I believe this should do the trick for yah. Note that this is just an absolute base for you to build and customize to fit your needs.


LAYOUT TEMPLATE -> BOARD -> BOARD LIST

    Replace the Entire thing with this:
<table role="grid" width="100%">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
{if $[board.odd] == 1}<tr>{/if}
<td id="$[board.content_id]" class="$[board.content_class] boardtd" valign="top">

<div class="board-name">$[board]</div>
<div class="board-last-post">
                    <span>
                        {if $[board.posts] > 0}
{if $[board.last_thread]}$[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]{/if}
                           {else}
                            No posts have been made on this board.
                        {/if}
                    </span>
                </div>
<div class="board-description"> $[board.description] </div>
<div class="board-info board-threads"> $[board.threads] Threads </div>
                   <div class="board-info board-posts"> $[board.posts] Posts </div>

               {if $[board.sub_board]}
<div class="board-info sub-boards">{foreach $[board.sub_board]}$[board.sub_board] {/foreach}</div>
{/if}

               <div class="clear"></div>
        </td>
       
        {if $[board.odd] == 1}
        {if $[board.lastIndex] != $[board.index]}
        <td width="2%"> </td>
        {/if}
        {/if}

        {if $[board.even] == 1}</tr>{/if}
{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>
</table>


CUSTOM CSS

    To get you started, put at bottom of style sheet:
/* -------------------------------
~~~~~~ BEGIN CUSTOM STYLES ~~~~~~
=============================== */

/* Board Block Styles */
.boardtd { padding: 25px; text-align:center; }

.board-name a { font:italic 25px Verdana, sans-serif; }

.board-last-post { text-align:right; padding:8px 0px 3px; }
.board-last-post span { font-style:italic; }

.board-description {
   height: 70px;
   padding: 5px;
   border:2px solid #000;
   text-align: justify;
   overflow-x: auto;
}

.board-info {
   float: left;
   width: 49%;
   margin-top: 4px;
   background-color: rgba(0,0,0,.3);
   padding: 5px 0px;
   text-transform: uppercase;
}
.board-threads { margin-right:1%; }
.board-posts { margin-left:1%; }

.sub-boards { width:98%; padding:1%; }
.sub-boards a { margin-right:15px; }

/* End Board Block Styles */

Cheers! :3

[User]

Apr 7, 2018 8:27:19 GMT -8 Nori said:

Hello User :3


Using a previous supplied template code by Bennett 🚀 and a few modifications to fit the example look you supplied, I believe this should do the trick for yah. Note that this is just an absolute base for you to build and customize to fit your needs.


LAYOUT TEMPLATE -> BOARD -> BOARD LIST

    Replace the Entire thing with this:
<table role="grid" width="100%">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
{if $[board.odd] == 1}<tr>{/if}
<td id="$[board.content_id]" class="$[board.content_class] boardtd" valign="top">

<div class="board-name">$[board]</div>
<div class="board-last-post">
                    <span>
                        {if $[board.posts] > 0}
{if $[board.last_thread]}$[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]{/if}
                           {else}
                            No posts have been made on this board.
                        {/if}
                    </span>
                </div>
<div class="board-description"> $[board.description] </div>
<div class="board-info board-threads"> $[board.threads] Threads </div>
                   <div class="board-info board-posts"> $[board.posts] Posts </div>

               {if $[board.sub_board]}
<div class="board-info sub-boards">{foreach $[board.sub_board]}$[board.sub_board] {/foreach}</div>
{/if}

               <div class="clear"></div>
        </td>
       
        {if $[board.odd] == 1}
        {if $[board.lastIndex] != $[board.index]}
        <td width="2%"> </td>
        {/if}
        {/if}

        {if $[board.even] == 1}</tr>{/if}
{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>
</table>


CUSTOM CSS

    To get you started, put at bottom of style sheet:
/* -------------------------------
~~~~~~ BEGIN CUSTOM STYLES ~~~~~~
=============================== */

/* Board Block Styles */
.boardtd { padding: 25px; text-align:center; }

.board-name a { font:italic 25px Verdana, sans-serif; }

.board-last-post { text-align:right; padding:8px 0px 3px; }
.board-last-post span { font-style:italic; }

.board-description {
   height: 70px;
   padding: 5px;
   border:2px solid #000;
   text-align: justify;
   overflow-x: auto;
}

.board-info {
   float: left;
   width: 49%;
   margin-top: 4px;
   background-color: rgba(0,0,0,.3);
   padding: 5px 0px;
   text-transform: uppercase;
}
.board-threads { margin-right:1%; }
.board-posts { margin-left:1%; }

.sub-boards { width:98%; padding:1%; }
.sub-boards a { margin-right:15px; }

/* End Board Block Styles */

Cheers! :3

Thank You! It's perfect!

[User]

Just a question

How I change the image of specific square, without changing all?

[Nori]

You can add this to the CSS:

#board-1 .board-description { background:url(IMG URL HERE) no-repeat center top; }

The red highlights parts you can/need to edit. For every board you want to add an image to you'll have to change the id number at the beginning. The end part you can reference this for the values you can use.

You can also change the 'no-repeat' if you want.

[User]

Hello again

Is there a way to put board posts and threads inside of background image? And direct to board when click on image?

[Nori]

Just to make sure I'm on the same page, is what you're asking that you want to move both the Threads & Posts sections inside of the description area and then have that entire area clickable so that it directs to the board?

[User]

Apr 8, 2018 17:48:08 GMT -8 Nori said:

Just to make sure I'm on the same page, is what you're asking that you want to move both the Threads & Posts sections inside of the description area and then have that entire area clickable so that it directs to the board?

Yes.

[Nori]

Kk, I think this should do the trick.

REPLACE LAYOUT TEMPLATE -> BOARD LIST
The whole thing, s'just easier:
<table role="grid" width="100%">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
{if $[board.odd] == 1}<tr>{/if}
<td id="$[board.content_id]" class="$[board.content_class] boardtd" valign="top">

<div class="board-name">$[board]</div>
<div class="board-last-post">
                    <span>
                        {if $[board.posts] > 0}
{if $[board.last_thread]}$[board.last_thread.recent_link] by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]{/if}
                           {else}
                            No posts have been made on this board.
                        {/if}
                    </span>
                </div>
                   <table class="board-description clickable">
                       <tbody valign="top">
                           <tr>
                               <td colspan="2"> $[board.description] <span class="hide">$[board]</span> </td>
                           </tr>
                           <tr>
                               <td><div class="board-info board-threads"> $[board.threads] Threads </div></td>
                               <td><div class="board-info board-posts"> $[board.posts] Posts </div></td>
                           </tr>
                       </tbody>
                   </table>

               {if $[board.sub_board]}
<div class="board-info sub-boards">{foreach $[board.sub_board]}$[board.sub_board] {/foreach}</div>
{/if}

               <div class="clear"></div>
        </td>
       
        {if $[board.odd] == 1}
        {if $[board.lastIndex] != $[board.index]}
        <td width="2%"> </td>
        {/if}
        {/if}

        {if $[board.even] == 1}</tr>{/if}
{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>
</table>

CSS CHANGES

From the first .board-description up to and including the .sub-boards a line:
.board-description {
   width:100%;
   border:2px solid #000;
   text-align: justify;
   overflow-x: auto;
}
.board-description td { padding:5px; }
.board-description tr:first-child td:first-child { height:70px; }
.board-info {
   float: left;
   width: 98%;
   padding: 5px 1%;
   margin-top: 4px;
   background-color: rgba(0,0,0,.3);
   text-transform: uppercase;
   text-align: center;
}

.sub-boards a { margin-right:15px; }
Then I assume your custom image background lines underneath this :3

[bai]

Nori thanks for such a great code! i'm editing it now and i was wondering if I could get your help with something?

[Nori]

I'm a bit busy with some projects for school coming due but I will give it my best shot :3 What can I help you with on this?

[bai]

Jul 11, 2018 7:33:21 GMT -8 Nori said:

I'm a bit busy with some projects for school coming due but I will give it my best shot :3 What can I help you with on this?

Thanks! I was having trouble aligning an "avatar_medium" variable with the last post information and it was really bugging me.

[Nori]

Try putting this code just above the '<div class="board-name">...' line in the Layout Template:
{if $[board.posts] > 0}
                      <div class="board-lastpost-ava">
                           <a href="$[board.last_thread.last_post.created_by.link.href]">
                               $[board.last_thread.last_post.created_by.avatar_medium]
                           </a>
                      </div>
                   {else}
                    <div class="board-lastpost-ava"> <img src="http://storage.proboards.com/forum/images/defaultavatar.png"> </div>
                   {/if}


And then add this line to the CSS:
.board-lastpost-ava { float:left; }

That should put it to the left of the Board name & Last Post info. Let me know if you were trying to do something else :3

Also you can change the image of the 'defaultavatar' link to whatever you use for the default ava on your forum theme.