• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

How to make a tabbed widget xenforo 2

Admin

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
Thread starter Title Forum Replies Date
Admin Yilmaz -Tabbed (AJAX) Advanced Forum Stats Add-ons 0
Admin [CJ] Staff online widget vB5 Add-ons 0
Admin Yilmaz - Recent Visitors of the Profiles (vb5.6.x widget) Add-ons 0
Admin [EAE Add-ons] Thread preview widget Xenforo 0
Admin Resource Manger Stats Widget Xenforo 0
Admin [OzzModz] Attachment Stats Widget Xenforo 0
Admin Members online widget permission xenforo 2 Xenforo 0
Admin XFMG media widget type icons xenforo 2 Xenforo 0
Admin [AwesomeForo] - Node List widget xenforo 2 Xenforo 0
Admin [SC] TeamSpeak Widget in SideBar 1.1.0 xenforo 2.x Xenforo 0
Smobi Share Widget Framework Thread Thumbnails giống Tinh Tế Xenforo 0
Admin Widget: CMS Most Viewed Articles This Week Vbb tutorial 0
Admin Thủ thuật kích hoạt lại tính năng gắn widget ra màn hình khóa của Android 4.4 Thủ thuật ĐTDĐ 0
Admin vBSocial.com LifeStream Widget - Combine all feeds into one Add-ons 0
Admin [ozzy47] Homeland Security Terror Alert Widget Vbb tutorial 0
Admin [WIDGET] Users Registered This Week Vbb tutorial 0
Myshare Share [XtWidget] Like-Dislike widget Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Kickstarter/IndieGoGo Widget BBcode Vbulletin 0
Admin Hướng dẫn hiển thị chuyên mục ra index khi theme không hỗ trợ Widget Wordpress 0
Admin [Plugin] Authors widget Wordpress 0
Admin Widget Framework for XenForo Xenforo 0
Admin [XtWidget] Like-Dislike widget Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Hướng dẫn Tạo alexa widget Thảo luận SEO 0
Admin Fix [E_WARNING] inet_pton(): Unrecognized address unknown xenforo 2.2.10 Xenforo 0
V Giới hạn dung lượng ảnh tải lên trong Xenforo 2 Xenforo 0
V Hướng dẫn tạo logo giống Xenforo Xenforo 4
V Help Tiện ích thống kê bài viết cho Xenforo 2 Xenforo 0
hungdanchoi5 Forum Xenforo Thảo luận chung 1
Admin Your profile xenforo Xenforo 0
Admin Member Watch xenforo Xenforo 0
@kiss@ xin giúp đỡ về xenforo Hỗ trợ sử dụng diễn đàn 1
Admin Pro Black Xenforo 2 Xenforo 0
olalavui Hướng dẫn Enable User-ID tracking in Google Analytics for Xenforo Xenforo 3
Admin A2soft-pics - (A2)Upload Postimages picture xenforo 2 Xenforo 0
Admin Disable email and password edit xenforo 2 Xenforo 0
Admin Object Storage Adapter xenforo 2 Xenforo 0
cuongpro9x Share Tích hợp toàn bộ sticker xịn của zalo vào xenforo Xenforo 0
Admin Xenforo 2 - Random Ads Code Xenforo 0
Admin Quick Theme Switcher xenforo 2 Xenforo 0
Admin [AP] Member Bars xenforo 2 Xenforo 0
Admin Scroll Progress Xenforo 2 Xenforo 0
Admin Mocha Style xenforo 2 Xenforo 0
Admin German language - translation for XenForo 2.2.1 Xenforo 0
Admin [MMO] Navigation tab icons xenforo 2 Xenforo 0
Admin Hide Sidebar xenforo 2 Xenforo 0
Admin Media Gallery Advertisement Positions Xenforo 2 Xenforo 0
Admin Hướng dẫn xóa sổ hoàn toàn ký tự Nokia S40 cho Xenforo 2 - Remove all nokia s40 characters for xenforo 2 Xenforo 0
Admin Default Style Grey xenforo 1.x Xenforo 0
Admin Thread Prefix Colors xenforo 2 Xenforo 0
Admin Customising the layout with custom user fields xenforo 2 Xenforo 0

Similar threads

New posts New threads New resources

Back
Top