Change thread list layout on a certain board?

[SafeInSanity]

I was wondering if there was a way to change the way the thread list would appear on a certain board?  I currently have a board that I am using for member blogs and I would like the threads to display on the the thread list page like a blog rather than like a forum .

I was hoping that I could get them looking something like this:


PS: I know that you can achieve this look in a custom page by using the "Display Post" widget, but it currently doesn't allow us to display threads by (thread id) yet. 
I would like to make this a feature request for pages in v6 if possible also?

Thanks

[Kami]

This is possible by using an if statement (if $[board.id] == X). How comfortable are you with editing the templates? Do you need a general direction or the full template written for you?

[SafeInSanity]

Sept 25, 2019 8:25:36 GMT -8 Kami said:

This is possible by using an if statement (if $[board.id] == X). How comfortable are you with editing the templates? Do you need a general direction or the full template written for you?

Full template. I'm no coder! lol

[Kami]

Do you have a due date you want this done by? I could  work on something over the next couple of days or so, but I work FT so I couldn't do it in a day.

[SafeInSanity]

Sept 25, 2019 9:47:49 GMT -8 Kami said:

Do you have a due date you want this done by? I could  work on something over the next couple of days or so, but I work FT so I couldn't do it in a day.

No due date. Whenever you can do it would be great! I would really appreciate it too! 

[Kami]

Sept 25, 2019 10:44:05 GMT -8 SafeInSanity said:

Sept 25, 2019 9:47:49 GMT -8 Kami said:

Do you have a due date you want this done by? I could  work on something over the next couple of days or so, but I work FT so I couldn't do it in a day.

No due date. Whenever you can do it would be great! I would really appreciate it too! 

Sounds good! Can you provide your URL and the name of the board you want to affect? feel free to PM it to me if you don't want to post it publicly.

[SafeInSanity]

Sept 25, 2019 11:11:33 GMT -8 Kami said:

Sept 25, 2019 10:44:05 GMT -8 SafeInSanity said:

No due date. Whenever you can do it would be great! I would really appreciate it too! 

Sounds good! Can you provide your URL and the name of the board you want to affect? feel free to PM it to me if you don't want to post it publicly.

Forum url:
tvfansonline.proboards.com

Board/Blog url:
tvfansonline.proboards.com/board/9

[Kami]

Deleted my last post -- I only had one thread up on my sample board, and there's a slight issue if there is more than one thread (this is why you test, kids!).

Should be done soon.

[Kami]

OK here we go. Shout out to elli for debugging!

Preview: kamitest5.proboards.com/board/2/test-board

Some considerations: I took liberties with the screenshot due to elements present that the Thread Summary doesn't have (pagination, the checkbox for moderation). I've removed folder icons and labels as well, so please let me know if you need them back (and where, if you do).

Step 1: Navigate to Admin > Themes > Advanced Styles & CSS > Stylesheet (tab). Scroll to the bottom of the style sheet and create a few new lines at the bottom. Then, paste the following CSS and Save Changes.

SPOILER: Click to show

/* =================================================
Blog-like Thread List for Specific Board
==================================================*/

#blogthreads .control-bar {
border-bottom: 1px solid;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#blogthreads .content.cap-bottom {
margin-top: 1rem;
border-style: none;
}

#blogthreads .blogposts {
margin-bottom: 10px;
}

#blogthreads table.blogposts {
border: 1px solid;
border-radius: 13px;
border-spacing: 0;
border-collapse: separate;
overflow: hidden;
}

#blogthreads .container>.content {
border-style: none;
}

#blogthreads tr.item {
background-color: @title_bar_background_color;
background-image: @title_bar_background_image;
background-attachment: @title_bar_background_attachment;
background-repeat: @title_bar_background_repeat;
background-position: @title_bar_background_position;
border: @title_bar_border;
.rounded-corners(@title_bar_border_radius);
}

#blogthreads tr.item a {
color: @title_text_color;
font: @title_text_font;
text-decoration: @title_text_decoration;
font-variant: @title_text_variant;
text-transform: @title_text_transform;
text-align: @title_text_align;
text-shadow: @title_text_shadow;
}

#blogthreads tr.item a:hover {
color: @title_text_color!important;
font: @title_text_font;
text-decoration: @title_text_decoration;
font-variant: @title_text_variant;
text-transform: @title_text_transform;
text-align: @title_text_align;
text-shadow: @title_text_shadow;
}


#blogthreads table.list>tbody>tr>td {
border-style: none;
}

#blogthreads td.main.clickable {
padding: 10px 10px;
}

#blogthreads .blogdate {
text-align: right;
}

#blogthreads tr.blogspacer {
line-height: 1px;
}

#blogthreads .blogspacer td {
background-color: #eee;
padding: 0;
}

#blogthreads .checkbox.clickable {
width: 1%;
}

#blogthreads .readmore {
text-align: right;
}

Step 2: Next, navigate to Admin > Structure > Layout Templates and select the Board template. In the Board (tab), replace the HTML with this, and Save Changes:

SPOILER: Click to show

{if $[board.sub_board_list]}
    <div class="container boards">
        <div class="title-bar"><h2>Sub-Boards</h2></div>
        <div class="content cap-bottom">
            $[board.sub_board_list]
        </div>
    </div>
{/if}
{if $[display_thread_list]}
    <div{if $[viewing_bookmarks]} id="bookmarks"{/if} {if $[board.id] == 9} id="blogthreads"{/if} class="container threads">
        <div class="title-bar">
            {if $[create_thread_button]}
                <ul class="controls"><li>$[create_thread_button]</li></ul>
            {/if}
            <h1>$[board.display_name]</h1>
        </div>
        <div class="control-bar ui-helper-clearfix $[scroll_class]">
            $[search]
            <div class="controls">
                $[selection_menu]
                $[action_menu]
            </div>
            $[pagination]
        </div>
        
        <div class="content cap-bottom">
            <table class="list{if $[board.id] == 9} blogcontainer{/if}">
                {if $[board.id] != 9}
                <thead>
                    <tr class="head">
                        <th class="icon"><span class="aria-hidden">Status</span>&nbsp;</th>
                        <th class="checkbox">&nbsp;</th>
                        <th class="main">Subject</th>
                        <th class="created-by">Created By</th>
                        <th class="replies">Replies</th>
                        <th class="views">Views</th>
                        <th class="latest last">Last Post</th>
                    </tr>
                </thead>
                {/if}
                <tbody class="$[list_class]">
                    $[thread_list]
                </tbody>
            </table>
        </div>
    </div>
{/if}

{if $[thread_count] > 0}
    {if $[legend]}
        <div class="container legend">
            <div class="title-bar"><h2>Legend</h2></div>
            <div class="content">
                <table>
                    <tr>
                        {foreach $[legend]}
                            <td>$[legend.icon] <span>$[legend.name]</span></td>
                        {/foreach}
                    </tr>
                </table>
            </div>
        </div>
    {/if}
{/if}

{if $[board.id]}{if $[show_stats]}
    <div class="container stats">
        <div class="title-bar"><h2>Board Information &amp; Statistics</h2></div>
        <div class="content">
            <table>
                <tbody>
                    {if $[board.description]}
                        <tr>
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <td class="icon">$[image.description]</td>
                                        <td class="info last">
                                            <div class="board-name">$[board.name]</div>
                                            <div class="board-description">$[board.description]</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    {/if}
                    <tr{if !$[show_users_viewing]} class="last"{/if}>
                        <td>
                            <table>
                                <tr>
                                    <td class="icon">$[image.stats]</td>
                                    <td class="info">
                                        <table>
                                            <tbody>
                                                <tr><th colspan="2">Threads and Posts</th></tr>
                                                <tr><td>Total Threads:</td><td>{if $[total_threads] == -1}N/A{else}$[total_threads]{/if}</td></tr>
                                                <tr><td>Total Posts:</td><td>{if $[total_posts] == -1}N/A{else}$[total_posts]{/if}</td></tr>
                                                {if $[board.moderators_link]}<tr><td colspan="2">This board has $[board.moderators_link]</td></tr>{/if}
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td class="icon">$[image.members]</td>
                                    <td class="info last">
                                        <table>
                                            <tbody>
                                                <tr><th colspan="1">On This Board</th></tr>
                                                <tr><td>You <strong>can{if !$[can.create_threads]}not{/if}</strong> create threads.</td></tr>
                                                <tr><td>You <strong>can{if !$[can.reply_to_threads]}not{/if}</strong> reply to threads.</td></tr>
                                                <tr><td>You <strong>can{if !$[can.create_polls]}not{/if}</strong> create polls.</td></tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {if $[show_users_viewing]}
                        <tr class="last">
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <td class="icon">$[image.online]</td>
                                        <td class="info last">
                                            <table>
                                                <tbody>
                                                    <tr><th>Users Viewing</th></tr>
                                                    <tr><td>$[total_board_staff] Staff, $[total_board_members] Member{if $[total_board_members] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_board_guests] Guest{if $[total_board_guests] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
                                                    <tr><td><tr><td>
                                                        {foreach $[board_user]}
                                                            $[board_user]{if $[board_user.invisible]} <span class="small">(invisible)</span>{/if}$[board_user.comma]
                                                        {/foreach}
                                                        {if $[total_online_not_shown] > 0}
                                                            , and <a href="$[view_active_members_link.href]" class="$[view_active_members_link.class]">$[total_online_not_shown] more...</a>
                                                        {/if}
                                                    </td></tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    {/if}
                </tbody>
            </table>
        </div>
    </div>
{/if}{/if}

Step 3: Finally, on the same page, click on the Thread List tab. Replace the HTML there with this, and Save Changes:

SPOILER: Click to show

{foreach $[thread]}
    {if $[thread.board.id] == 9}
        <table class="blogposts list">
            <tr id="$[thread.content_id]" class="$[thread.content_class]">
                <td class="main clickable" title="$[thread.short_content]" colspan="3">
                    <span class="link target">$[thread.icons] $[thread]</span>
                </td>
            </tr>

            <tr class="bloginfo">
                <td class="checkboxfix">By:</td>
                <td class="blogauthor">
                    $[thread.created_by]
                </td>
                <td class="blogdate">
                    $[thread.created_on]
                </td>
            </tr>
            <tr class="blogspacer">
                <td colspan="3">&nbsp;</td>
            </tr>
            <tr>
                <td class="checkbox clickable">$[thread.checkbox]</td>
                <td class="blogsummary" colspan="2">$[thread.short_content]&hellip;</td>
            </tr>
            <tr>
                <td class="blogpaginatione" colspan="2">
                    {if $[thread.pagination]}<span class="ui-micro-pagination">Pages: $[thread.pagination]</span>{else}<span class="ui-micro-pagination">Pages: <ul class><li><a href="/thread/$[thread.id]/">1</a></li></ul></span>{/if}
                </td>
                <td class="readmore"><a href="$[thread.link.href]" class="button" role="button">Read More</a></td>
            </tr>
        </table>
    {else}

        <tr id="$[thread.content_id]" class="$[thread.content_class]">
            <td class="icon">$[thread.icon]</td>
            <td class="checkbox clickable">$[thread.checkbox]</td>
            <td class="main clickable" title="$[thread.short_content]">
                <table>
                    <tr>
                        <td>$[thread.icons]</td>
                        <td>
                            $[thread.labels]
                            <span class="link target">$[thread]</span>
                            {if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
                        </td>
                    </tr>
                </table>
            </td>
            <td class="created-by clickable">$[thread.created_by]</td>
            <td class="replies clickable">$[thread.replies]</td>
            <td class="views">$[thread.views]</td>
            <td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
        </tr>
    {/if}
{/foreach}

{if !$[thread]}
    <tr class="last">
        <td class="last center" colspan="7">No threads were found.</td>
    </tr>
{/if}

Let me know if you have any questions!

[SafeInSanity]

Sept 29, 2019 14:06:08 GMT -8 Kami said:

OK here we go. Shout out to elli for debugging!

Preview: kamitest5.proboards.com/board/2/test-board

Some considerations: I took liberties with the screenshot due to elements present that the Thread Summary doesn't have (pagination, the checkbox for moderation). I've removed folder icons and labels as well, so please let me know if you need them back (and where, if you do).

Step 1: Navigate to Admin > Themes > Advanced Styles & CSS > Stylesheet (tab). Scroll to the bottom of the style sheet and create a few new lines at the bottom. Then, paste the following CSS and Save Changes.

SPOILER: Click to show

/* =================================================
Blog-like Thread List for Specific Board
==================================================*/

#blogthreads .control-bar {
border-bottom: 1px solid;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#blogthreads .content.cap-bottom {
margin-top: 1rem;
border-style: none;
}

#blogthreads .blogposts {
margin-bottom: 10px;
}

#blogthreads table.blogposts {
border: 1px solid;
border-radius: 13px;
border-spacing: 0;
border-collapse: separate;
overflow: hidden;
}

#blogthreads .container>.content {
border-style: none;
}

#blogthreads tr.item {
background-color: @title_bar_background_color;
background-image: @title_bar_background_image;
background-attachment: @title_bar_background_attachment;
background-repeat: @title_bar_background_repeat;
background-position: @title_bar_background_position;
border: @title_bar_border;
.rounded-corners(@title_bar_border_radius);
}

#blogthreads tr.item a {
color: @title_text_color;
font: @title_text_font;
text-decoration: @title_text_decoration;
font-variant: @title_text_variant;
text-transform: @title_text_transform;
text-align: @title_text_align;
text-shadow: @title_text_shadow;
}

#blogthreads tr.item a:hover {
color: @title_text_color!important;
font: @title_text_font;
text-decoration: @title_text_decoration;
font-variant: @title_text_variant;
text-transform: @title_text_transform;
text-align: @title_text_align;
text-shadow: @title_text_shadow;
}


#blogthreads table.list>tbody>tr>td {
border-style: none;
}

#blogthreads td.main.clickable {
padding: 10px 10px;
}

#blogthreads .blogdate {
text-align: right;
}

#blogthreads tr.blogspacer {
line-height: 1px;
}

#blogthreads .blogspacer td {
background-color: #eee;
padding: 0;
}

#blogthreads .checkbox.clickable {
width: 1%;
}

#blogthreads .readmore {
text-align: right;
}

Step 2: Next, navigate to Admin > Structure > Layout Templates and select the Board template. In the Board (tab), replace the HTML with this, and Save Changes:

SPOILER: Click to show

{if $[board.sub_board_list]}
    <div class="container boards">
        <div class="title-bar"><h2>Sub-Boards</h2></div>
        <div class="content cap-bottom">
            $[board.sub_board_list]
        </div>
    </div>
{/if}
{if $[display_thread_list]}
    <div{if $[viewing_bookmarks]} id="bookmarks"{/if} {if $[board.id] == 9} id="blogthreads"{/if} class="container threads">
        <div class="title-bar">
            {if $[create_thread_button]}
                <ul class="controls"><li>$[create_thread_button]</li></ul>
            {/if}
            <h1>$[board.display_name]</h1>
        </div>
        <div class="control-bar ui-helper-clearfix $[scroll_class]">
            $[search]
            <div class="controls">
                $[selection_menu]
                $[action_menu]
            </div>
            $[pagination]
        </div>
        
        <div class="content cap-bottom">
            <table class="list{if $[board.id] == 9} blogcontainer{/if}">
                {if $[board.id] != 9}
                <thead>
                    <tr class="head">
                        <th class="icon"><span class="aria-hidden">Status</span>&nbsp;</th>
                        <th class="checkbox">&nbsp;</th>
                        <th class="main">Subject</th>
                        <th class="created-by">Created By</th>
                        <th class="replies">Replies</th>
                        <th class="views">Views</th>
                        <th class="latest last">Last Post</th>
                    </tr>
                </thead>
                {/if}
                <tbody class="$[list_class]">
                    $[thread_list]
                </tbody>
            </table>
        </div>
    </div>
{/if}

{if $[thread_count] > 0}
    {if $[legend]}
        <div class="container legend">
            <div class="title-bar"><h2>Legend</h2></div>
            <div class="content">
                <table>
                    <tr>
                        {foreach $[legend]}
                            <td>$[legend.icon] <span>$[legend.name]</span></td>
                        {/foreach}
                    </tr>
                </table>
            </div>
        </div>
    {/if}
{/if}

{if $[board.id]}{if $[show_stats]}
    <div class="container stats">
        <div class="title-bar"><h2>Board Information &amp; Statistics</h2></div>
        <div class="content">
            <table>
                <tbody>
                    {if $[board.description]}
                        <tr>
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <td class="icon">$[image.description]</td>
                                        <td class="info last">
                                            <div class="board-name">$[board.name]</div>
                                            <div class="board-description">$[board.description]</div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    {/if}
                    <tr{if !$[show_users_viewing]} class="last"{/if}>
                        <td>
                            <table>
                                <tr>
                                    <td class="icon">$[image.stats]</td>
                                    <td class="info">
                                        <table>
                                            <tbody>
                                                <tr><th colspan="2">Threads and Posts</th></tr>
                                                <tr><td>Total Threads:</td><td>{if $[total_threads] == -1}N/A{else}$[total_threads]{/if}</td></tr>
                                                <tr><td>Total Posts:</td><td>{if $[total_posts] == -1}N/A{else}$[total_posts]{/if}</td></tr>
                                                {if $[board.moderators_link]}<tr><td colspan="2">This board has $[board.moderators_link]</td></tr>{/if}
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td class="icon">$[image.members]</td>
                                    <td class="info last">
                                        <table>
                                            <tbody>
                                                <tr><th colspan="1">On This Board</th></tr>
                                                <tr><td>You <strong>can{if !$[can.create_threads]}not{/if}</strong> create threads.</td></tr>
                                                <tr><td>You <strong>can{if !$[can.reply_to_threads]}not{/if}</strong> reply to threads.</td></tr>
                                                <tr><td>You <strong>can{if !$[can.create_polls]}not{/if}</strong> create polls.</td></tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    {if $[show_users_viewing]}
                        <tr class="last">
                            <td colspan="2">
                                <table>
                                    <tr>
                                        <td class="icon">$[image.online]</td>
                                        <td class="info last">
                                            <table>
                                                <tbody>
                                                    <tr><th>Users Viewing</th></tr>
                                                    <tr><td>$[total_board_staff] Staff, $[total_board_members] Member{if $[total_board_members] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_board_guests] Guest{if $[total_board_guests] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
                                                    <tr><td><tr><td>
                                                        {foreach $[board_user]}
                                                            $[board_user]{if $[board_user.invisible]} <span class="small">(invisible)</span>{/if}$[board_user.comma]
                                                        {/foreach}
                                                        {if $[total_online_not_shown] > 0}
                                                            , and <a href="$[view_active_members_link.href]" class="$[view_active_members_link.class]">$[total_online_not_shown] more...</a>
                                                        {/if}
                                                    </td></tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    {/if}
                </tbody>
            </table>
        </div>
    </div>
{/if}{/if}

Step 3: Finally, on the same page, click on the Thread List tab. Replace the HTML there with this, and Save Changes:

SPOILER: Click to show

{foreach $[thread]}
    {if $[thread.board.id] == 9}
        <table class="blogposts list">
            <tr id="$[thread.content_id]" class="$[thread.content_class]">
                <td class="main clickable" title="$[thread.short_content]" colspan="3">
                    <span class="link target">$[thread.icons] $[thread]</span>
                </td>
            </tr>

            <tr class="bloginfo">
                <td class="checkboxfix">By:</td>
                <td class="blogauthor">
                    $[thread.created_by]
                </td>
                <td class="blogdate">
                    $[thread.created_on]
                </td>
            </tr>
            <tr class="blogspacer">
                <td colspan="3">&nbsp;</td>
            </tr>
            <tr>
                <td class="checkbox clickable">$[thread.checkbox]</td>
                <td class="blogsummary" colspan="2">$[thread.short_content]&hellip;</td>
            </tr>
            <tr>
                <td class="blogpaginatione" colspan="2">
                    {if $[thread.pagination]}<span class="ui-micro-pagination">Pages: $[thread.pagination]</span>{else}<span class="ui-micro-pagination">Pages: <ul class><li><a href="/thread/$[thread.id]/">1</a></li></ul></span>{/if}
                </td>
                <td class="readmore"><a href="$[thread.link.href]" class="button" role="button">Read More</a></td>
            </tr>
        </table>
    {else}

        <tr id="$[thread.content_id]" class="$[thread.content_class]">
            <td class="icon">$[thread.icon]</td>
            <td class="checkbox clickable">$[thread.checkbox]</td>
            <td class="main clickable" title="$[thread.short_content]">
                <table>
                    <tr>
                        <td>$[thread.icons]</td>
                        <td>
                            $[thread.labels]
                            <span class="link target">$[thread]</span>
                            {if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
                        </td>
                    </tr>
                </table>
            </td>
            <td class="created-by clickable">$[thread.created_by]</td>
            <td class="replies clickable">$[thread.replies]</td>
            <td class="views">$[thread.views]</td>
            <td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
        </tr>
    {/if}
{/foreach}

{if !$[thread]}
    <tr class="last">
        <td class="last center" colspan="7">No threads were found.</td>
    </tr>
{/if}

Let me know if you have any questions!

Wow! ... that is Awesome Kami ! I love it! Thank you so much!  I can't wait to test it out. I will let you know here if I have any questions.

[SafeInSanity]

Kami I was just wondering if there was any way that you could display a little "replies counter box" to the left of the "Read More button and name it "Comments"?

Kind of like Proboards does by default if you are viewing the thread list in a board. It displays Replies, and views. I'm not concerned about the views at all but most blogs display the number of comments that it has on main view.

[Kami]

Sure, I'll work on this later today (:

[Kami]

Sept 30, 2019 4:20:25 GMT -8 SafeInSanity said:

Kami I was just wondering if there was any way that you could display a little "replies counter box" to the left of the "Read More button and name it "Comments"?

Kind of like Proboards does by default if you are viewing the thread list in a board. It displays Replies, and views. I'm not concerned about the views at all but most blogs display the number of comments that it has on main view.

Hey there!

Preview has been updated: kamitest5.proboards.com/board/2/test-board

Go to admin > structure > layout templates > board and click on the Thread List tab. Swap out the HTML in there for this and save changes:

SPOILER: Click to show

{foreach $[thread]}
    {if $[thread.board.id] == 9}
        <table class="blogposts list">
            <tr id="$[thread.content_id]" class="$[thread.content_class]">
                <td class="main clickable" title="$[thread.short_content]" colspan="3">
                    <span class="link target">$[thread.icons] $[thread]</span>
                </td>
            </tr>

            <tr class="bloginfo">
                <td class="checkboxfix">By:</td>
                <td class="blogauthor">
                    $[thread.created_by]
                </td>
                <td class="blogdate">
                    $[thread.created_on]
                </td>
            </tr>
            <tr class="blogspacer">
                <td colspan="3">&nbsp;</td>
            </tr>
            <tr>
                <td class="checkbox clickable">$[thread.checkbox]</td>
                <td class="blogsummary" colspan="2">$[thread.short_content]&hellip;</td>
            </tr>
            <tr>
                <td class="blogpaginatione" colspan="2">
                    {if $[thread.pagination]}<span class="ui-micro-pagination">Pages: $[thread.pagination]</span>{else}<span class="ui-micro-pagination">Pages: <ul class><li><a href="/thread/$[thread.id]/">1</a></li></ul></span>{/if}
                </td>
                <td class="readmore">Comments: $[thread.replies]&nbsp;&nbsp;&nbsp;&nbsp;<a href="$[thread.link.href]" class="button" role="button">Read More</a></td>
            </tr>
        </table>
    {else}

        <tr id="$[thread.content_id]" class="$[thread.content_class]">
            <td class="icon">$[thread.icon]</td>
            <td class="checkbox clickable">$[thread.checkbox]</td>
            <td class="main clickable" title="$[thread.short_content]">
                <table>
                    <tr>
                        <td>$[thread.icons]</td>
                        <td>
                            $[thread.labels]
                            <span class="link target">$[thread]</span>
                            {if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
                        </td>
                    </tr>
                </table>
            </td>
            <td class="created-by clickable">$[thread.created_by]</td>
            <td class="replies clickable">$[thread.replies]</td>
            <td class="views">$[thread.views]</td>
            <td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
        </tr>
    {/if}
{/foreach}

{if !$[thread]}
    <tr class="last">
        <td class="last center" colspan="7">No threads were found.</td>
    </tr>
{/if}

[SafeInSanity]

Sept 30, 2019 7:38:59 GMT -8 Kami said:

Sept 30, 2019 4:20:25 GMT -8 SafeInSanity said:

Kami I was just wondering if there was any way that you could display a little "replies counter box" to the left of the "Read More button and name it "Comments"?

Kind of like Proboards does by default if you are viewing the thread list in a board. It displays Replies, and views. I'm not concerned about the views at all but most blogs display the number of comments that it has on main view.

Hey there!

Preview has been updated: kamitest5.proboards.com/board/2/test-board

Go to admin > structure > layout templates > board and click on the Thread List tab. Swap out the HTML in there for this and save changes:

SPOILER: Click to show

{foreach $[thread]}
    {if $[thread.board.id] == 9}
        <table class="blogposts list">
            <tr id="$[thread.content_id]" class="$[thread.content_class]">
                <td class="main clickable" title="$[thread.short_content]" colspan="3">
                    <span class="link target">$[thread.icons] $[thread]</span>
                </td>
            </tr>

            <tr class="bloginfo">
                <td class="checkboxfix">By:</td>
                <td class="blogauthor">
                    $[thread.created_by]
                </td>
                <td class="blogdate">
                    $[thread.created_on]
                </td>
            </tr>
            <tr class="blogspacer">
                <td colspan="3">&nbsp;</td>
            </tr>
            <tr>
                <td class="checkbox clickable">$[thread.checkbox]</td>
                <td class="blogsummary" colspan="2">$[thread.short_content]&hellip;</td>
            </tr>
            <tr>
                <td class="blogpaginatione" colspan="2">
                    {if $[thread.pagination]}<span class="ui-micro-pagination">Pages: $[thread.pagination]</span>{else}<span class="ui-micro-pagination">Pages: <ul class><li><a href="/thread/$[thread.id]/">1</a></li></ul></span>{/if}
                </td>
                <td class="readmore">Comments: $[thread.replies]&nbsp;&nbsp;&nbsp;&nbsp;<a href="$[thread.link.href]" class="button" role="button">Read More</a></td>
            </tr>
        </table>
    {else}

        <tr id="$[thread.content_id]" class="$[thread.content_class]">
            <td class="icon">$[thread.icon]</td>
            <td class="checkbox clickable">$[thread.checkbox]</td>
            <td class="main clickable" title="$[thread.short_content]">
                <table>
                    <tr>
                        <td>$[thread.icons]</td>
                        <td>
                            $[thread.labels]
                            <span class="link target">$[thread]</span>
                            {if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
                        </td>
                    </tr>
                </table>
            </td>
            <td class="created-by clickable">$[thread.created_by]</td>
            <td class="replies clickable">$[thread.replies]</td>
            <td class="views">$[thread.views]</td>
            <td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
        </tr>
    {/if}
{/foreach}

{if !$[thread]}
    <tr class="last">
        <td class="last center" colspan="7">No threads were found.</td>
    </tr>
{/if}

Very nice! .. thank you! 😊

[Kami]

You're welcome! Can I take this as all being well on your forum, then? Or do you still need more time to test it out?

EDIT: one thing you might want changed (possibly) -- the date on the thread listing is currently the date of the original post creation. Do you want that changed to be the last updated (most recent post) date?