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
803
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
663
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
566
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
533
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
680
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
837
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
952
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
1K
AdminAdmin is verified member.
Admin
Admin
Replies
0
Views
731
AdminAdmin is verified member.
Admin
Back
Top