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

[shynn]

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

        <div class="avatarHolder">
            <span class="helper"></span>

Thay bằng

     <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

text-align: center;

vào các thẻ

.messageUserBlock a.username

.messageUserBlock .userTitle

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

.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

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

 

[Mr.Yellow]

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

 

[shynn]

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

 

[Mr.Yellow]

Ok để vọc thủ xem sao )

 

[PVS]

cám ơn bạn

 

[shynn]

cám ơn bạn

Không có gì ạ

 

[Blue]

Bà con làm theo thử coi ổn ko nha, ngon báo mình update vào vnxf luôn :v

 

[Chấm]

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

 

[shynn]

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à

 

[shynn]

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]

Đẹp. Thanks bác.

 

[THB]

đã test.
nó làm khung info rộng hơn. hơi khó nhìn.

 

[THB]

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.

2. cũng làm theo các bước như trên. nhưng thay.

<div class="avatarHolder" align="center">

bằng

<div class="avatarHolder" align="right">

là ok.

demo;

 

[dcstylexf]

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

 

[Chấm]

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.

<div class="avatarHolder" align="center">

bằng

<div class="avatarHolder" align="right">

là ok.

demo;
View attachment 4112

Nó kì kì anh ơi

 

[THB]

sao của e nó kì vậy ta?
chắc do cái styles.

 

[Chấm]

sao của e nó kì vậy ta?
chắc do cái styles.

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

 

[dcstylexf]

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

 

[shynn]

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

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

 

[daipqvms]

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