Only show Fontawesome Icon in tab

[lazarote]

Hi everyone, I have a question, I am currently using [XFA] Forum List Tabs 2.1.0 to split my forum sections, my result so far:

PC View:

Responsive:

The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/

But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?

my test enviroment:

The template code:

<xf:if is="$xf.options.j_fl_enable">
    <xf:foreach loop="$xf.options.forumlist_tabs" value="$tab">
        <xf:if is="$tab.id is not empty">
            <xf:css>
                .content{$tab.id}{
                    display:none;
                }
                input#tab{$tab.id} {
                    display: none;
                }
                #tab{$tab.id}:checked ~ .content{$tab.id} {
                      display: block !important;
                    padding: 20px 0 0;
                }
            </xf:css>
            <input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> >
            <label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
        </xf:if>
    </xf:foreach>

<xf:js>
$("input[name='tabs']").change(function(){
    var tabid = $('input[type=radio][name=tabs]:checked').attr('id');
    XF.Cookie.set('tabid', tabid); 
});

$(window).on('load', function()
{
    var tabid = XF.Cookie.get('tabid');
    var inputid = 'input[type=radio][name=tabs][id='+tabid+']';
    $(inputid).prop("checked", true);
});
</xf:js>
<xf:css src="j_tabs_forum_list.less" />
</xf:if>

I think it could be done with this piece of code

<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> ><label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>

 

[Fenrir]

Javascript has nothing to do with it. You need to change the layout of the template a little. Then add LESS code with xenforo breakpoints like @xf-responsiveMedium and for FA icons you can just use .m-faBase();

 

[Fenrir]

Hi everyone, I have a question, I am currently using [XFA] Forum List Tabs 2.1.0 to split my forum sections, my result so far:

PC View:

View attachment 27396

Responsive:

View attachment 27397


The point is that the addon uses a lot of js and a library to serve Fontawesome (it doesn't make sense because xenforo have it by default) so I want to change for this other simpler addon: https://enxf.net/resources/j-forum-list-tabs.2888/

But I think it's TOO simple, I'm trying to make the responsive version only show the icons, any ideas?

my test enviroment:

View attachment 27398

The template code:

<xf:if is="$xf.options.j_fl_enable">
    <xf:foreach loop="$xf.options.forumlist_tabs" value="$tab">
        <xf:if is="$tab.id is not empty">
            <xf:css>
                .content{$tab.id}{
                    display:none;
                }
                input#tab{$tab.id} {
                    display: none;
                }
                #tab{$tab.id}:checked ~ .content{$tab.id} {
                      display: block !important;
                    padding: 20px 0 0;
                }
            </xf:css>
            <input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> >
            <label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>
        </xf:if>
    </xf:foreach>

<xf:js>
$("input[name='tabs']").change(function(){
    var tabid = $('input[type=radio][name=tabs]:checked').attr('id');
    XF.Cookie.set('tabid', tabid);
});

$(window).on('load', function()
{
    var tabid = XF.Cookie.get('tabid');
    var inputid = 'input[type=radio][name=tabs][id='+tabid+']';
    $(inputid).prop("checked", true);
});
</xf:js>
<xf:css src="j_tabs_forum_list.less" />
</xf:if>

I think it could be done with this piece of code

<input id="tab{$tab.id}" type="radio" name="tabs" <xf:if is="$xf.options.j_tab_default == $tab.id">checked</xf:if> ><label for="tab{$tab.id}" class="button">{$tab.name|raw}</label>

lazaroteHey! How is it going? Understood or need help?

 

[lazarote]

Hey! How is it going? Understood or need help?

notwonderfulI couldn't get it to work on localhost, I'm currently using the XFA addon, I'd like to use the other one since it loads faster, but I couldn't even center the tabs. I have noticed that there is also a small delay when the forum index is loaded