Hey there, I'm currently working on Devaon's templates. Don't mind the incoherent stuff. Thanks !
Welcome to Devaon

Back to thread listBlocks Threads List #1
Jeg
Thu Apr 14, 2022 8:42 pm

Template customization to show the threads in the forums as blocks, with a quick overview of each thread's first message for non-sticky ones.

Blocks Threads List #1 AQXNK2L

Replace your topics_list_box template with the following code:
Code:
<div class="tlist_forumtitle">{FORUM_NAME}</div>

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<!-- BEGIN pagination -->
<div class="tlist_pagination">{PAGINATION}</div>
<!-- END pagination -->
<!-- END header_table -->

<!-- BEGIN topic -->
<div class="tlist_topic" data-type="{topics_list_box.row.TOPIC_TYPE}" data-state="{topics_list_box.row.L_TOPIC_FOLDER_ALT}">

 <!-- BEGIN icon -->
        <div class="tlist_topic_icon">{topics_list_box.row.ICON}</div>
 <!-- END icon -->
   <div class="tlist_topic_title">
           <div class="tlist_topic_type">{topics_list_box.row.TOPIC_TYPE}</div>
         <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
           {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
 </div>
 <div class="tlist_topic_author">Posted by {topics_list_box.row.TOPIC_AUTHOR}</div>
 <div class="tlist_topic_stats"><img src="https://i.imgur.com/TLcU4fW.png" /> {topics_list_box.row.REPLIES} <img src="https://i.imgur.com/NBKyD59.png" /> {topics_list_box.row.VIEWS}</div>
  
 <div class="tlist_topic_nav">
           {topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree -->
 </div>

 <div class="tlist_topic_preview"></div>
  
   <div class="tlist_topic_lp">
         <!-- BEGIN avatar -->
             {topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
           <!-- END avatar -->
                <b>Last post by</b> {topics_list_box.row.LAST_POST_AUTHOR}

             <span class="postdetails">{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}</span>
        </div>

</div>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td> <span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom -->
<!-- END row -->
<!-- END topics_list_box -->

<script type="text/javascript">
$('.tlist_topic').each(function() {
    var $link = $(this).find('a.topictitle').attr('href');

    $(this).find('.tlist_topic_preview').load($link + ' tr.post:first .postbody');
});

Add the following CSS to your stylesheet:
Code:
.tlist_forumtitle {
    text-align: center;
    margin: 2% 2% 1% 2%;
    margin-bottom: 1%;
    color: #15161d;
    font-family: 'Roboto', sans-serif;
    font-size: 14pt;
    text-transform: uppercase;
    padding: 1%;
    border-top: 1px solid #30303010;
    border-bottom: 1px solid #30303010;
}

.tlist_topic {
    background-color: #f7f7f7;
    box-sizing: border-box;
    padding: 2%;
    margin: 2%;
    box-shadow: 0 0 7px 0 #30303020;
}

.tlist_topic[data-state="New posts"] {
    background-color: #c9dcf7;
}

.tlist_topic[data-state="New posts"] .tlist_topic_preview::after {
    background-image: linear-gradient(0deg, #c9dcf7, #c9dcf7, transparent);
}

.tlist_topic_title a {
    font-size: 12pt;
    font-family: 'Roboto', sans-serif;
    color: #303030 !important;
}

.tlist_topic_author {
    font-size: 9pt;
    display: inline-block;
}

.tlist_topic_author a {
    text-decoration: none;
}

.tlist_topic_stats img {
    width: 7pt;
    height: 7pt;
    vertical-align: top;
}

.tlist_topic_stats {
    margin-left: 1%;
    font-size: 7pt;
    display: inline-block;
    opacity: .75;
    line-height: 10px;
}

.tlist_topic_stats img:nth-child(2) {
    margin-left: 2px;
}

.tlist_topic_preview {
    overflow: hidden;
    width: 100%;
    height: 90px;
    position: relative;
    margin-top: 2%;
    margin-bottom: 1%;
}

.tlist_topic_preview::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, #f7f7f7,#f7f7f795,transparent);
}

.tlist_topic_lp {
    padding-top: 2%;
    border-top: 1px solid #30303015;
    font-size: 8pt;
}

.tlist_topic_lp > img {
    width: 20px;
    height: auto;
    border-radius: 50%;
    margin-right: 1%;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.tlist_topic_lp b {
    font-weight: 500;
}

.tlist_topic_lp a {
    font-size: 8pt;
}

.tlist_topic_lp .postdetails {
    margin-left: .5%;
    color: #818181;
}

.tlist_topic_lp .postdetails::before {
    content: "- ";
}

.tlist_topic_type strong {
    font-size: 8pt;
    font-weight: 500;
    text-transform: uppercase;
    color: #474747;
}

.tlist_topic[data-type="<strong>Global announcement:</strong> "] .tlist_topic_preview,
.tlist_topic[data-type="<strong>Announcement:</strong> "] .tlist_topic_preview,
.tlist_topic[data-type="<strong>Sticky:</strong> "] .tlist_topic_preview {
    display: none !important;
}

.tlist_topic[data-type="<strong>Global announcement:</strong> "] .tlist_topic_lp,
.tlist_topic[data-type="<strong>Announcement:</strong> "] .tlist_topic_lp,
.tlist_topic[data-type="<strong>Sticky:</strong> "] .tlist_topic_lp {
    margin-top: 2%;
}