[VNXF] - Đặt dọc thông tin người dùng với phương nằm ngang

PCO · 26/1/16

Đi đến các mẫu style của bạn và tìm kiếm "message_user_info.css". Thay thế nội dung của nó với mã dưới đây:

Mã:

[FONT=Consolas].messageUserInfo[/FONT]

Mã:

{
    @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;
    }
} [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]</xen:if>[/FONT][/FONT][/COLOR]

Sau đó thực hiện tìm kiếm cho "EXTRA.css" và thêm mã này:

Mã:

[FONT=Consolas].messageUserBlock .pairsJustified[/FONT]

Mã:

{
    line-height: inherit;
    margin-top: -5px;
    padding-bottom: 7px;
}
 
 
 
 
.message .messageInfo
{
    margin: 0 !important;
}
 
 
 
 
.quickReply .messageUserBlock .arrow
{
    top: 10px;
    left: 123px;
    border: 10px solid transparent;
    border-left-color: @messageUserBlock.border-color;
    -moz-border-left-colors: @messageUserBlock.border-color;
    border-right: none;
}
 
.quickReply .messageUserBlock .arrow span
{
    top: -10px;
    left: -11px; 
    border: 10px solid transparent;
    border-left-color: @messageAvatarHolder.background-color;
    -moz-border-left-colors: @messageAvatarHolder.background-color;
    border-right: none;
}
 
 
 
 
.quickReply .messageUserInfo
{
    float: left !important;
}
 
 
 
 
.quickReply .messageUserBlock div.avatarHolder
{
    margin-right: 0 !important;
}
 
 
 
 
.messageUserBlock .userBanner
{
    position: absolute !important;
    top: 40px;
}
 
 
 
 
.messageUserBlock .userBanner.wrapped span
{
    display: none;
}
 
 
 
 
.messageUserBlock .userBanner.wrapped
{
    border-radius: 3px !important;
    margin-left: 80px;
}
 
 
 
 
.messageUserBlock .userBanner.bannerStaff
{
    margin-left: 0 !important; [COLOR=#032A46][FONT=Times New Roman][FONT=Consolas]}[/FONT][/FONT][/COLOR]

Demo

Nguồn: VNXF.VN

[VNXF] - Đặt dọc thông tin người dùng với phương nằm ngang

Bài viết mới nhất

Thống kê

Bài viết được quan tâm nhiều