Cách làm thống kê thành viên đẹp ở widgets sidebar

Như tiêu đề, mình xin chia sẻ cách làm mục thống kê Thành viên mới và Top Poster trên sidebar cho nó đẹp hơn đôi chút so với mặc định. (Yêu cầu forum có sử dụng Widgets...).

​

Bước 1: Thay thế toàn bộ code trong template wf_widget_users bằng đoạn code sau:

Mã:

<xen:if is="{$widget.options.displayMode} == 'avatarOnly'">
  <ul class="followedOnline">
     <xen:foreach loop="$users" value="$user">
       <li title="{$user.username}<xen:if hascontent="true"> - <xen:contentcheck>{xen:if '{$widget.options.order} == "message_count"', '{xen:phrase messages}: {xen:number $user.message_count}', '{xen:helper usertitle, $user}'}</xen:contentcheck></xen:if>" class="Tooltip user-{$user.user_id}">
         <xen:avatar user="$user" size="s" img="true" class="_plainImage" />
       </li>
     </xen:foreach>
  </ul>
<xen:elseif is="{$widget.options.displayMode} == 'avatarOnlyBigger'" />
  <ul class="avatarHeap">
     <xen:foreach loop="$users" value="$user">
       <li title="{$user.username}<xen:if hascontent="true"> - <xen:contentcheck>{xen:if '{$widget.options.order} == "message_count"', '{xen:phrase messages}: {xen:number $user.message_count}', '{xen:helper usertitle, $user}'}</xen:contentcheck></xen:if>" class="Tooltip user-{$user.user_id}">
         <xen:avatar user="$user" size="s" />
       </li>
     </xen:foreach>
   </ul>
<xen:else />
<div class="widgetuserList" id="widgetuser_wapper"><ul>
     <xen:foreach loop="$users" value="$user">
  <li>
       <div id="widgetuser_colum1">
         <xen:username user="$user" rich="true" />
       </div>
       
       <xen:if is="{$widget.options.order} == 'message_count'">
        <div id="widgetuser_colum2">
  {xen:number $user.message_count}
  </div>

       <xen:elseif is="{$widget.options.order} == 'register_date'" />
        <div id="widgetuser_colum2">
        {xen:date {$user.register_date}}
  </div>

    <xen:elseif is="{$widget.options.order} == 'like_count'" />
        <div id="widgetuser_colum2">
        {xen:number {$user.like_count}}
  </div>
  <xen:else />
         </xen:if>
       </li>
     </xen:foreach>
  </ul></div>

</xen:if>

Bước 2: Thêm đoạn css sau vào cuối template sidebar.css

PHP:

#widgetuser_wapper
{   
  width:105%;line-height: 1.60; margin:-4px -7px; border: 1px solid #eee; background: url(data/pic/list.png) no-repeat top left;   
}
#widgetuser_colum1
{
  float:left; width:55%;border-bottom: 1px solid #eee; border-right:1px solid #eee; padding-left:24px;
   
}
#widgetuser_colum2
{   
  float:right; width:34%;border-bottom: 1px solid #eee; text-align:center;   
   
 }
.widgetuserList
{
     @property "sidebarAvatarListUsername";
     font-size: 9pt;
     display: block;
     @property "/sidebarAvatarListUsername";
}
.widgetuserList li
{
   @property "sidebarAvatarListItem";
   margin: 0;
   overflow: hidden;
   zoom: 1;
   @property "/sidebarAvatarListItem";
}



Có vướng mắc gì các bạn comment nhé
demo: http://tuoitredalat.net/

 

Cái ảnh dãy số 1,2,3,4,5 ... Không trùng với các khung thành viên. Hơi bị lệch 1 chút.

Cách khắc phục là vào
Style Properties: General : Body

Chỉnh line-height: 1.50;

 

thêm cái này load cho lâu ra , càng ít càng đỡ nặng

 

Nhưng nó đẹp và tiện nữa.

 

Thật ra thì nếu dùng nó trên VietxfStats rồi thì không cần cái này, tuy nhiên cũng có bạn thích
Cảm ơn bác laihanh291 đã bổ sung thêm

 

Thật ra thì nếu dùng nó trên VietxfStats rồi thì không cần cái này, tuy nhiên cũng có bạn thích
Cảm ơn bác laihanh291 đã bổ sung thêm
Tuy nhiên bác hoàn toàn có thể tùy chỉnh cái đó bằng cách thêm line-height: 1.50; vào trong #widgetuser_wapp ở ngay cái đoạn CSS trên cho tiện nhé

 

Mã:

/* sidebar structural elements */
 
.mainContainer
{
    float: left;
    margin-right: -{xen:calc '@sidebar.width + 10'}px;
    width: 100%;
}
 
    .mainContent
    {
        margin-right: {xen:calc '@sidebar.width + 10'}px;
    }
 
.sidebar
{
    @property "sidebar";
    font-size: 13px;
    float: right;
    width: 250px;
    @property "/sidebar";
}
 
 
 
/* visitor panel */
 
.sidebar .visitorPanel
{
    overflow: hidden; zoom: 1;
}
 
    .sidebar .visitorPanel h2 .muted
    {
        display: none;
    }
 
    .sidebar .visitorPanel .avatar
    {
        @property "visitorPanelAvatar";
        margin-right: 10px;
        float: left;
        width: 80px;
        height: 80px;
        @property "/visitorPanelAvatar";
       
        width: auto;
        height: auto;
    }
   
        .sidebar .visitorPanel .avatar img
        {
            width: @visitorPanelAvatar.width;
            height: @visitorPanelAvatar.height;
        }
   
    .sidebar .visitorPanel .username
    {
        @property "visitorPanelUsername";
        font-weight: bold;
        @property "/visitorPanelUsername";
    }
   
    .sidebar .visitorPanel .stats
    {
        @property "visitorPanelStats";
        margin-top: 2px;
        @property "/visitorPanelStats";
    }
   
    .sidebar .visitorPanel .stats .pairsJustified
    {
        line-height: normal;
    }
 
/* generic sidebar blocks */
       
.sidebar .section .primaryContent  h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3
{
    font-weight: bold;
    font-size: 14px;
    color: #005075;
        text-shadow:1px 1px 1px #fff;
    background: #A5D6FA;
    padding: 6px;
    margin: -10px -10px 5px;
    border-bottom: 1px solid #43B2E5;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    @property "/sidebarBlockHeading";
}
 
.sidebar .section .primaryContent  h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3 {
    border-radius: 3px 3px 0px 0px;
}
 
.sidebar .section .primaryContent,
.sidebar .section .secondaryContent {
    border-radius: 3px;
    border: 1px solid #43B2E5;
    box-shadow: rgba(0,0,0,0.05) 0px 1px 4px;
    background: @whiteColor;
}
 
.sidebar .section .primaryContent  h3 a,
.sidebar .section .secondaryContent h3 a
{
    @property "sidebarBlockHeading.font";
    font-weight: bold;
    font-size: 12px;
    color: #006B9C;
    @property "/sidebarBlockHeading.font";
}
 
.sidebar .section .secondaryContent .footnote,
.sidebar .section .secondaryContent .minorHeading
{
    @property "sidebarBlockFootnote";
    color: rgb(152, 152, 152);
    margin-top: 5px;
    @property "/sidebarBlockFootnote";
}
 
    .sidebar .section .secondaryContent .minorHeading a
    {
        color: @sidebarBlockFootnote.color;
    }
 
 
 
 
 
 
 
 
 
 
 
 
/* list of users with 32px avatars, username and user title */
 
.sidebar .avatarList li
{
    @property "sidebarAvatarListItem";
    margin: 5px 0;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    zoom: 1;
    @property "/sidebarAvatarListItem";
}
 
    .sidebar .avatarList .avatar
    {
        @property "sidebarAvatarListAvatar";
        margin-right: 5px;
        float: left;
        width: 32px;
        height: 32px;
        @property "/sidebarAvatarListAvatar";
       
        width: auto;
        height: auto;
    }
       
    .sidebar .avatarList .avatar img
    {
        width: @sidebarAvatarListAvatar.width;
        height: @sidebarAvatarListAvatar.height;
    }
   
    .sidebar .avatarList .username
    {
        @property "sidebarAvatarListUsername";
        font-size: 11pt;
        margin-top: 2px;
        display: block;
        @property "/sidebarAvatarListUsername";
    }
   
    .sidebar .avatarList .userTitle, .userTitle a
    {
        @property "sidebarAvatarListUserTitle";
        color: #777;
@mutedTextColor;
        @property "/sidebarAvatarListUserTitle";
    }
 
 
 
 
 
 
 
 
 
/* list of users */
 
.sidebar .userList
{
}
 
    .sidebar .userList .username
    {
        @property "sidebarUserListUsername";
        font-size: 11px;
        @property "/sidebarUserListUsername";
    }
 
    .sidebar .userList .username.invisible
    {
        @property "sidebarUserListUsernameInvisible";
        color: @primaryLightish;
        @property "/sidebarUserListUsernameInvisible";
    }
   
    .sidebar .userList .username.followed
    {
        @property "sidebarUserListUsernameFollowed";
 
        @property "/sidebarUserListUsernameFollowed";
    }
 
    .sidebar .userList .moreLink
    {
        display: block;
    }
   
   
   
   
/* people you follow online now */
 
.followedOnline
{
    @property "sidebarFollowedUsers";
    margin-top: 3px;
    margin-bottom: -5px;
    overflow: hidden;
    zoom: 1;
    @property "/sidebarFollowedUsers";
}
 
.followedOnline li
{
    @property "sidebarFollowedUsersItem";
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    @property "/sidebarFollowedUsersItem";
}
 
    .followedOnline .avatar
    {
        @property "sidebarFollowedUsersAvatar";
        width: 32px;
        height: 32px;
        @property "/sidebarFollowedUsersAvatar";
       
        width: auto;
        height: auto;
    }
   
        .followedOnline .avatar img
        {
            width: @sidebarFollowedUsersAvatar.width;
            height: @sidebarFollowedUsersAvatar.height;
        }
   
   
   
 
   
   
/* call to action */
 
#SignupButton
{
    @property "signupButton";
    background-color: white;
    margin: 10px 30px;
    border: 1px solid @secondaryLight;
    border-radius: 8px;
    text-align: center;
    line-height: 30px;
    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    display: block;
    cursor: pointer;
    height: 30px;
    @property "/signupButton";
}
 
    #SignupButton .inner
    {
        @property "signupButtonInner";
        font-weight: bold;
        font-size: 12pt;
        font-family: @button.font-family;
        color: @textCtrlBackground;
        background: rgb(180, 69, 59) url('@imagePath/xenforo/xenfocus/button_bg.png') repeat-x left top;
        border-radius: 4px;
        display: block;
        @property "/signupButtonInner";
    }
   
    #SignupButton:hover .inner
    {
        @property "signupButtonHover";
        text-decoration: none;
        background-color: rgb(204, 79, 67);
        border-radius: 4px;
        @property "/signupButtonHover";
    }
   
    #SignupButton:active
    {
        @property "signupButtonActive";
        box-shadow: 0 0 3px rgba(0,0,0, 0.2);
        position: relative;
        top: 2px;
        @property "/signupButtonActive";
    }

Bên của anh ko có nên anh phải chỉnh theo cách đó. Theo chú code của anh thế này thì chèn cái đó vào đâu ?!

 

thớt cho hỏi làm cái
chào mừng bạn đến với TUỔI TRẺ ĐÀ LẠT
Xin hãy ĐĂNG KÝ hoặc ĐĂNG NHẬP để có thể sử dụng được toàn bộ chức năng của diễn đàn.
giống forum thớt thì làm sao ?

 

Cái thông báo giống 4rum mình thì làm theo hướng dẫn trong bài này nhé: http://tuoitredalat.net/threads/cach-chen-linh-o-thong-bao-dang-ky-goc-duoi-phai.495/

 

cái mà bản kêu đăng ký đó nội dung mình copy r` đó
nằm góc phải nếu ko đăng ký

 

Tìm đoạn này trong templatewf_widget_users của anh rồi chèn thêm cái đó vào trong thuộc tính style cũng được ạ

PHP:

<div class="" style="height:200px; margin:0 -10px; background: url(styles/default/xenforo/list.gif) no-repeat top left;">

 

Bác cho em hỏi ngoài lề 1 chút là em dùng cái style của thích hát hò đó nó có cái slide ảnh chạy bên cạnh cái thống kê diễn đàn đó giờ muốn bỏ nó đi và thay vào như cái thống kê cũ thì làm thế nào ạ. thank bác nhiều

 

Mình vừa edit lại cho chuẩn và đẹp hơn, các bạn thử xong lỡ có gạch đá thì ném nhẹ nhẹ thôi nhé