Post by Joshua Farrell on Mar 18, 2024 11:28:54 GMT -8
The following is free to use, free to edit and free to distribute in any ProBoards Themes you want to produce and release, without clause. This includes posting this template and css edit on theme and template designing forums. This also means that if you find a better way to work with the below edits, you can include those edits in any re-distributions you want to include it in.
The css in the following code, can be adjusted to allow you to do a board grid of any number, like a 2 board column, 3 board column, 4 board column, 5 board column or more! The only stipulation, is that the forum wrapper size needs to be large enough to handle the column size. This may be something that requires a fixed width to do so.
Example of a 4 Board Column
The above screenshot, has a Forum Width of 1020px. In order to recreate the above image without adjusting the css I've included, you would need to implement a forum width of 1020px into your theme you are putting this into.
There are two steps in the process of creating the above.
- Editing and replacing template coding on: Admin Home > Themes > Layout Templates > Board > Tab:Board List
- CSS Find and Replace
Step 1: Template Edit
For the following template edit, please visit the following location:
Admin Home > Themes > Layout Templates > Board > Tab:Board List
Replace the entire Board List Tab, with the following template coding.
<div class="list" role="grid">
<div>
{foreach $[board]}
{if !$[board.is_redirect]}
<div id="$[board.content_id]" class="$[board.content_class]">
<div class="main clickable">
<div class="descriptive"><span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
<p class="description">$[board.description]</p>
{if $[board.num_mods]}
<p class="moderators">
Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</p>
{/if}
{if $[board.sub_board]}
<p class="sub-boards">
Sub-board{if $[board.sub_board] != 1}s{/if}:
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}
</p>
{/if}
</div>
<div class="threads"><strong>Total Threads:</strong> {if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</div>
<div class="posts"><strong>Total Posts:</strong> {if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</div>
<div 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}
</div>
</div>
</div>
{else}
<div id="$[board.content_id]" class="$[board.content_class]">
<div class="main clickable redirect last">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</div>
</div>
{/if}
{/foreach}
{if !$[board]}
<div class="last"><div class="last center">No boards were found.</div></div>
{/if}
</div>
</div>Step 2: CSS Find and Replace
Now go to your theme's CSS Stylesheet, and find the section labeled as /* Board List */.
Once you find the above section, replace the entire Board List Section with the following CSS:
/* Board List */
@board_names_color: @empty;
@board_names_font: 105% @default_forum_text_font_family;
@board_desc_color: @empty;
@board_desc_font: normal 90% @default_forum_text_font_family;
@board_mod_color: @empty;
@board_mod_font: 75% @default_forum_text_font_family;
@board_sub_color: @empty;
@board_sub_font: 75% @default_forum_text_font_family;
@board_align_main: left;
@board_align_threads: left;
@board_align_posts: left;
@board_align_last_post: left;
.boards .main { margin: 1px; text-align: @board_align_main; }
.boards .threads { float:left; width: 100%; height: 20px; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { float: left; width: 100%; height: 20px; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { float:left; width:100%; height: 60px; text-align: @board_align_last_post; }
.boards .main.redirect { border-right: 1px; }
.boards .main .link a { color: @board_names_color; font: @board_names_font; }
.boards .main .description { color: @board_desc_color; font: @board_desc_font; padding-left: 0px; padding-bottom: 2px; }
.boards .main .moderators { color: @board_mod_color; font: @board_mod_font; padding-bottom: 10px; }
.boards .main .sub-boards { color: @board_sub_color; font: @board_sub_font; }
.boards div.list { padding: 4px; }
.boards div.list div.main { display: inline-block; background-color: @container_background_color_2; float: left; width: 23.8%; height: 275px; border: 1px; border-style: solid; border-radius: 8px; padding: 4px; }
.boards div.list div.main div.descriptive { width: 100%; height: 175px; border-bottom: 1px; border-style: solid; }
.boards div.list > div > div > div { padding: 4px; }
At this point, feel free to save. The above will obviously create a 4 column appearance, so long as you went and edited your forum width to match 1020px.
If you want to change the board columns to any number of columns, you would need to edit the css line: .boards div.list div.main, and replace the width: 23.8%. 48% should automatically adjust the display to a 2 board column display. If it doesn't properly do it, adjust the percentage by increments, or hard code the width to 500px, or something slightly above that to get an exact fit for a 2 board column.
The width percentage for creating multiple boards of 3 or more, can be adjusted to an exact size to get how ever many boards you want going across, based on your forum width. So if you have a 1200px width forum wrapper and wanted a 5 board wide column display, the width of the above css entry, needs to be near the 240px number. Considering the padding and margin numbers, you may end up having a width 1-2px off of 240px to fit exactly.