How to make a tabbed widget xenforo 2

  • Thread starter Thread starter AdminAdmin is verified member.
  • Start date Start date
A

AdminAdmin is verified member.

Well-Known Member
Staff member
Administrator
First you need to configure the widgets you want in tabs without position (Write down the widgets keys)
Now create a widget html and in the template put something like this

HTML:
<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Latest threads</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_post"
                        role="tab">New posts</a>
                 <a href="{{ link('whats-new/profile-posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_profile_post"
                        role="tab">Latest profile posts</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="tab_lastest_threads">
                 <xf:widget key="tab_lastest_threads" />
             </li> 
             <li role="tabpanel" aria-labelledby="tab_lastest_post">
                 <xf:widget key="tab_lastest_post" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_lastest_profile_post">
                 <xf:widget key="tab_lastest_profile_post" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

Now just create 3 widget and configure the widget key, title, positions, check the option advanced mode option and save
The result should be something like this

brNdyzY.gif


Good luck!
 

Facebook Comments

Similar threads

A
Replies
0
Views
1K
AdminAdmin is verified member.
A
A
Replies
0
Views
794
AdminAdmin is verified member.
A
A
Replies
0
Views
656
AdminAdmin is verified member.
A
A
Replies
0
Views
556
AdminAdmin is verified member.
A
A
Replies
0
Views
522
AdminAdmin is verified member.
A
A
Replies
0
Views
671
AdminAdmin is verified member.
A
A
Replies
0
Views
828
AdminAdmin is verified member.
A
A
Replies
0
Views
939
AdminAdmin is verified member.
A
A
Replies
0
Views
1K
AdminAdmin is verified member.
A
A
Replies
0
Views
722
AdminAdmin is verified member.
A
Back
Top