1. Chào mừng Khách tham gia cộng đồng Android Việt Nam

topbigslide

tạo ảnh bìa cover cho trang cá nhân Xenforo

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 F

  1. King
    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
    [​IMG]

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



    [​IMG]
    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:
    [​IMG]
    [​IMG]
    Bước 2: thêm đoạn css sau vào template EXTRA.css

    .anhbia {
    border1px solid #c3ccdf; width:99.9%;
    }
    .
    profilePage
    {
    positionrelative;

    }

    .
    avatarbox {
    background-color#FFF;
    displayinline-block;
    border1px solid #B2B2B2;
    padding:4px;
    -
    webkit-border-radius2px;
    -
    moz-border-radius2px;
    border-radius2px 2px 2px 2px; -webkit-border-radius2px 2px 2px 2px; -moz-border-radius2px 2px 2px 2px; -khtml-border-radius2px 2px 2px 2px;
    height:180px;
    top:-120px;
    left:25px;
    position:absolute;
    -
    moz-box-shadow0 2px 5px #b3b3b3;-webkit-box-shadow: 0 2px 5px #b3b3b3;
    }
    .
    nicknamebox {
    displayblock;
    margin-left220px;
    margin-top0px;

    }
    .
    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:
    <div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    
    Và thay đoạn đó bằng cái này:
    <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="http://cdn.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="http://cdn.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}">
    <
    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>

    <
    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="$usertitle="" tag="a" />
    </
    p>

    <
    xen:if is="{$user.status}"><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}">
    <
    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

Bạn đang xem Zing.vn Mobile trên màn hình máy tính hoặc thiết bị trình chiếu mà giao diện này không hỗ trợ.

Chuyển về giao diện đầy đủ