osmxnxn

Customer
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.
Снимок.JPG

Снимок2.JPG

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.
 
Solution
Replace all of the CSS I gave you above with this:

Code:
.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...
Hello, it's a few steps:

Open the template node_list_forum

Find:

Code:
                <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:

Code:
<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:

Code:
#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.
 
Last edited:
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.
 
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.
 
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.
Screenshot_1.jpg
История персонажа Лестера Креста из GTA 5 0-29 screenshot_2024-02-28_22-45-00.jpg
 
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)
 
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?


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

Code:
.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:

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

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back