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 hiện thị bài đăng đầu tiên trên Xenforo nằm ngang

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Phạm Hữu Dư, 8/11/13.

Lượt xem: 11,378

  1. Phạm Hữu Dư phamhuudu.com

    Cách đây vài ngày có bạn hỏi mình cách hiển thị bài đăng đầu tiên trên Xenforo mà avatar của người đăng chủ đề thu gọn lại và nằm ngang trên cùng, để giúp cho không gian của bài đăng được rộng ra giống như diễn đàn Việt Designer đang dùng.

    Mặc định thì nó như thế này đây:

    [​IMG]

    Sau khi chỉnh ngang giống Việt Designer thì nó trông như thế này:

    [​IMG]

    Tạo được thêm không gian cho bài đăng được rộng hơn đúng không nào :D Và lại còn bổ sung thêm nút Like và +1 nữa!

    Lưu ý là cái này chỉ áp dụng cho #1, còn các bình luận tiếp theo thì vẫn là mặc định như thế này nhé:

    [​IMG]

    OKAY! Ta bắt đầu tiến hành bài hướng dẫn luôn nhé :)

    1. Đầu tiên, các bạn add đoạn code sau đây vào template EXTRA.css nhé
    Code:
    /*Display Postbit in first post*/
    .firstPost .messageUserInfo {
        float: none;
    }
    .firstPost .messageUserInfo .messageUserBlock .arrow {
        display: none;
    }
    .firstPost .messageInfo {
        margin-left: 5px !important;
        margin-top: 10px;
    }
    .newIndicator {
        display: none !important;
    }
    .firstPost .messageUserInfo {
        width: 100% !important;
    }
    .firstPost .messageUserInfo .messageUserBlock .arrow {
        display: none;
    }
    .firstPost .messageUserBlock {
        -moz-border-bottom-colors: none !important;
        -moz-border-image: none !important;
        -moz-border-left-colors: none !important;
        -moz-border-right-colors: none !important;
        -moz-border-top-colors: none !important;
        background: none repeat scroll 0 0 transparent !important;
        border-color: -moz-use-text-color -moz-use-text-color #CDE5F0 !important;
        border-style: none none dashed !important;
        border-width: 0 0 1px !important;
        height: 64px;
    }
    .firstPost .avatar .img {
        margin-left: 0 !important;
    }
    .firstPost .avatarHolder {
        padding: 0 !important;
        position: absolute !important;
    }
    .firstPost .userText {
        margin-left: 58px;
        position: absolute !important;
        top: 18px;
    }
    .firstPost .tt_share_page {
        margin-left: 220px;
        position: absolute;
        top: 34px;
        width: 420px;
    }
    .firstPost .shareControl {
        float: right;
    }
    .firstPost .addthis {
        padding-left: 20px;
    }
    .titleBar h1 {
        font-size: 20pt !important;
    }
    2. Sau đó bạn tạo 1 template mới và đặt tên nó là message_user_info_firstpost

    Sau khi tạo xong template mới, các bạn add đoạn code này vào template này nhé!
    Code:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    <div class="messageUserBlock">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                    <div class="avatarHolder">
                <span class="helper"></span>
                            <xen:avatar user="$user" size="s"/>
                <!-- slot: message_user_info_avatar -->
            </div>
        </xen:hook>
    
    <xen:if is="!{$isQuickReply}">
        <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <h3 class="userText">
                <xen:username user="$user" itemprop="name" rich="true" />
                <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if>
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
      
    </xen:if>
    <span class="tt_share_page">
          <div class="facebookLike shareControl">
                <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
          </div>
          <div class="plusone shareControl">
            <div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}">
          </div>
    </span>
        <span class="arrow"><span></span></span>
    </div>
    </div>
    3. Cuối cùng là các bạn vào template message và tìm đúng đoạn code sau:
    Code:
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
        <xen:include template="message_user_info">
            <xen:map from="$message" to="$user" />
        </xen:include>
    và thay nó bằng đoạn code này:
    Code:
    <xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
    <li id="{$messageId}" class="message firstPost {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
        <xen:include template="message_user_info_firstpost">
            <xen:map from="$message" to="$user" />
        </xen:include>
    <xen:else />
    <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
        <xen:include template="message_user_info">
            <xen:map from="$message" to="$user" />
        </xen:include>
    </xen:if>
    Thế là xong rồi! Rất đơn giản đúng không nào :D

    LongKenj, mgrĐỗ Huy Toàn thích bài viết này.
  2. Đỗ Huy Toàn

    Đỗ Huy Toàn Thành viên cấp 1

    toẹt vời lão mặt zời :))
  3. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Time tới sẽ có nhiều bài viết về Xenforo cho ai đang tham khảo về mã nguồn diễn đàn này nhé! Vì mình đang trong quá trình thay đổi và nâng cấp giao diện cho diễn đàn của chúng ta, nên sẵn chia sẻ nhiều bài viết hay về Xenforo :D
    hungnv85 thích bài viết này
  4. hungnv85

    hungnv85 Banned

    Thanks bác Dư em cũng đã làm được rồi :D
  5. Kevin Kien

    Kevin Kien Mới đăng kí

    Mình làm như bạn nhưng bị lỗi như thế này. Bạn giúp mình với


    Mình sử dụng style XenFitter
    Chỉnh sửa lần cuối: 29/1/14
  6. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Kevin Kien bạn thử áp dụng trc cho style default xem đc ko?
  7. Kevin Kien

    Kevin Kien Mới đăng kí

  8. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Kevin Kien thế là do Style đó có vấn đề, bạn phải tìm hiểu để khắc fục vì sao bị lỗi đó thôi :)
  9. thanhnguyenplus

    thanhnguyenplus Mới đăng kí

    đang quan tâm nhưng chỉnh vẫn bị lỗi mong bác xem lại
  10. xenforo

    xenforo Mới đăng kí

    em làm như ok rồi nhưng topic của em hơi tróng em muốn như VDS bác dư có thể chỉ giáo em được không em cảm ơn
    demo của em làm theo nhưng hơi tróng
    Fo8ObNx.png
    em muốn như của bác dư demo
    ipUuejx.png
  11. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    xenforo hãy sử dụng Widget Framework nhé!
  12. thaidt

    thaidt Mới đăng kí

    vào đây có khi thấy cái mình cần tìm nhanh hơn là vào các forum xenforo :D.
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn