Xenforo Article Forum Symmetrical Grid Layout

[Dr.Pavlov]

Compatible XF 2.x versions 2.2

В стиле по умолчанию форум статей в режиме предварительного просмотра имеет макет 1: 2: 2: 4: 4

Это можно изменить, добавив некоторый собственный CSS в шаблон extra.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;
                }
            }
        }
    }
}

Использование этого кода приведет к одинаковому макету сетки с нижним колонтитулом, прикрепленным к нижней части каждой статьи:

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

Чтобы применить макет только к определенному узлу, оберните код следующим образом, заменив 2 идентификатором узла:

[data-container-key="node-2"]
{
    ...
}

Чтобы применить его к нескольким узлам, добавьте идентификаторы дополнительных узлов через запятую следующим образом:

[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
    ...
}