XF 2.1 How to import forum categories into a sidebar?

akhan

akhan

Active member
Is it possible to put forum categories in a sidebar as in XFMG and XFRM?
Classic forum view will be changed. It will be less complicated for users.
The remaining part can be filled with new forum posts, new images and new resources.
This way it will look more like a home page.

189813
 
Sort by date Sort by votes
You'd need an add-on to automatically do it, not sure if one exists.

You can do a basic HTML widget though:

Code: 
<ol class="categoryList is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 1
            </a>
        </div>
        <ol class="categoryList is-active" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

<ol class="categoryList is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 2
            </a>
        </div>
        <ol class="categoryList is-active" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

Result was:
190033

or:

Code: 
<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 1
            </a>
        </div>
        <ol class="categoryList toggleTarget" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 2
            </a>
        </div>
        <ol class="categoryList toggleTarget" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

190034
 
Upvote 0 Downvote
Russ said:
You'd need an add-on to automatically do it, not sure if one exists.

You can do a basic HTML widget though:

Code: 
<ol class="categoryList is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 1
            </a>
        </div>
        <ol class="categoryList is-active" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

<ol class="categoryList is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 2
            </a>
        </div>
        <ol class="categoryList is-active" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

Result was:
View attachment 190033

or:

Code: 
<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 1
            </a>
        </div>
        <ol class="categoryList toggleTarget" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

<ol class="categoryList toggleTarget is-active">
    <li class="categoryList-item">
        <div class="categoryList-itemRow">
            <a class="categoryList-toggler" data-xf-click="toggle" data-target="< :up :next" role="button" tabindex="0" aria-label="Toggle expanded"></a>
            <a href="CATEGORYLINKHERE" class="categoryList-link">
                Category 2
            </a>
        </div>
        <ol class="categoryList toggleTarget" tabindex="-1" style="">
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #1
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">

                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #2
                    </a>
                </div>

            </li>
            <li class="categoryList-item">
                <div class="categoryList-itemRow">
                    <a href="NODELINKHERE" class="categoryList-link">
                        Node #3
                    </a>
            </li>
        </ol>
    </li>
</ol>

View attachment 190034
Click to expand...
@Russ
Thanks for help.this is useful to me
How can we show only in a category that we have determined?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

questlot
  • Question Question
XF 2.2 How to Import categories content to a new forum
Replies
1
Views
655
TPerry
TPerry
R
  • Solved
XF 2.1 How do I get the thread title in a sidebar widget?
Replies
2
Views
883
rhodes
R
A
  • Question Question
How to import from my old vbulletin forum ?
Replies
2
Views
999
kirbyrandle
K
Damien Alexander
  • Question Question
XF 2.1 How to Import from IPS (2 Questions)
Replies
2
Views
652
Damien Alexander
Damien Alexander
shimspedy
XF 2.0 need help how to add a sidebar on topic view
Replies
2
Views
497
shimspedy
shimspedy
Top Bottom