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

[mcjury]

mà bác có code like giống của vnxf không code trượt kìa

 

[mcjury]

đọc lại từ trên xuống dưới nha. demo vnxf luôn rồi. ko thì tìm addon của bác chủ thớt cài vào cho nhanh.

như thế này đúng không


.messageUserBlock a.username text-align: center;

 

[THB]

đã chỉnh sửa 4 lần

làm thêm đi. hiii. 4 lần con số nhỏ quá. cố lên.

 

[THB]

mà bác có code like giống của vnxf không code trượt kìa

ko hiểu?

 

[mcjury]

cái đoạn này nè





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

 

[Jindo_Katori]

tuy ko dùng
nhưng dù sao cũng : tks for share.
à mà rất đẹp nhé

 

[Trung Skyer]

Sao của em lại như thế này

 

[THB]

làm sai bước
hiii

 

[acaydanba]

Oánh dấu, thanks chủ thớt

Ban đầu
View attachment 4061
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
View attachment 4062


View attachment 4063
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

 

[bui hung]

mình muốn lấy file awsome.min.css đó về localhost thì khai đường dẫn như thế nào nhỉ ?
Mà sao 3 cái số avata trên vnxf to hơn số của mình ) của mình bé xíu khó nhìn quá

 

[kieudai91]

thành quả của mình đây, nhìn không được đẹp cho lắm

 

[hoccntt]

Ban đầu
View attachment 4061
Thành quả

Help ! Mình đã làm được nhưng sao không có cái hình mờ mờ ở 3 ô tròn nhỏ

Sau khi chỉnh không thấy hình mờ nhỏ

Nhờ ae chỉnh giúp cảm ơn

 

[bui hung]

đọc trang 2 là có hướng dẫn đó bạn ơi sao ko chịu đọc

 

[tx101]

Nhờ giúm chỉnh sửa lại giùm mình là bài viết, được thích, điểm thành tích chuyển xướng phía dưới như forum mình đc không ạ, còn phía trên avatar thì bỏ hết chỉ để hình avatar hình tròn thôi và dấu online

 

[THB]

sao ta? ko hiểu?
xem #13 thử

 

[utmaster90]

sao ben minh ko giong ben vnxf nhi~ ??

 

[THB]

làm chưa đúng. hiii

 

[dcstylexf]

làm chưa đúng. hiii

ahihi :3

 

[utmaster90]

chua dung cho nao chi minh voi

 

[dcstylexf]

chua dung cho nao chi minh voi

cài font awesome vào.