Tạo Trang Cá Nhân Như Facebook Cho Xenforo

Hùng Chiều / lúc 6:54:00 AM ngày Wednesday, July 12, 2017 / 0 bình luận

Theo dõi Ngô Hùng Chiều để nhận nhiều thủ thuật hay, hữu ích nhé!

Xenforo là mã nguồn sử dụng cho forum rất tốt và được sử dụng hầu hết các trang diễn đàn Việt Nam như tinhte, designvn,… Nhưng giao diện thì chưa được thuần việt cho lắm, nên bài viết này tôi sẽ hướng dẫn các bạn làm theo 2 cách là dùng code và dùng addon bạn nhé để Tạo trang cá nhân như facebook cho xenforo như ảnh bên dưới.

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

A. Đây là cách dùng code:

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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

1

<div class="profilePage" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">

Và thay đoạn đó bằng cái này:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<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="/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="/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>