Hướng dẫn ẩn (hiện) thông tin thành viên bằng CSS

[PVS]

Theo mặc định của XenForo thì thông tin thành viên sẽ hiển thị ra tất cả đối với người dùng . Tuy nhiên, để thông tin được gọn gàng hơn thì bài viết này, bài viết này sẽ hướng dẫn bạn thu gọn thông tin này lại, khi cần ta chỉ cần rê chuột vào thì toàn bộ thông tin sẽ hiển thị ra.

​

Để làm được điều này rất đơn giản. Bạn chỉ cần vào : Admincp -> Templates -> thêm đoạn này vào cuối tem EXTRA.css

.messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    html .messageUserBlock .extraUserInfo
    {
        opacity: 1;
        height: auto;
        transition: none;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        height: auto;
    }
}
</xen:if>

Oke, bây giờ bạn F5 lại trang để hưởng thành quả nhé! Chúc các bạn thành công!

Nguồn: itonline.vn​