Tất cả thông tin User nằm ngang cho xenforo

Thảo luận trong 'Development Tutorials' bắt đầu bởi vanluong2608, 2/11/15.

  1. vanluong2608

    vanluong2608 Member

    Bài viết:
    261
    Likes :
    25
    Tất cả thông tin User nằm ngang cho xenforo
    Demo Online:

    Cách làm:
    Vào EXTRA.CSS
    Thêm:
    Mã:
    .messageUserInfo {
    float: none !important;
    width: auto !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    border-radius: none !important;
    }
    
    .messageUserBlock div.avatarHolder .avatar img {
    width: 48px;
    height: 48px;
    }
    
    .Responsive .messageUserBlock div.avatarHolder
    {
    float: left;
    padding: 5px;
    }
    
    .messageUserBlock h3.userText {
    margin-left: 64px;
    }
    
    .messageUserBlock {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
    }
    
    .messageUserBlock .userBanner
    {
    max-width: 150px;
    margin-left: 0;
    margin-right: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: static;
    display: inline-block;
    }
    
    .messageUserBlock a.username {
    padding-top: 2px;
    }
    .message .messageInfo {
    @property "messageInfo";
    margin-right: 10px;
    margin-left: 10px;
    @property "/messageInfo";
    }
    .message .messageContent {
    @property "messageContent";
    min-height: 30px;
    @property "/messageContent";
    }
    
    .messageUserBlock .userBanner {
    max-width: 100px !important;
    }
    .messageUserBlock .userBanner {
    display: block;
    margin-bottom: 5px;
    margin-left: 0px !important;
    margin-right: -12px;
    border-radius: 0px !important;
    }
    /*MESSAGE ARROW*/
    .messageUserBlock .arrow
    {
    display: none !important; 
    }
    .messageUserBlock .arrow span
    {
    display: none !important;
    }
    Chúc thành công.
     
    Last edited: 21/12/15
    Imma Kun thích bài này.
    Đang tải...
  2. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Mình làm nó bị như này, nếu muốn avatar thành viên to full thì làm như nào bạn nhỉ
    upload_2015-11-2_14-52-17
     
    Last edited: 2/11/15
  3. vanluong2608

    vanluong2608 Member

    Bài viết:
    261
    Likes :
    25
    bạn chụp cái hình đi
     
  4. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Mình chèn đoạn này vào message_user_info.css thì nó ra như hiện tại, chèn cái bạn vào thì lỗi nhiều hơn, bạn có thể chỉ cho mình cách để nó chuyển xuống như hình ko?
    Link demo: http://chodongxoai.vn/.t3848/
    upload_2015-11-2_15-10-36
    Mã:
    .messageUserInfo
    {
        @property "messageUserInfo";
        margin-bottom: 20px;
        @property "/messageUserInfo";
    }
    
    
    
    
        .messageUserBlock
        {
            @property "messageUserBlock";
            background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
            border: 1px solid @primaryLighterStill;
            border-radius: 5px;
            height: 122px;
            @property "/messageUserBlock";
    
            position: relative;
        }
    
            .messageUserBlock div.avatarHolder
            {
                @property "messageAvatarHolder";
                background-color: @primaryLightest;
                padding: 10px;
                margin-right: 15px;
                border-radius: 4px;
                float: left;
                @property "/messageAvatarHolder";
      
                position: relative;
            }
    
                .messageUserBlock div.avatarHolder .avatar
                {
                    display: block;
                    font-size: 0;
                }
      
                .messageUserBlock div.avatarHolder .onlineMarker
                {
                    position: absolute;
                    top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
                    left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;
          
                    @property "messageOnlineMarker";
                    border: 7px solid transparent;
                    border-top-color: rgb(127, 185, 0);
                    border-left-color: rgb(127, 185, 0);
                    border-top-left-radius: 5px;
                    border-top-right-radius: 3px;
                    border-bottom-left-radius: 3px;
                    @property "/messageOnlineMarker";
                }
      
            .messageUserBlock h3.userText
            {
                @property "messageUserText";
                padding: 6px;
                @property "/messageUserText";
            }
    
            .messageUserBlock .userBanner:last-child
            {
                margin-bottom: 0;
            }
            .messageUserBlock a.username
            {
                @property "messageUsername";
                font-weight: bold;
                display: inline;
                overflow: hidden;
                line-height: 16px;
                @property "/messageUsername";
      
            }
    
            .messageUserBlock .userTitle
            {
                @property "messageUserTitle";
                font-size: 11px;
                margin-bottom: 16px;
                display: block;
                @property "/messageUserTitle";
            }
    
            .messageUserBlock .extraUserInfo
            {
                @property "messageExtraUserInfo";
                font-size: 10px;
                background-color: @primaryLightest;
                padding: 10px 10px 7px;
                margin: -58px 0;
                border-radius: 4px;
                float: right;
                height: 105px;
                @property "/messageExtraUserInfo";
            }
                      
                .messageUserBlock .extraUserInfo img
                {
                    max-width: 100%;
                }
    
            .messageUserBlock .arrow
            {
                position: absolute;
                top: 123px;
                left: 10px;
      
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
      
                border: 10px solid transparent;
                border-top-color: @messageUserBlock.border-color;
                -moz-border-top-colors: @messageUserBlock.border-color;
      
                /* Hide from IE6 */
                _display: none;
            }
    
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -11px;
                    left: -10px;
          
                    display: block;
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
          
                    border: 10px solid transparent;
                    border-top-color: @messageAvatarHolder.background-color;
                    -moz-border-top-colors: @messageAvatarHolder.background-color;
                }
    
    
    
    
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .Responsive .messageUserInfo
        {
            float: none;
            width: auto;
        }
    
    
    
    
        .Responsive .messageUserBlock
        {
            margin-bottom: 5px;
            position: relative;
            height: 64px;
        }
    
    
    
    
        .Responsive .messageUserBlock div.avatarHolder
        {
            float: left;
            padding: 5px;
        }
    
    
    
    
            .Responsive .messageUserBlock div.avatarHolder .avatar img
            {
                width: 48px;
                height: 48px;
            }
    
            .Responsive .messageUserBlock div.avatarHolder .onlineMarker
            {
                top: 4px;
                left: 4px;
                border-width: 6px;
            }
    
    
    
    
        .Responsive .messageUserBlock h3.userText
        {
            margin-left: 64px;
        }
        .Responsive .messageUserBlock .userBanner
        {
            max-width: 150px;
            margin-right: 0;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            position: static;
            display: inline-block;
        }
            .Responsive .messageUserBlock .userBanner span
            {
                display: none;
            }
    
    
    
    
        .Responsive .messageUserBlock .extraUserInfo
        {
            display: none;
        }
        .Responsive .messageUserBlock .arrow
        {
            top: 65px;
        }
    }
    </xen:if>
     
  5. vanluong2608

    vanluong2608 Member

    Bài viết:
    261
    Likes :
    25
    bạn tìm và sửa lại css nhé cái này mình hướng dẫn nằm ngang thôi còn đó là thông tin thành viên của bạn ko liên quan tới bài của mình
     
  6. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    Mình chèn theo cách của bạn nó bị lỗi nên mình dùng qua cách này, mình đang hỏi bạn có biết ko chỉ mình cách fix mà bạn bảo tìm và sửa css ko liên quan đến bạn thì như nhau :D thôi để mình mò vậy
     
  7. LinhTinh9x

    LinhTinh9x New Member

    Bài viết:
    65
    Likes :
    14
    Mình cũng mới mò được cái này, sẵn tiện chia sẽ cho bạn nào cần \:D/
    Ai không cần cũng đừng ném đá nhá! :D

    Demo: Untitled

    Untitled1
    >>>>>> Quên Cái Này <<<<<<<
    Untitled2
    Mình có sửa luôn mặc định bên dưới QuickReply cho hiện full user info ra luôn.

    Lưu ý
    • Nếu bạn đã chỉnh sửa CSS quá nhiều thì có thể kết quả sẽ không như mong muốn!
    • Để tránh lỗi phát sinh không cần thiết, trước khi chỉnh sửa Templates nên coppy tất cả code của templates và lưu lại bằng notepad hoặc các công cụ tương tự để khôi phục nếu lỗi phát sinh!
    Cách làm như sau:
    Truy cập ACP > Appearance > Templates > tìm đến tempates message_user_info thay tất cả code trong đó bằng đoạn code này:

    Mã:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person"> 
    <div class="messageUserBlock {xen:if $user.isOnline, online}">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <div class="avatarHolder">
                <span class="helper"></span>
                <xen:avatar user="$user" size="m" img="true" />
                <xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
                <!-- slot: message_user_info_avatar -->
            </div>
        </xen:hook>
    
    
        <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <h3 class="userText">
                <xen:username user="$user" itemprop="name" rich="true" />
                <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
                {xen:helper userBanner, $user, 'wrapped'}
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
         
        <xen:if hascontent="true">
            <div class="extraUserInfo">
            <xen:contentcheck>
                <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                    <dl class="user_message_cot_1" style="    border-bottom: 1px solid green;
                                            border-right: 1px solid green;
                                            padding: inherit;
                                            font-family: timesnewroman;
                                            font-weight: bold;
                                            font-size: 15px;">             
                        <dt>         
                                    <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase joined}:</dt>
                                            <dd>{xen:date $user.register_date}</dd>
                                        </dl>
                                    </xen:if>
                 
                                    <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase messages}:</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>
                                    </xen:if>
                 
                                    <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase likes_received}:</dt>
                                            <dd>{xen:number $user.like_count}</dd>
                                        </dl>
                                    </xen:if>
                 
                                    <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase trophy_points}:</dt>
                                            <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                                        </dl>
                                    </xen:if>
                        </dt>
                    </dl>
                    <dl class="user_message_cot_2" style="    border-bottom: 1px solid green;
                                            padding: inherit;
                                            font-family: timesnewroman;
                                            font-weight: bold;
                                            font-size: 15px;"> 
                        <dd>
                                    <xen:if is="@messageShowGender AND {$user.gender}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase gender}:</dt>
                                            <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase gender}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                 
                                    <xen:if is="@messageShowOccupation AND {$user.occupation}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase occupation}:</dt>
                                            <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase occupation}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                 
                                    <xen:if is="@messageShowLocation AND {$user.location}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase location}:</dt>
                                            <dd><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>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase location}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
             
                                    <xen:if is="@messageShowHomepage AND {$user.homepage}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase home_page}:</dt>
                                            <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase home_page}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                        </dd>
                    </dl>
                             
                </xen:hook>         
                            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
                                <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
             
                                    <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                                        <xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
                                            <xen:if hascontent="true">
                                                <dl class="pairsJustified userField_{$fieldId}">
                                                    <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                                    <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                                                </dl>
                                            </xen:if>
                                        </xen:if>
                                    </xen:foreach>
                 
                                </xen:hook>
                            </xen:if>
            </xen:contentcheck>
    </div>
        </xen:if>
         
    
    
        <span class="arrow"><span></span></span>
    </div>
    </div>
    • Save nó lại.
    Tiếp đó tìm templates message_user_info.css cũng thay tất cả code trong đó bằng code này:
    Mã:
    .messageUserInfo
    {
        /*float: left;
    width: 140px;*/
    margin: -2px 15px 10px 10px;
    
    }
    
        .messageUserBlock
        {
         
            border-left: 15px solid #16633B !important;
         
            display: flex;
            position: relative;
            background-color: #E9FFFE;
        text-shadow: none !important;
        }
         
            .messageUserBlock div.avatarHolder
            {
             
                padding: 10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -khtml-border-radius: 4px;
                border-radius: 4px;
                display: flex;
             
     
            }
         
                .messageUserBlock div.avatarHolder .avatar
                {
                    display: block;
                    font-size: 0;
                    text-align: center;
                                    padding: 5px;
                }
             
            .messageUserBlock h3.userText
            {
                padding: 6px;
    
    
    
            }
         
            .messageUserBlock .userBanner
            {
                display: block;
                border-radius: inherit !important;
                    border: none;
                    text-shadow: none;
                    box-shadow: none;
                    background: none;
                    border-top: 1px solid;
                    border-bottom: 1px solid;
                    margin-bottom: 4px;
            }
         
            .messageUserBlock .userBanner:last-child
            {
                margin-bottom: 0;
            }
     
            .messageUserBlock a.username
            {
                font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    line-height: 26px;
    
             
            }
         
            .messageUserBlock .userTitle
            {
                font-size: 11px;
    margin-bottom: 5px;
    display: block;
    
            }
         
            .messageUserBlock .extraUserInfo
            {
                font-size: 10px;
             
                padding: 10px 10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -khtml-border-radius: 4px;
                border-radius: 4px;
                display: flex;
                    margin-left: auto;
                 
    
            }
         
                .messageUserBlock .extraUserInfo dl
                {
                    margin: 2px 0 0;
                }
                             
                .messageUserBlock .extraUserInfo img
                {
                    max-width: 100%;
                }
         
            .messageUserBlock .arrow
            {
                position: absolute;
                top: 10px;
                right: -10px;
             
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
             
                border: 10px solid transparent;
                border-left-color: rgb(239, 242, 247);
                -moz-border-left-colors: rgb(239, 242, 247);
                border-right: none;
             
                /* Hide from IE6 */
                    display: none;
            }
         
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
                 
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
                 
                    border: 10px solid transparent;
                    border-left-color: rgb(239, 242, 247);
                    -moz-border-left-colors: rgb(239, 242, 247);
                    border-right: none;
                }
    
    
    @media (max-width:480px)
    {
        .Responsive .messageUserInfo
        {
            float: none;
            width: auto;
        }
    
        .Responsive .messageUserBlock
        {
            overflow: hidden;
            margin-bottom: 5px;
            position: relative;
        }
    
        .Responsive .messageUserBlock div.avatarHolder
        {
            padding: 5px;
            display: inline-block;
            vertical-align: middle;
        }
    
            .Responsive .messageUserBlock div.avatarHolder .avatar img
            {
                width: 48px;
                height: 48px;
            }
    
        .Responsive .messageUserBlock h3.userText
        {
            border-bottom: none;
            display: inline-block;
            vertical-align: middle;
            text-align: left;
        }
     
        .Responsive .messageUserBlock .userBanner
        {
            max-width: 150px;
            margin-left: 0;
            margin-right: 0;
            -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
            -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
            position: static;
            display: inline-block;
        }
     
            .Responsive .messageUserBlock .userBanner span
            {
                display: none;
            }
    
        .Responsive .messageUserBlock .extraUserInfo
        {
            display: none;
        }
    
        .Responsive .messageUserBlock .arrow
        {
            display: none;
        }
    }
    
    /*** Mod User Info ***/
    
    .userBanner.bannerStaff.wrapped span { display: none;}
    .messageUserInfo .messageUserBlock .avatar > img {
        border-radius: 50%;
            margin-top: 5px;
            margin-left: 5px;
         
    }
    
    /* 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: 90px 0 0 -30px;
    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)}
    }
    Save lại > ra forum > nhấn F5 rồi xem kết quả!
    Chúc các bạn thành công \:D/

    Demo Online: http://diendan.linhtinhsontrang.com/threads/190/
     
    Last edited: 19/11/15
  8. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    #7 nhìn quá rối của mình chạy ổn trên cả di động
     
  9. LinhTinh9x

    LinhTinh9x New Member

    Bài viết:
    65
    Likes :
    14
    #8 của bác dùng kích thước nhỏ gọn mà so gì, cái ta làm full kích thước, hơn nữa tính phát triển phiên bản mobile nên lười reponsive thôi \:D/

    Hơn nữa của bác trên di động info nó zoom lại tý xíu ai mà nhìn ra cho được
     
  10. dinhnhan

    dinhnhan New Member

    Bài viết:
    33
    Likes :
    2
  11. vanluong2608

    vanluong2608 Member

    Bài viết:
    261
    Likes :
    25
  12. LinhTinh9x

    LinhTinh9x New Member

    Bài viết:
    65
    Likes :
    14
    >>> Tối ưu code
    >>> Responsive cho di động


    >>> Templates message_user_info thay toàn bộ bằng code sau

    Mã:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">  
    <div class="messageUserBlock {xen:if $user.isOnline, online}">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <div class="avatarHolder">
                <span class="helper"></span>
                <xen:avatar user="$user" size="m" img="true" />
                <xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
                <!-- slot: message_user_info_avatar -->
            </div>
        </xen:hook>
    
    
        <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <h3 class="userText">
                <xen:username user="$user" itemprop="name" rich="true" />
                <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
                {xen:helper userBanner, $user, 'wrapped'}
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
          
        <xen:if hascontent="true">
            <div class="extraUserInfo">
            <xen:contentcheck>
                <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                    <dl class="user_message_cot_1" style="    border-right: 1px solid rgba(0,128,0,0.3);
                                            padding: inherit;
                                            font-family: -webkit-body;
                                            font-size: larger;
                                            margin: auto;">
      
                      
                        <dt>          
                                    <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase joined}:</dt>
                                            <dd>{xen:date $user.register_date}</dd>
                                        </dl>
                                    </xen:if>
                  
                                    <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase messages}:</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>
                                    </xen:if>
                  
                                    <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase likes_received}:</dt>
                                            <dd>{xen:number $user.like_count}</dd>
                                        </dl>
                                    </xen:if>
                  
                                    <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase trophy_points}:</dt>
                                            <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                                        </dl>
                                    </xen:if>
                        </dt>
                    </dl>
                    <dl class="user_message_cot_2" style="padding: inherit;
                                            font-family: -webkit-body;
                                            font-size: larger;
                                            margin: auto;">  
                        <dd>
                                    <xen:if is="@messageShowGender AND {$user.gender}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase gender}:</dt>
                                            <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase gender}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                  
                                    <xen:if is="@messageShowOccupation AND {$user.occupation}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase occupation}:</dt>
                                            <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase occupation}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                  
                                    <xen:if is="@messageShowLocation AND {$user.location}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase location}:</dt>
                                            <dd><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>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase location}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
              
                                    <xen:if is="@messageShowHomepage AND {$user.homepage}">
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase home_page}:</dt>
                                            <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                                        </dl>
                                    <xen:else />
                                        <dl class="pairsJustified">
                                            <dt>{xen:phrase home_page}:</dt>
                                            <dd>N/A</dd>
                                        </dl>
                                    </xen:if>
                        </dd>
                    </dl>
                              
                </xen:hook>          
                            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
                                <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
              
                                    <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                                        <xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
                                            <xen:if hascontent="true">
                                                <dl class="pairsJustified userField_{$fieldId}">
                                                    <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                                    <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                                                </dl>
                                            </xen:if>
                                        </xen:if>
                                    </xen:foreach>
                  
                                </xen:hook>
                            </xen:if>
            </xen:contentcheck>
    </div>
        </xen:if>
          
    
    
        <span class="arrow"><span></span></span>
    </div>
    </div>
    >>> Templates message_user_info.css thay toàn bộ bằng code sau:

    Mã:
    .messageUserInfo
    {
        /*float: left;
    width: 140px;*/
    margin: -2px 15px 10px 10px;
    
    }
    
        .messageUserBlock
        {
          
            border-left: 15px solid #16633B !important;
          
            display: flex;
            position: relative;
            background-color: #E9FFFE;
        text-shadow: none !important;
        }
          
            .messageUserBlock div.avatarHolder
            {
              
                padding: 10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -khtml-border-radius: 4px;
                border-radius: 4px;
                display: flex;
              
      
            }
          
                .messageUserBlock div.avatarHolder .avatar
                {
                    display: block;
                    font-size: 0;
                    text-align: center;
                                    padding: 5px;
                }
              
            .messageUserBlock h3.userText
            {
                padding: 0;
                    margin: auto;
                    margin-left: inherit;
                    vertical-align: middle;
                text-align: center;
    
            }
          
            .messageUserBlock .userBanner
            {
                display: block;
                border-radius: inherit !important;
                    border: none;
                    text-shadow: none;
                    box-shadow: none;
                    background: none;
                    border-top: 1px solid;
                    border-bottom: 1px solid;
                    margin-bottom: 4px;
            }
          
            .messageUserBlock .userBanner:last-child
            {
                margin-bottom: 0;
            }
      
            .messageUserBlock a.username
            {
                font-size: 14px;
    margin-top: 5px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    line-height: 26px;
    
              
            }
          
            .messageUserBlock .userTitle
            {
                font-size: 11px;
    margin-bottom: 5px;
    display: block;
    
            }
          
            .messageUserBlock .extraUserInfo
            {
                font-size: 10px;
              
                padding: 10px 10px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -khtml-border-radius: 4px;
                border-radius: 4px;
                display: flex;
                    margin-left: auto;
                  
    
            }
          
                .messageUserBlock .extraUserInfo dl
                {
                    margin: 2px 0 0;
                }
                              
                .messageUserBlock .extraUserInfo img
                {
                    max-width: 100%;
                }
          
            .messageUserBlock .arrow
            {
                position: absolute;
                top: 10px;
                right: -10px;
              
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
              
                border: 10px solid transparent;
                border-left-color: rgb(239, 242, 247);
                -moz-border-left-colors: rgb(239, 242, 247);
                border-right: none;
              
                /* Hide from IE6 */
                    display: none;
            }
          
                .messageUserBlock .arrow span
                {
                    position: absolute;
                    top: -10px;
                    left: -11px;
                  
                    width: 0px;
                    height: 0px;
                    line-height: 0px;
                  
                    border: 10px solid transparent;
                    border-left-color: rgb(239, 242, 247);
                    -moz-border-left-colors: rgb(239, 242, 247);
                    border-right: none;
                }
    
    /*** Mod User Info ***/
    
    .userBanner.bannerStaff.wrapped span { display: none;}
    .messageUserInfo .messageUserBlock .avatar > img {
        border-radius: 50%;
            margin-top: 5px;
            margin-left: 5px;
          
    }
    
    /* PULSING INDICATOR */
    .messageUserBlock div.avatarHolder .onlineMarker {
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    display: inline-block;
    height: 16px;
    margin: 90px 0 0 -30px;
    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)}
    }
    
    @media (max-width:630px)
    {
        .Responsive .messageUserInfo
        {
            float: none;
            width: auto;
            margin: 2px;
        }
    
        .Responsive .messageUserBlock
        {
            overflow: hidden;
            margin-bottom: 5px;
            position: relative;
            max-height: 120px;
          
        }
    
        .Responsive .messageUserBlock div.avatarHolder
        {
            padding: 5px;
            display: inline-block;
            vertical-align: middle;
        }
    
            .Responsive .messageUserBlock div.avatarHolder .avatar img
            {
                width: 96px;
                height: 96px;
                    margin: auto;
            }
          
            .Responsive .messageUserBlock div.avatarHolder .onlineMarker
            {
                margin: -20px 0px 15px 70px;
            }
    
        .Responsive .messageUserBlock h3.userText
        {
            border-bottom: none;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            margin: 25px 0 0 30px;
        }
      
        .Responsive .messageUserBlock .userBanner
        {
            max-width: 150px;
            margin-left: 0;
            margin-right: 0;
            -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
            -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
            position: static;
            display: inline-block;
        }
      
            .Responsive .messageUserBlock .userBanner span
            {
                display: none;
            }
    
        .Responsive .messageUserBlock .extraUserInfo
        {
            display: block;
        }
      
        .Responsive .messageUserBlock .extraUserInfo .user_message_cot_1
        {
          
            border: none !important;
        }
      
        .Responsive .messageUserBlock .extraUserInfo .user_message_cot_2
        {
            display: none;
        }
    
        .Responsive .messageUserBlock .arrow
        {
            display: none;
        }
    }
    
    @media (max-width:430px)
    {
        .Responsive .messageUserBlock
        {
            max-height: 120px;
          
        }
        .Responsive .messageUserBlock .extraUserInfo .user_message_cot_1
        {
            border: none;
        }
        .Responsive .messageUserBlock .extraUserInfo .user_message_cot_2
        {
            display: none;
        }
      
        .Responsive .messageUserBlock h3.userText
        {
            border-bottom: none;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            margin: 55px 0 0 -63px;
        }
        .Responsive .messageUserBlock div.avatarHolder
        {
          
        }
      
        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            height: 48px;
            width: 48px;
            margin: auto;
            margin-left: 15px;
        }
      
        .Responsive .messageUserBlock div.avatarHolder .onlineMarker
        {
            margin: -20px 0px 15px 20px;
        }
      
        .Responsive .messageUserBlock .userBanner
        {
            display: none;
        }
    
    }
    
    @media (max-width:300px)
    {
        .Responsive .messageUserBlock
        {
            max-height: 75px;
        }
        .Responsive .messageUserBlock .extraUserInfo
        {
            display: none;
        }
      
        .Responsive .messageUserBlock h3.userText
        {
            margin: 5px 0 0 0px;
        }
    }
     

    Các file đính kèm:

    Last edited: 20/11/15
    Imma Kun thích bài này.
  13. Chodongxoai.vn

    Chodongxoai.vn Member

    Bài viết:
    236
    Likes :
    41
    #9 ơi trên điện thoại nhìn rõ đấy, test bằng PC thì nhìn nhỏ nhưng với điện thoại thì ok
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...