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
15,191
Được Like
11,583
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
15,191
Được Like
11,583
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

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