Article Forum Symmetrical Grid Layout

[Paul B]

To clarify, do you want the entire article node with all threads in it, or a specific thread in an article node?

If the former, you can use something like:

[data-container-key="node-3"]
{
    .message
    {
        background-color: orange;
    }
}

Change the node ID to suit.

 

[Aaron1981]

To clarify, do you want the entire article node with all threads in it, or a specific thread in an article node?

I wanted the second option. But now I'm having a problem even with your fixed footer code when I try to apply it just to one node. The specified node footer doesn't change for some reason. Not sure what I'm missing but I'm trying to troubleshoot.

Just to be clear... here's my code:

[data-container-key="node-26"]
{

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

}

I'll play around with the color thing if I can get the footer part working.

 

[Luca_]

Thanks, I'm keeping it in use on my project. However, it is absurd that there is no way to create a system of categories and subcategories within the ARTICLES page.

 

[TPerry]

Thanks, I'm keeping it in use on my project. However, it is absurd that there is no way to create a system of categories and subcategories within the ARTICLES page.

Simple limitation of a limited offering of a core feature. Give it time... maybe a 3rd party provider will decide to extend it. It may take a few hundred votes on a submitted suggestion (and a decade of time) to get there though in core.
Unluckily there are many base functions of XenForo that are in sore need of being extended.

 

[Aaron1981]

What I recommend is that the article grid become a core feature, and have it already set up with a user interface with buttons click to modify the options. That way we don't have to fool around with code unless it's for some real technical customization.

 

[Luca_]

Simple limitation of a limited offering of a core feature. Give it time... maybe a 3rd party provider will decide to extend it. It may take a few hundred votes on a submitted suggestion (and a decade of time) to get there though in core.
Unluckily there are many base functions of XenForo that are in sore need of being extended.

I think that the articles category makes no sense to exist as it is structured now. You basically have a "forum" with threads lined up. I reuse WordPress... but I don't think doing things halfway makes much sense.

 

[PrettyPixels]

I'm trying to display articles two articles per row using the code posted by @BassMan. I've added the additional code in my extra.less before the Equal Grid - Fixed Footer code like below, but I'm still seeing four per row. I've tested this on the default style on 2.2 and am getting the same results, so I know it's not a style conflict.

Can someone please take a look and see if I'm doing something wrong? Any help is greatly appreciated!

/** code added to make two columns **/

.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body
{
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}

/** original code for Equal Grid - Fixed Footer **/

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

 

[BassMan]

I just checked and tested your code. It shows 2 columns for me.

Make sure you are editing the right style or remove the code and try again.

 

[PrettyPixels]

Thank you so much for looking into this, @BassMan! I disabled all my add-ons and re-enabled them one by one. It looks like the conflict is with the Thread Filter add-on from @AddonsLab. I'll reach out to their support team to see if we can resolve this.