Subforums on 3 columns

[wenkk]

Hey, anyone got a tutorial on how can I arrange my subforums on 3 columns? [IPS 4.7.x]

Like this: 

Thank you so much!

[The Grim Reaper]

Hello, i'm sorry for this delayed response of mine. Search for this into your template forum - index - forum and replace this :

   {{if $forum->hasChildren()}}
                <ul class="ipsDataItem_subList ipsList_inline">
                    {{foreach $forum->children() as $subforum}}
                        <li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
                            <a href="{$subforum->url()}">{{if \IPS\forums\Topic::containerUnread( $subforum )}}<span class='ipsItemStatus ipsItemStatus_tiny {{if !\IPS\forums\Topic::containerUnread( $subforum ) && !$subforum->redirect_on}}ipsItemStatus_read{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;{{endif}}{$subforum->_title}</a>
                        </li>
                    {{endforeach}}
                </ul>
            {{endif}}
            {{if $forum->description}}
                {template="richText" group="global" app="core" location="global" params="$forum->description, array('ipsDataItem_meta', 'ipsContained')"}
            {{endif}}

With this :

 {{if $forum->description}}
                {template="richText" group="global" app="core" location="global" params="$forum->description, array('ipsDataItem_meta', 'ipsContained')"}
            {{endif}}
            {{if $forum->hasChildren()}}
                <ul class="ipsDataItem_subList ipsList_inline">
                    {{foreach $forum->children() as $subforum}}
                        <li class="{{if \IPS\forums\Topic::containerUnread( $subforum )}}ipsDataItem_unread{{endif}}">
                            <a href="{$subforum->url()}">{$subforum->_title}</a>
                        </li>
                    {{endforeach}}
                </ul>
            {{endif}}

Add into your custom.css this :

.ipsApp .cForumRow .ipsDataItem_subList {
    padding: 0 !important;
    background-image: none !important;
    display: grid;
    grid-template-columns: repeat(3, 33%);
}
 
.ipsApp .cForumRow .ipsDataItem_subList li:after {
    content: '';
    font-family: "FontAwesome";
    /* here you put what you want to appear before a subforum
 */
}
 
.ipsApp .cForumRow .ipsDataItem_subList li.ipsDataItem_unread:after {
    content: '';
    font-family: "FontAwesome";
    /* here you put what you want to appear before an unread subforum */
}
 
.ipsDataItem_subList li a:after {
    content: '';
}

 

[The Grim Reaper]

The question(s) in this support topic have been answered and the topic author has resolved their issue. This topic is now closed. If you have other questions, please open a new topic.