Hướng dẫn tạo trang cá nhân Xenforo theo phong cách Timeline

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,992
Được Like
11,340
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.

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

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

cover.png

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:

1.png


2.png

Bước 2: thêm đoạn css sau vào template EXTRA.css
Mã:
.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:
Mã:
<div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

Và thay đoạn đó bằng cái này:
Mã:
<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://cnm24h.tk/images/cover.png" 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://cnm24h.tk/images/cover.png" 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>

Xong. Chúc các bạn thành công.


Nguồn: vietdesigner.net​
 

CNTT01

Snow Flower ✔
Tham gia
06/07/2015
Bài viết
803
Được Like
686
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 : Các bạn tham khảo bên http://forum.vietdesigner.net/ 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:

19268984188_4ec5820b75_o.png

Xong cái bên trên thì làm cái bên dưới này !
19450231592_620f509eb1_o.png

Bước 2: thêm đoạn css sau vào template EXTRA.css


Mã:
.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:

Mã:
<div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
Và thay đoạn đó bằng cái này:
Mã:
<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}"> <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
 
Sửa lần cuối:
  • Like
Reactions: THB

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
nó hiện luôn 2 khung avatar :(
 

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Được Like
278
vậy là bạn bị thừa code, chứ demo là mình làm ok mà
sửa một chút thì đc rồi mà xem trên mobile nó bị lệch hết :))
để nghiên cứu xem làm sao thêm cái cover trên cùng thôi :=D
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom