Tutorial 2x Article Forum Symmetrical Grid Layout - Bài viết diễn đàn theo bố cục lưới đối xứng cho XenForo 2.2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,818
Được Like
11,109
Article Forum Symmetrical Grid Layout - Bài viết diễn đàn theo bố cục lưới đối xứng cho XenForo 2.2

Theo kiểu mặc định, diễn đàn bài viết ở chế độ xem trước có bố cục 1:2:2:4:4 về số lượng chủ đề (bài viết) được hiển thị trên mỗi hàng, như sau:

article-layout-default.png

Điều này có thể được thay đổi bằng cách thêm một số CSS tùy chỉnh vào template extra.less.

Equal Grid - Floating Footer​

Việc thêm code này sẽ tạo ra một bố cục lưới thống nhất với footer ở vị trí mặc định, nổi bên dưới nội dung trong mỗi bài viết:
Less:
.block.block--articles.block--previews .block-body .message--articlePreview
{
    margin-top: 0;

    &:nth-of-type(n)
    {
        grid-area: unset;

        & .articlePreview
        {
            &-main
            {
                flex-direction: column;
            }

            &-image
            {
                width: 100%;
            }

            &-title
            {
                font-size: @xf-fontSizeLarger;
            }

            &-content .bbWrapper:after
            {
                background: none;
            }

            &-meta
            {
                border-top: solid 1px @xf-borderColor;

                & .articlePreview-by
                {
                    display: none;
                }
            }
        }
    }
}

article-layout-grid.png

Equal Grid - Fixed Footer​

Sử dụng code này sẽ dẫn đến bố cục lưới bằng nhau với footer được cố định ở cuối mỗi bài viết:
Less:
@media (min-width: @xf-responsiveMedium)
{
    @__ctaArticleFooter: 40px;

    .block.block--articles.block--previews .block-body .message--articlePreview
    {
        margin-top: 0;

        &:nth-of-type(n)
        {
            grid-area: unset;

            & .articlePreview
            {
                &-main
                {
                    flex-direction: column;
                    min-height: 100%;
                    padding-bottom: @__ctaArticleFooter;
                }

                &-image
                {
                    width: 100%;
                }

                &-title
                {
                    font-size: @xf-fontSizeLarger;
                }

                &-content
                {
                    margin-bottom: -@__ctaArticleFooter;
                }

                &-footer
                {
                    position: relative;
                    bottom: @__ctaArticleFooter;
                }

                &-meta
                {
                    border-top: solid 1px @xf-borderColor;

                    & .articlePreview-by
                    {
                        display: none;
                    }
                }
            }
        }
    }
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
    background: none;
}

article-layout-grid-fixed-footer.png

Các node cụ thể​

Để chỉ áp dụng bố cục cho một node cụ thể, hãy bọc code như vậy, thay thế code 2 bằng ID node:
Less:
[data-container-key="node-2"]
{
    ...
}

Để áp dụng nó cho nhiều node, hãy thêm các ID node bổ sung được phân tách bằng dấu phẩy như sau:
Less:
[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
    ...
}

Ở đây bạn có thể thấy bố cục được áp dụng cho một node chứ không phải node khác.

specific-node-grid-layout.png


specific-node-default-layout.png

Tất nhiên, kiểu dáng có thể được điều chỉnh để phù hợp với nhu cầu cụ thể của bạn.

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


Nguồn: xenforo.com​
 

donquaca

Thượng Đế
Tham gia
04/12/2020
Bài viết
47
Được Like
3
Cho mình hỏi làm sao có được cái bố cục này vậy :=o
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,818
Được Like
11,109
Trên XenForo 2, khi bạn tạo Node (box) mới sẽ có mục để bạn chọn

screenshot_1615891125.png


Trong đó sẽ có mục Display style, bạn chọn như hình là được

screenshot_1615891175.png
 

donquaca

Thượng Đế
Tham gia
04/12/2020
Bài viết
47
Được Like
3
@PVS mình có thể sửa với những box đang hiện hữu k
 

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

XenForo 1 XenForo 2
Translate by PVS


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