In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so:

323349588f642.png


This can be changed by adding some custom CSS to the extra.less template.

Equal Grid - Floating Footer
Adding this code will produce a uniform grid layout with the footer at the default location, floating below the content in each article:
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;
                }
            }
        }
    }
}

Equal Grid - Fixed Footer
Using this code will result in an equal grid layout with the footer fixed to the bottom of each article:
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;
}

Specific Nodes
To only apply the layout to a specific node, wrap the code like so, replacing the 2 with the node ID:
Less:
[data-container-key="node-2"]
{
    ...
}
To apply it to multiple nodes, add additional node IDs comma separated like this:
Less:
[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
    ...
}
Here you can see the layout is applied to one node but not the other.

The styling can of course be adjusted to suit your particular needs.
If you found this tutorial useful, donations of positive emojis are gladly received.
Author
shimmer
Views
556
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from shimmer

Top