How to make a tabbed widget

How to make a tabbed widget

imno007

Well-known member
Alright, problem partially solved. I deleted the old new_threads widget and created a new one. Named it exactly the same, same settings, so I'm not seeing any difference, but now the tabbed widget is displaying without widget titles in Xenforo and all styles EXCEPT the UI.X ones. Not sure what the deal is there. It's always something. :confused:
 

DL6

Well-known member
Alright, problem partially solved. I deleted the old new_threads widget and created a new one. Named it exactly the same, same settings, so I'm not seeing any difference, but now the tabbed widget is displaying without widget titles in Xenforo and all styles EXCEPT the UI.X ones. Not sure what the deal is there. It's always something. :confused:
I use this to hide the title of the widget
CSS:
.widget--tab .block-minorHeader {display:none;}
I'm not sure why it does not work with UI.X styles
Wondering if I can add @DL6

1- most messages
2- Staff online
3- Newest members

Thanks in advance
Yes, you can add any widget, you just need to know the key you assigned to those widgets.
 

imno007

Well-known member
I use this to hide the title of the widget
CSS:
.widget--tab .block-minorHeader {display:none;}
Yeah, I figured that should have done the trick, but it's not working on any of my UI.X styles, for some reason.
 

S Thomas

Well-known member
Try adding an !important after none. If that does not work, you will have to figure out what is displaying the title.
 

DL6

Well-known member
Yeah, I figured that should have done the trick, but it's not working on any of my UI.X styles, for some reason.
Try replacing it with this
CSS:
.widget--tab .block[data-widget-id] .block-minorHeader {display: none;}
 

Escobar

Active member
does not show for me on sidebar any idea what could be causing it? also not showing on the default theme
 

ALMUSA

Well-known member
I use this to hide the title of the widget
CSS:
.widget--tab .block-minorHeader {display:none;}
I'm not sure why it does not work with UI.X styles

Yes, you can add any widget, you just need to know the key you assigned to those widgets.
Staff online is actually part of members online I could not make it staff online only. Most messages widget is not part of the widget list. Any idea how to make both widgets?
 

DL6

Well-known member
Staff online is actually part of members online I could not make it staff online only. Most messages widget is not part of the widget list. Any idea how to make both widgets?
You can hide the list for regular members online with css
CSS:
.block[data-widget-section="onlineNow"][data-widget-key="widget_key"] {
    display: none;
}
For most messages use Membert stat Widget and select most messages
1522512925613.png
1522513025457.png
 

imno007

Well-known member
Try replacing it with this
CSS:
.widget--tab .block[data-widget-id] .block-minorHeader {display: none;}
Okay, really sorry to have to bother you with this again, but earlier I had mentioned that my non-UI.X styles were hiding all of the widget titles except Latest Threads, and I thought I had some how fixed it by deleting that new_threads widget and creating another one. Guess I should have known that made no sense. I've just realized that the real problem is that I had the display style set to full. So the widget title doesn't show if you have it in simple view, but it does in full. Do you know how I might get rid of it also in full display? TIA
 

DL6

Well-known member
Okay, really sorry to have to bother you with this again, but earlier I had mentioned that my non-UI.X styles were hiding all of the widget titles except Latest Threads, and I thought I had some how fixed it by deleting that new_threads widget and creating another one. Guess I should have known that made no sense. I've just realized that the real problem is that I had the display style set to full. So the widget title doesn't show if you have it in simple view, but it does in full. Do you know how I might get rid of it also in full display? TIA
Add below
CSS:
.widget--tab .block[data-widget-id] .block-header {display: none;}
 

Wilouness

Active member
Is there a way to create a widget with a list of selected threads, i mean my selection of the entire forum displayed. I want to display this selected threads near the most viewed, most replied, most liked on the home page in the wonderfull tabbed widget that i use.

Thank you
 

Wilouness

Active member
And like i asked you once if you could find the solution with @ThemeHouse to merge the likes and loves reactions to display a real order in the "most-liked" widget it would be really really wonderfull and complete.
With your html widget well customized we absolutely don't need an addon to display the reals statistics of our boards.

Thank you very much
 

Cannabis Ape

Active member
Awesome!!

Works great and also thanks to @Mr Lucky I got it working what I wanted and that was to start with forum statistics first and then online.

I had that fixed but then members online keep being the active one till I found out what I had to change :)
 
I add this code and don't display
It's only display HTML

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>





Please help me
 

imno007

Well-known member
I add this code and don't display
It's only display HTML

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>





Please help me
Are those the actual names of the widgets you yourself created, or did you just copy and paste the example given?
 
Top