How to make a tabbed widget

How to make a tabbed widget

SkellyX

Member
@DL6 I'd like to make it staff online and members online two seperate tabs but staff online is part of members online. How can I do this? Thanks.
 

Creaky

Active member
I'm replacing the text links with fontawseome icons with this
Code:
<span class="tabs-tab" id="widget key 3" role="tab"><i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i></span>
Is there a way to get a tooltip so when hovering over each icon it shows Latest Posts or whatever the tab is called?
 

Gemma

Well-known member
Please can you share full code for this?
Only thing that is different from the example in the overview is that instead of using (or new posts, profile posts etc)
Code:
 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Latest threads</a>
It is using title=" " and data-xf-init="tooltip" and replacing the text link with FontAwesome icons, for example
Code:
<a title="Latest Threads" href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        data-xf-init="tooltip"
                        aria-controls="tab_lastest_threads"><i class="fas fa-comment-alt"></i></a>
Individual styles may need some css adjustments to display properly
 

rdn

Well-known member
Is it possible to Lazy Load non selected tab?
Only loads the content of the widget when selected by the user.

Thanks!
 
This is a great tutorial!

How can I style the tab background and font to be the same as my normal block titles? I'm not using this in a sidebar, so I'd like it to look similar to the other center blocks. THANKS!

Tabs look like this

tab1.JPG

Would like tabs to look like this, color and font.

tab2.JPG
 

picom

Active member
Hi,

Can any one assist, please?

I want to restrict Tab views to certain members only. That is, I don't want the TAb to even display to certain members so its completely hidden from them, only viewable by those I choose.

Screenshot - 2019-11-07T203412.000.png

I want to remove feedback and watched threads from guests views, so they can even click on the Tab as they wont see it.

Thanks
 
Top