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
801
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
660
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
560
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
526
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
675
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
833
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
944
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
1K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
725
AdminAdmin is verified member.
Admin
Back
Top