Hướng Dẫn làm User Info đẹp

shynn

Thượng Đế
Tham gia
18/03/2015
Bài viết
207
Được Like
176
Ban đầu
upload_2015-6-30_17-10-47.png

Thành quả :D
upload_2015-7-1_6-1-25-png.4080.html


Đầu tiên cần cài đặt Font Awesome trước.

Sau đó chúng ta vào Style Properties chỉnh theo như hình dưới
upload_2015-6-30_17-12-39.png



upload_2015-6-30_17-13-48.png

Xong rồi Update Style Properties

Tiếp theo mở template message_user_info

Tìm
Mã:
        <div class="avatarHolder">
            <span class="helper"></span>
Thay bằng
Mã:
     <div class="avatarHolder" align="center">
<div class="extraUserInfo roundStats">
<dl class="pairsInline roundMessage">
<dt><span class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}"></span></dt>
<dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
</dl>

<dl class="pairsInline roundLike">
<dt><span class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}"></span></dt>
<dd>{xen:number $user.like_count}</dd>
</dl>

<dl class="pairsInline roundTrophy">
<dt><span class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}"></span></dt>
<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
</dl>
</div>
        <span class="helper"></span>
-> Lưu

Vào template message_user_info.css và thêm
Mã:
text-align: center;
vào các thẻ
Mã:
.messageUserBlock a.username
Mã:
.messageUserBlock .userTitle

Mờ template Extra.css thêm vào để làm thành hình tròn

Mã:
.messageUserInfo .messageUserBlock .avatar > img { border-radius: 50%; }

.roundStats .fa {
    font-size: 30px;
    line-height: 37px;
    margin-left: -1px;
    margin-top: -1px;
    opacity: 0.25;
}
.roundStats .pairsInline {
    border: 1px solid #d5d5d5;
    border-radius: 100%;
    height: 36px;
    width: 36px;
}
.messageUserBlock .roundStats .roundTrophy { margin-left: 20px; overflow: hidden; }
.messageUserBlock .roundStats .roundLike { margin-left: 5px; overflow: hidden; }
.messageUserBlock .roundStats .roundMessage { margin-left: 20px; margin-top: -10px; overflow: hidden; }

.roundStats .pairsInline > dd {
    color: #000000;
    display: block;
    margin-top: -24px;
    text-align: center;
}
.messageUserInfo .extraUserInfo.roundStats {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    margin-left: -24px;
    margin-top: -2px;
    position: absolute;
}
.messageUserBlock .extraUserInfo { font-size: 11px; padding: 4px 6px; }

Giờ thêm tiếp đoạn code này vào Extra.css để thay cái vòng tròn online/offline
Mã:
/* PULSING INDICATOR */
.messageUserBlock div.avatarHolder .onlineMarker {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: medium none !important;
    border-radius: 50% !important;
    display: inline-block;
    height: 16px;
    margin: 81px 0 0 107px;
    width: 16px;
}

.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #7fb900;
    border-color: #7fb900;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -9px 0 0 -9px;
    border: 1px solid #7fb900;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: online 2.5s ease-in-out infinite;
    animation: online 2.5s ease-in-out infinite
}

@-webkit-keyframes online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}

@keyframes online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
}

Update thêm bỏ bớt mấy phần thừa lặp lại ở phía dưới
upload_2015-6-30_19-17-46-png.4072.html

Bỏ tích những cái nào không cần

Xong :D

Nguồn: https://www.xfuniverse.com
 

Đính kèm

  • upload_2015-6-30_17-27-22.png
    upload_2015-6-30_17-27-22.png
    26.8 KB · Lượt xem: 248
  • upload_2015-6-30_17-28-1.png
    upload_2015-6-30_17-28-1.png
    26.9 KB · Lượt xem: 246
Sửa lần cuối bởi điều hành viên:

shynn

Thượng Đế
Tham gia
18/03/2015
Bài viết
207
Được Like
176
Áp dụng luôn đi cho nóng ạ :p
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
13,370
Được Like
9,295
cám ơn bạn :)
 

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
870
Được Like
1,439
Bà con làm theo thử coi ổn ko nha, ngon báo mình update vào vnxf luôn :v
 
  • Like
Reactions: THB

Chấm

Thượng Đế
Tham gia
03/03/2015
Bài viết
195
Được Like
137
Thấy nó kì kì @@
Sao nó dư ra 1 khúc nhỉ
 

Đính kèm

  • Untitled.png
    Untitled.png
    62.4 KB · Lượt xem: 250

shynn

Thượng Đế
Tham gia
18/03/2015
Bài viết
207
Được Like
176
Có dòng Note của bác thớt bên XFUniverse

NOTE: Remember, this was done on the default XenForo style. For other styles, I am certain things will need to change, margins, padding, etc.

Style mặc định là ngon rồi. Còn các style khác chỉnh sửa nữa thì mới đẹp đc
 

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,348
Được Like
3,924
Đẹp. Thanks bác.
 

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,348
Được Like
3,924
đã test.
nó làm khung info rộng hơn. hơi khó nhìn.
info user.jpg
 

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,348
Được Like
3,924
mình tìm hiểu và chỉnh lại theo thông số này. các bạn cũng có thể chỉnh theo ý thích của mình.
nhưng mình thấy các số đó là ok. còn tùy theo styles nha.

1. làm các bước như trên. nhưng thay thông số như hình nha.
infouser00.jpg

infouser01.jpg




2. cũng làm theo các bước như trên. nhưng thay.
Mã:
<div class="avatarHolder" align="center">
bằng
Mã:
<div class="avatarHolder" align="right">

là ok.

demo;
infouser02.jpg
 

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,987
Được Like
1,596
cũng đẹp, cơ mà không hợp với forum mình lắm :D
Hình như bên mình có ai hỏi rồi thì phải :D
 

Chấm

Thượng Đế
Tham gia
03/03/2015
Bài viết
195
Được Like
137
mình tìm hiểu và chỉnh lại theo thông số này. các bạn cũng có thể chỉnh theo ý thích của mình.
nhưng mình thấy các số đó là ok. còn tùy theo styles nha.

1. làm các bước như trên. nhưng thay thông số như hình nha.
View attachment 4110
View attachment 4111



2. cũng làm theo các bước như trên. nhưng thay.
Mã:
<div class="avatarHolder" align="center">
bằng
Mã:
<div class="avatarHolder" align="right">

là ok.

demo;
View attachment 4112
Nó kì kì anh ơi :(
 

Đính kèm

  • Untitled.png
    Untitled.png
    27.1 KB · Lượt xem: 206
  • Like
Reactions: THB

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

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom