Tutorial 2x Cách chỉnh cho widget Thống kê diễn đàn nằm ngang dưới chân forum

[Blue]

Cách làm rất đơn giản:

1. Đổi vị trí hiển thị của widget.
check vào Forum list: Below nodes

2. Dán đoạn css này vào template extra.css của giao diện bạn đang dùng

.p-body-content [data-widget-key="forum_overview_forum_statistics"] {
    .block-row:before, .block-row:after {
        display: none;
    }
    .block-body.block-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background: #0f578a;
        padding: 10px;
        padding-bottom: 0;
        border-radius: 8px;

        dl.pairs {
            width: 49%;
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            column-gap: 10px;
            align-items: center;
            text-align: left;
            position: relative;
            margin-bottom: 10px;

            @media (min-width: 768px) {
                width: 24%;
            }

            &::before {
                content: "";
                grid-row: 1 / span 2;
                grid-column: 1;
                align-self: center;
                font-size: 26px;
                color: #2196F3;
            }

            dt {
                grid-column: 2;
                font-size: 14px;
                color: #666;
                margin: 0;
                text-align: right;
            }

            dd {
                grid-column: 2;
                font-size: 16px;
                font-weight: bold;
                margin: 0;
                color: #000;

                a.username {
                    font-size: 16px;
                    font-weight: 500;
                    color: #1976D2;
                }
            }
        }

        .count--threads:before {
            .m-faIcon(@fa-var-comment-alt);
        }

        .count--messages:before {
            .m-faIcon(@fa-var-comments);
        }

        .count--users::before {
            .m-faIcon(@fa-var-users);
        }

        dl:not(.count--threads):not(.count--messages):not(.count--users)::before {
            .m-faIcon(@fa-var-user);
        }
    }

}

Lưu ý: Để tránh lỗi, css này sẽ không có tác dụng ở sidebar