Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Người Chia Sẻ, 13/5/15.

Lượt xem: 4,769

  1. Người Chia Sẻ Share to be shared!

    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)

    hpRk3vx.jpg

    - 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 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

    ...
  2. lazykitty

    lazykitty Mới đăng kí

    Demo của bạn là site rao vặt, xenportal 2 pro dùng dc ko bạn

Ủng hộ diễn đàn