Tutorial 2x Tiled postbit with icons - Postbit dạng Tiled với biểu tượng cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,965
Được Like
11,302
Tiled postbit with icons - Postbit dạng Tiled với biểu tượng cho XenForo 2

Thêm vào extra.less:

Mã:
.message-userExtras {
    display: flex;
    flex-wrap: wrap;

    & .pairs.pairs--justified {
        margin: 2px auto;
        padding: 2px;
        display: grid;
        text-align: center;
        width: 31%;
        border: 1px solid @xf-borderColor;
        border-radius: 2px;
        background: @xf-contentBg;
        &:first-child {
            min-width: 100%;
        }

        &> dt {
            font-size: 0;
            margin-right: 0;
        }

        &> dd {
            text-align: center;
        }
        & dt:before {
            .m-faBase();
            font-size: 13px;
        }
        &:nth-child(1) dt {
            .m-faBefore(@fa-var-calendar-alt);
        }
        &:nth-child(2) dt {
            .m-faBefore(@fa-var-comments-alt);
        }
        &:nth-child(3) dt {
            .m-faBefore(@fa-var-heart);
        }
        &:nth-child(4) dt {
            .m-faBefore(@fa-var-trophy);
        }
    }
}

1.png

Mã:
.message-userExtras {
    display: flex;

    & .pairs.pairs--justified {
        margin: 2px;
        padding: 2px;
        display: grid;
        text-align: center;
        width: 100% / 3;
        border: 1px solid @xf-borderColor;
        border-radius: 2px;
        background: @xf-contentBg;

        &> dt {
            font-size: 0;
            margin-right: 0;
        }

        &> dd {
            text-align: center;
        }
        & dt:before {
            .m-faBase();
            font-size: 13px;
        }
        &:nth-child(1) dt {
            .m-faBefore(@fa-var-comments-alt);
        }
        &:nth-child(2) dt {
            .m-faBefore(@fa-var-heart);
        }
        &:nth-child(3) dt {
            .m-faBefore(@fa-var-trophy);
        }
    }

}

2.png

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


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom