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

shynn

MasterCorporal
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: 250
  • upload_2015-6-30_17-28-1.png
    upload_2015-6-30_17-28-1.png
    26.9 KB · Lượt xem: 251
Sửa lần cuối bởi điều hành viên:

shynn

MasterCorporal
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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
cám ơn bạn :)
 

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
909
Được Like
1,528
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

MasterCorporal
Tham gia
03/03/2015
Bài viết
204
Được Like
142
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: 259

shynn

MasterCorporal
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

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

THB

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

THB

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,650
Được Like
3,939
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
 

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,006
Được Like
1,615
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

MasterCorporal
Tham gia
03/03/2015
Bài viết
204
Được Like
142
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: 211
  • Like
Reactions: THB

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom