Appearance of subforums

[osmxnxn]

Hello, is it possible to display subforums as shown in the first screenshot. My forum is on the second screenshot, I was able to display subforums only in this way.

I would like to have the forum name first, then the arrow to the subforums, and only after that the description. You can see it on the first screenshot.

Thanks for understanding, I will be grateful for any answer.

 

[Russ]

Hello, it's a few steps:

Open the template node_list_forum

Find:

                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro template="forum_list" name="sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>

Copy and delete it.

Above (around line 70) find:

<xf:if is="$descriptionDisplay != 'none' && $node.description">

And paste what you found in the first step just above the line.

Last, add this to your extra.less:

#XF .node-subNodeFlatList
{
display: block !important;
    &:before
    {
        content: "";
        width: 13px;
        height: 5px;
        position: relative;
        top: -3px;
        margin-right: 3px;
        border-left: 1px solid @xf-borderColor;
        border-bottom: 1px solid @xf-borderColor;
        display: inline-block;
    }
    li
    {
        margin-right: @xf-paddingSmall;
        a
        {
            i
            {
                display: none !important;
            }
            &:after
            {
                content: ", ";
                float: right;
            }
        }       
        &:last-of-type a:after
        {
            display: none;
        }
    }
}

Should help... it uses CSS to achieve the little arrow looking thing.

 

[osmxnxn]

Thank you so much. You're the best! It really works. Is it possible to display this in the mobile version of the forum? And is it possible to display subforums like this not only on the main page? I mean a triple nested forum where the second level forum also has subforums.

 

[Russ]

I updated my CSS. I think that should work now, it removes the .block--category and adds #XF along with also the display: block on the third line.

 

[osmxnxn]

Subforums are now displayed within forums and it's great. However, on the mobile version the subforums do not display. If this is difficult to do, I'm willing to give up on it. Please tell me about it. Thanks.

 

[Russ]

Did you add in the new "display: block !important;" line from my CSS? I looked at your site and it's not showing that CSS loading at all. That's the part that will keep it on mobile (line 3 from my CSS)

 

[osmxnxn]

Yeah, I added it. That line is there. Here's a screenshot.

 

[Russ]

Whoops! Add this into extra.less:

.node-subNodesFlat { display: block !important; }

That should adjust it.

 

[osmxnxn]

It all worked out, thank you very much. There's just one more thing to do. I tried to do it myself, but it didn't work.

Is it possible to make the second line and the following lines under the first line and not under the arrow?

 

[Russ]

Replace all of the CSS I gave you above with this:

.node-subNodesFlat
{
    display: block !important;
    .node-subNodeFlatList
    {
        padding-left: 20px;
        position: relative;
        &:before
        {
            content: "";
            width: 13px;
            height: 5px;
            position: absolute;
            top: 5px;
            left: 0;
            border-left: 1px solid @xf-borderColor;
            border-bottom: 1px solid @xf-borderColor;
            display: inline-block;
        }
        li
        {
            margin-right: @xf-paddingSmall;
            a
            {
                i
                {
                    display: none !important;
                }
                &:after
                {
                    content: ", ";
                    float: right;
                }
            }        
            &:last-of-type a:after
            {
                display: none;
            }
        }
    }
}

Should work.

And then if you want the description pushed over too, add this:

.node-description {
    padding-left: 20px;
}

 

[osmxnxn]

Thank you everything works! You are the best!