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 trang cá nhân Xenforo theo phong cách Timeline

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

Lượt xem: 24,255

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

    Như các bạn cũng biết, mã nguồn diễn đàn Xenforo có thiết kế và cấu trúc nhiều điểm tương đồng với Facebook, từ tính năng tag tên, hiện notification thông báo khi có người nào đó tương tác với mình. Chính vì thế, Xenforo dường như trở thành 1 mạng xã hội mini để các thành viên dễ dàng tương tác, trao đổi và học hỏi nhau dễ dàng hơn, đặc biệt là đối với diễn đàn Việt Designer chúng ta.

    Xenforo, trang cá nhân của mỗi người cũng tựa như trang cá nhân trên Facebook, nhưng nó có thiết kế khá đơn giản. Chính vì thế, hôm nay mình muốn chia sẻ với các bạn 1 cách trang trí giao diện timeline giống như Facebook, khá đơn giản và dễ tùy chỉnh :D

    Đầu tiên cho các bạn xem qua trước demo mình làm:

    Demo online: http://forum.vietdesigner.net/members/pham-huu-du.1/

    cfsENZG.png
    Đây là giao diện mặc định của Xenforo

    TNE4rCY.png
    Còn đây là giao diện Timeline sau khi tùy chỉnh

    Sau đây mình xin hướng dẫn các bạn làm luôn!

    Bước 1: add 1 Custom Field có nội dung như sau:

    1uL70zg.png
    BHmg6QN.png


    Bước 2: thêm đoạn css sau vào template EXTRA.css
    Code:
    .anhbia {
        border: 1px solid #c3ccdf; width:99.9%;
    }
    .profilePage
    {
        position: relative;
    
    }
    
    .avatarbox {
        background-color: #FFF;
        display: inline-block;
        border: 1px solid #B2B2B2;
        padding:4px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px 2px 2px 2px; -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; -khtml-border-radius: 2px 2px 2px 2px;
        height:180px;
        top:-120px;
        left:25px;
        position:absolute;
    -moz-box-shadow: 0 2px 5px #b3b3b3;-webkit-box-shadow: 0 2px 5px #b3b3b3;
    }
    .nicknamebox {
        display: block;
        margin-left: 220px;
        margin-top: 0px;
    
    }
    .headerbox{
        margin-top:-10px;width:943px;height:100px;border:1px solid #c3ccdf; border-bottom:2px solid #c3ccdf; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; background-color:#FFF; padding:10px;
    }

    Bước 3: vào template member_view và tìm đoạn sau:
    Code:
    <div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    Và thay đoạn đó bằng cái này:
    Code:
    <div class="anhbia">
    <div class="signaturecontainer" style="overflow: hidden;max-height:340px;">
    
    <xen:if is="{$visitor.user_id} == {$user.user_id}">
    
    <xen:if is="{$user.customFields.
    	
    timeline}">
    <a href="{xen:link account/personal-details}#ctrl_custom_field_timeline" target="_blank" class="Tooltip">
    <img src="{$user.customFields.
    	
    timeline}" width="100%">
    </a>
    <xen:else />
    <a href="{xen:link account/personal-details}#ctrl_custom_field_timeline" target="_blank" class="Tooltip">
    <img src="https://forum.vietdesigner.net/data/images/Cover-Photo.jpg" width="100%">
    </a>
    </xen:if>
    
    <xen:else />
    
    <xen:if is="{$user.customFields.
    	
    timeline}">
    <img src="{$user.customFields.
    	
    timeline}" width="100%">
    <xen:else />
    <img src="https://forum.vietdesigner.net/data/images/Cover-Photo.jpg" width="100%">
    </xen:if>
    
    </xen:if>
    
    </div>
    </div>
    <div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    
    <div class="avatarbox" title="Nhấn vào để sửa ảnh đại diện">
    
                    <xen:if is="{$visitor.user_id} == {$user.user_id}">
                    <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                        <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="height:180px; width:180px;" itemprop="photo" />
                    </a>
                <xen:else />
                    <span class="Av{$user.user_id}l">
                        <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="height:180px; width:180px;" itemprop="photo" />
                    </span>
                </xen:if>
    
            </div>
    
    <div class="headerbox">
    <div class="nicknamebox">
    <div style="float:left">
    
    <div style="font-weight:bold; font-size:20px; text-shadow: 2px 2px 1pt rgb(218, 224, 236);"><font color="red" itemprop="name">{xen:helper richUserName, $user}</font></div>
    
    <p class="userBlurb">
                        {xen:helper userBlurb, $user}
                        <xen:if is="{$canCleanSpam}"><a href="{xen:link spam-cleaner, $user}" class="deleteSpam OverlayTrigger">{xen:phrase spam_cleaner}</a></xen:if>
    <xen:follow user="$user" title="" tag="a" />
                    </p>
    
                    <xen:if is="{$user.status}"><p class="userStatus" id="UserStatus">Status: {xen:helper bodyText, $user.status} - <xen:datetime time="$user.status_date" /></p></xen:if>
    
                    <xen:if is="{$canViewOnlineStatus}">
                        <dl class="pairsInline lastActivity">
                            <dt>{xen:phrase x_was_last_seen, 'username={$user.username}'}:</dt>
                            <dd>
                                <xen:if is="{$user.activity}">
                                    <xen:if is="{$user.activity.description}">
                                        {$user.activity.description}<xen:if is="{$user.activity.itemTitle}"> <em><a href="{$user.activity.itemUrl}">{$user.activity.itemTitle}</a></em></xen:if>,
                                    <xen:else />
                                        {xen:phrase viewing_unknown_page},
                                    </xen:if>
                                    <xen:datetime time="{$user.effective_last_activity}" class="muted" />
                                <xen:else />
                                    <xen:datetime time="{$user.effective_last_activity}" />
                                </xen:if>
                            </dd>
                        </dl>
                    </xen:if>
    
    </div></div>
    
    <div style="float:right;display:inline-block;height:30px;margin-top:70px;">
                            <xen:if is="{xen:helper isIgnored, $user.user_id}">
                                <a href="{xen:link members/unignore, $user}" class="button primary">{xen:phrase unignore}</a>
                            <xen:elseif is="{$canIgnore}" />
                                <a href="{xen:link members/ignore, $user}" class="button primary">{xen:phrase ignore}</a>
                            </xen:if>
                            <xen:if is="{$canWarn}">
                                <a href="{xen:link members/warn, $user}" class="button primary">{xen:phrase warn}</a>
                            </xen:if>
    
    <xen:if is="{$visitor.user_id} AND {$user.user_id} != {$visitor.user_id}">
                            <a class="button primary">
                                <xen:if is="{$user.isFollowingVisitor}">
                                    {xen:phrase user_is_following_you, 'user={$user.username}'}
                                <xen:else />
                                    {xen:phrase user_is_not_following_you, 'user={$user.username}'}
                                </xen:if>
                            </a>
                        </xen:if>
    </div>
    </div>
    Thế là xong rồi đấy! :D

    Đối với ảnh demo mình đã thay đổi đi khá nhiều điều, cho nên cái này tùy thuộc vào sở thích của bạn mà thay đổi thêm bớt tùy ý nhé ;)

    Bài viết có tham khảo từ churongcon - VXF

    ...
    khoa.it, Hồng Sơn, dinhbacvip2 người khác thích bài viết này.
  2. An Thị Gì Gì Đấy

    An Thị Gì Gì Đấy Thành viên cấp 2

    trong trường hợp trang cá nhân của em từ lúc đăng ký đã là kiểu timeline và muốn chuyển về mặc định thì làm thế nào hả bác?
  3. Phạm Hữu Dư

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

    An Thị Gì Gì Đấy bài hướng dẫn này dành cho các webmaster tùy chỉnh forum của riêng mình, chứ đâu phải dành cho member của forum này đâu bạn :v :v

    Riêng về diễn đàn chúng ta thì mình đã để mặc định giao diện thế rồi, ai cũng như ai thôi!
    An Thị Gì Gì Đấy thích bài viết này
  4. JusTa Khôi

    JusTa Khôi Thành viên cấp 3

    Demo giao diện mới sắp được ra mắt à a :))
  5. Phạm Hữu Dư

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

    JusTa Khôi chuẩn cmn men rồi :3 :3 Vẫn đang cày cuốc cho em nó đây!
  6. Sang Phan

    Sang Phan Thành viên cấp 1

    Sao Dư anh ko dùng source IPB luôn, nó đẹp flat hơn :)) sercurity tốt hơn :))
  7. Phạm Hữu Dư

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

    Forum đang dùng Xenforo lại kêu chuyển sang IPB :| Hết lời khuyên rồi àh?
  8. Sang Phan

    Sang Phan Thành viên cấp 1

    em xài IPB rồi thấy tốt mà, có nhiều mod hay nữa :))
  9. banbaonylong

    banbaonylong Ko phải assmin

    security tốt do người quản lý và bảo trì nữa, chứ có dẫn chứng nào cái IPB hơn xenforo ko? :-?

    (chưa nghe wa IPB)
  10. Phạm Hữu Dư

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

    Vậy thử xài Xenforo đi rồi hãy so sánh nhé ;)
  11. Thần Kinh

    Thần Kinh Mới đăng kí

    Tại IPB nó ít chữ hơn Xenforo nên em nghĩ nó nhẹ hơn ạ!! ;;)
  12. huyentrang_lovelynice

    huyentrang_lovelynice Mới đăng kí

    Zenforo với VBB cái nào ngon hơn vậy ace
  13. Phạm Hữu Dư

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

    huyentrang_lovelynice ko thể khẳng định cái nào ngon hơn! Nhưng xu thế hiện tại ngta dùng Xenforo nhiều hơn, nhiều diễn đàn lớn đang có ý định convert sang Xenforo hết rồi :)
  14. Hồng Sơn

    Hồng Sơn Helper

    Cố gắng lên a ơi, e hóng cái giao diện flat của diễn đàn mình từng ngày đây :))
    Tý Ngáo thích bài viết này
  15. nguyenduc308

    nguyenduc308 Mới đăng kí

    Làm xao để xóa avatar cũ hả a forum.congviec24h.com/index.php?members/duclux.1/
  16. Jazz Logic

    Jazz Logic Thành viên cấp 1

    Anh Dư cho em hỏi sao nó bị như vậy rồi :(

    D8VjS9R.jpg
  17. Phạm Hữu Dư

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

    Jazz Logic chỉnh sửa lại css và bỏ đi những phần dư thừa ra đi :)
  18. khoa.it

    khoa.it Thành viên cấp 1

    layout kiểu fb đẹp quá :)
  19. Nguyễn Hoàng Nam

    Nguyễn Hoàng Nam Thành viên cấp 1

  20. htdung0212

    htdung0212 Thành viên cấp 1

    cho em hỏi, em là admin thì em có thể áp dụng cái này cho tất cả thành viên không ạ.

Ủng hộ diễn đàn