Article Forum Symmetrical Grid Layout

[beerForo]

What's a main forum?

 

[AndreaMarucci]

Sorry I mean for the forum home, not for an article forum

 

[beerForo]

Ah ok.

 

[beerForo]

@Lawrence does your add-on still do this?

 

[beerForo]

@Lawrence does you radd-on still do this?

Unmaintained - [EAE Add-ons] Thread preview widget

This add-on adds a widget that will display new threads, or threads with new posts, within an admin selected Page node. The list of threads are displayed in article format and can be set to be displayed above the Page node content, or below. The...

xenforo.com

 

[jromaine]

Is it possible to have something like this for the forum nodes?

Im using Xenforo as an LMS and had a new student say "I cant find the training, I logged in and there's just a forum".

I need to make it look less like a forum and more like a learning hub.

 

[Paul B]

Yes, it would be possible with custom CSS.

This tutorial is for article threads though and the code doesn't apply to forums.

 

[Alternadiv]

Somehow, pasting the 'equal grid, fixed footer' code into extra.less did nothing. This is with the default XF style and no add-ons enabled. I'm confused.

 

[Paul B]

It works fine so you must not have followed the instructions or something else is involved.

 

[Luca_]

is already something, thanks! is there a way to enter any categories?

 

[Mendalla]

is already something, thanks! is there a way to enter any categories?

Custom field(s) and then some template work to have it/them show. I did this when I was looking at a simple article forum to move some of my fiction to my own site (due to some dissatisfaction with the site I normally post it on). Not as nice as you'd get with Bob but workable. Never took it live, though I might still have it in my dev if you have questions.

 

[Luca_]

Custom field(s) and then some template work to have it/them show. I did this when I was looking at a simple article forum to move some of my fiction to my own site (due to some dissatisfaction with the site I normally post it on). Not as nice as you'd get with Bob but workable. Never took it live, though I might still have it in my dev if you have questions.

yes thx i try

 

[jromaine]

@Brogan I'd love to have something like this for actual forum nodes, would that be possible?

 

[Paul B]

Probably but it's out of scope for this guide.

 

[Brad P]

Sorry I am being very dumb..

I have added the code in extra css

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

but where do I add the code to allow it to just do that node only?

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"]
{
...
}

 

[Paul B]

Just as the text explains, wrap the code in that.

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

 

[Brad P]

see I'm dump... but thank you

 

[Aaron1981]

How do you change the background color for an individual article node?

 

[Paul B]

You can try utilising the js-threadListItem-<id> class in CSS targeting the thread ID.

 

[Aaron1981]

Thank you. That worked! Placed in extra.less:

.js-threadListItem-26
{
background: green;
}

The 26 part is my node ID.

The only issue now is that the node color only shows up when the forum type is General Discussion but not when it's set to Articles. Any advice on that would be much appreciated...