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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
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.

64c1229273075971a3a135a63f92f609.gif

Để 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
Mã:
.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​
 
  • Like
Reactions: THB

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom