Làm đẹp cho khung thông tin user

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
Làm đẹp cho khung thông tin (information) user, cách làm như sau:

1. Upload đính kèm

2. Thêm vào cuối EXTRA.css
Mã:
.icon {
    background-color: transparent;
    background-image: url("styles/images/iconsprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    vertical-align: middle;
    width: 16px;
}
.span-icon-text {
    margin: -2px 5px 0 0;
}
.line-dot-pink {
    background: url("styles/images/line-dot-pink.gif") repeat-x scroll left center transparent;
    height: 1px;
    width: 98%;
}
.icon-register-date {
    background-position: -17px -646px;
}
.icon-message-count {
    background-position: 0 -1037px;
}
.icon-like-count {
    background-position: 0 -1377px;
}
.icon-trophy-points {
    background-position: 0 -289px;
}
.icon-gender {
    background-position: 0 -1751px;
}
.icon-occupation {
    background-position: 0 -935px;
}
.icon-user-location {
    background-position: 0 -1734px;
}

3. Vào message_user_info tìm
Mã:
<xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

Xem và thay thế đoạn bên dưới nó bằng code sau (coi cái nào có thì thay vs thêm vào)
Mã:
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <xen:if is="@messageShowRegisterDate">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-register-date"></span> {xen:phrase member_since}:
                        {xen:date $user.register_date}</dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
     
                <xen:if is="@messageShowMessageCount">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-message-count"></span>{xen:phrase message_count}:
                        <a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed">{xen:number $user.message_count}</a></dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
     
                <xen:if is="@messageShowTotalLikes">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-like-count"></span>{xen:phrase likes_received}:
                        {xen:number $user.like_count}</dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
     
                <xen:if is="@messageShowTrophyPoints">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-trophy-points"></span>{xen:phrase trophy_points}:
                        <a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
 
                <xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-gender"></span>{xen:phrase gender}:
                        <itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
     
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-occupation"></span>{xen:phrase occupation}:
                        < itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
     
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-user-location"></span>{xen:phrase location}:
                        <a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
 
                <xen:if is="@messageShowHomepage AND {$user.homepage}">
                    <dl class="pairsInline">
                        <dd><span class="icon span-icon-text icon-user-location"></span>{xen:phrase home_page}:
                        <a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                    </dl>
                <div class="line-dot-pink" style="padding:2px;"></div>
                </xen:if>
                 
            </xen:hook>

Demo:

Untitled.png

Chúc các bạn thành công.


Nguồn: vxf.vn​
 
tiếp theo luôn cho những cái liên quan cũng từ vxf luôn.
Vào Style Properties -> Message & Element để tick chọn những phần nào mà bạn muốn hiện ra ở User Info
Căn giữa username
vào message_user_info.css
tìm .messageUserBlock a.username
thêm vào text-align: center;


chỉnh độ rộng:
vào message_user_info.css
tìm .messageUserInfo
tăng giá trị width

và vào message.css
tìm .message .messageInfo
thêm padding-left: 25px;
 
Admin ơi sao mình cài cái file upload vào rồi mà nó vẫn không hiện lên như trong hướng dẫn vậy nó không thay đổi gì cả. Up vào đâu chính xác vậy?
 
Back
Top