How to make a tabbed widget xenforo 2

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

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

Admin
Replies
0
Views
1K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
816
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
673
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
583
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
545
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
691
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
850
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
972
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
1K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
746
AdminAdmin is verified member.
Admin
Back
Top