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

Ban đầu

Thành quả


Đầ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




Xong rồi Update Style Properties

Tiếp theo mở template message_user_info

Tìm

Mã:

Thay bằng

Mã:

     




{xen:number $user.message_count}




{xen:number $user.like_count}




{xen:number $user.trophy_points}


        

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

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

Xong

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

 

Tem, quá đẹp còn gì

 

Áp dụng luôn đi cho nóng ạ

 

Ok để vọc thủ xem sao )

 

Không có gì ạ

 

Thấy nó kì kì @@
Sao nó dư ra 1 khúc nhỉ

 

Em thấy bình thường mà bác. Đẹp mà

 

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

 

cũng đẹp, cơ mà không hợp với forum mình lắm
Hình như bên mình có ai hỏi rồi thì phải

 

Nó kì kì anh ơi

 

Chắc tại style rồi anh
Em đang làm trên localhost nên k có DEMO đưa a xem được

 

print screen đê :v

 

Bên bác cũng là em hỏi đó :v :v

 

mình đã thành công ^^