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]

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:

​

Đ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:

.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;
                }
            }
        }
    }
}

​

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:

@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;
}

​

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:

[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:

[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.

​

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]

Cho mình hỏi làm sao có được cái bố cục này vậy

 

[PVS]

Trên XenForo 2, khi bạn tạo Node (box) mới sẽ có mục để bạn chọn

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

 

[sukoro]

Trên XenForo 2, khi bạn tạo Node (box) mới sẽ có mục để bạn chọn

View attachment 43181

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

View attachment 43182

Của mình nó không có cái này để họn luôn

 

[PVS]

Của mình nó không có cái này để họn luôn

Xen 2.2.x trở lên mới có nha.

 

[donquaca]

Trên XenForo 2, khi bạn tạo Node (box) mới sẽ có mục để bạn chọn

View attachment 43181

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

View attachment 43182

Đa tạ admin

 

[donquaca]

@PVS mình có thể sửa với những box đang hiện hữu k

 

[redbull]

Ae ai làm ok ko, mình thử mãi ko đc luôn, đã chọn type Forum(Article) và bật Preview. Haiz