Hướng dẫn tạo danh sách chủ đề đẹp trên Xenportal cho forum công nghệ

Những trang web về công nghệ nếu chỉ có portal giới thiệu về bài viết kèm theo hình ảnh bắt mắt, nên mình mới tạo cái này làm trên template cho các bạn có thể dễ dàng làm theo để có 1 website xenforo đẹp hơn.

Yêu cầu phải cài addon Thumbnails by Waindigo (click vào đây để tải)



- Những forum chỉ định sẽ hiện các bài viết theo kiểu ảnh bìa và tiêu đề bài viết, các bạn xem ảnh nha.
- Cách là như sau các bnaj vào template tạo 2 templae có tên là thread_list_item_review vàthread_list_item_review .css sau đó lưu lại.
+ Vào template thread_list_item Thêm vào sau <xen:require css="thread_list_item_review.css" />

Code:

<xen:if is="{$thread.node_id}==2"><xen:include template="thread_list_item_review" />
<xen:else />

Và ở cuối cùng thêm

Code:

</xen:if>

+ Sau khi lưu lại bạn chuyển qua tab thread_list_item_review và dán đoạn code sau

Code:

<xen:require css="thread_list_item_review.css" />
<div class="thread_list_review">
<li id="thread-{$thread.thread_id}" class="discussionListItem {$thread.discussion_state}{xen:if '!{$thread.discussion_open}', ' locked'}{xen:if {$thread.sticky}, ' sticky'}{xen:if {$thread.isNew}, ' unread'}{xen:if {$thread.prefix_id}, ' prefix{$thread.prefix_id}'}{xen:if {$thread.isIgnored}, ' ignored'} {xen:if $thread.thread_is_watched, threadWatched} {xen:if $thread.forum_is_watched, forumWatched}" data-author="{$thread.username}">
<a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
           title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
           class="{xen:if $thread.hasPreview, PreviewTooltip}"
           data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">
   <div class="review_thumb"><img src="{$thread.thumbnail.thumbnail_url}" /></div>
   <xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:phrase select_thread}: {$thread.title}" /></xen:if>
   <div class="caption">
   <div class="title">
         <xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
         <xen:if is="{$thread.prefix_id}">
           <xen:if is="{$linkPrefix}">
             <a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
               title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
           <xen:else />
             {xen:helper threadPrefix, $thread}
           </xen:if>
         </xen:if>
         {xen:helper wrap, $thread.title, 50}</a>
   </div>
   <span class="sourcename">
    <xen:avatar user="$thread" size="s" img="true" />
    <xen:username user="$thread" title="{xen:phrase thread_starter}" />
   </span>
   </div>
</a>
</li>
</div>

+ Sau khi lưu lại các bạn chuyển qua tab thread_list_item_review.css và dán đoạn code sau

Code:

.thread_list_review{
    position: relative;
    width: 33.3333%;
    float: left;
}
.thread_list_review:last-child{clear: left;float: none}
.thread_list_review .review_thumb{
    height: 250px;
    margin: 5px;
}
.thread_list_review .review_thumb:hover{
   opacity: 0.8;
   transition: all 1s
}
.thread_list_review .review_thumb img{
    width: 100%;
    height: 250px;
}
.thread_list_review .InlineModCheck{
    position: absolute;
    top: 5px;
    left: 5px;
}
.thread_list_review .caption{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0px, transparent 100%) repeat scroll 0% 0% transparent;
    position: absolute;
    bottom: 5px;
    margin: 0px 5px;
    padding: 15px 15px 0px;
}
.thread_list_review .title a{
    font-weight: 200;
    color: #FFF;
    overflow: hidden;
    font-size: 18px;
    line-height: 20px;
    padding-bottom: 5px;
}
.thread_list_review .sourcename {
    color: #A0A0A0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    display: block;
    min-height: 35px;
    padding-top: 10px;
    font-size: 16px;
    line-height: 20px;
}
.thread_list_review .sourcename  .avatar img{
    width: 16px;
    height: 16px;
}
.thread_list_review .sourcename a.username{
    color: #A0A0A0;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
   .Responsive .thread_list_review {
      width: 50%;
      }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
   .Responsive .thread_list_review {
   float: unset;
   width: 100%;
   }
}
</xen:if>

Trong đó: {$thread.node_id}==2 số 2 ở đây là id của forum (cuối link có số này nha), các muốn thêm nhiều thì dùng " || "
- Đây là demo forum sử dụng thread list review

Code:

http://bcat95-bcat9509.rhcloud.com/forums/techz.2/

- Đây là demo forum không sử dụng

Code:

http://bcat95-bcat9509.rhcloud.com/forums/tinhte.3/

Bài viết được chia sẻ bởi Bcat9505 - VXF.vn​