Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Overview Updates (5) Reviews (3) Discussion
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.
 
Yes, it would be possible with custom CSS.

This tutorial is for article threads though and the code doesn't apply to forums.
 
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.
 
It works fine so you must not have followed the instructions or something else is involved.
 
Luca_ said:
is already something, thanks! is there a way to enter any categories?
Click to expand...
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.
 
Mendalla said:
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.
Click to expand...
yes thx i try
 
Sorry I am being very dumb..

I have added the code in extra css
Code: 
@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"]
{
...
}
 
You can try utilising the js-threadListItem-<id> class in CSS targeting the thread ID.
 
Thank you. That worked! Placed in extra.less:
Code: 
.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...
 
You must log in or register to reply here.
Back
Top Bottom