gregbtm

Customer
Hi there, Having a bit of trouble understanding the following - hoping someone can share a thought.

On the footer links to the left of my style (xenbase) - it looks like this.

1645148468036.png


When I check the code under the container template -

Code:
<footer class="p-footer" id="footer">
    <div class="p-footer-inner">

        <div class="p-footer-row">
            <xf:if contentcheck="true">
                <div class="p-footer-row-main">
                    <ul class="p-footer-linkList">
                    <xf:contentcheck>
                        <xf:if is="$xf.visitor.canChangeStyle()">
                            <li><a href="{{ link('misc/style') }}" data-xf-click="overlay"
                                data-xf-init="tooltip" title="{{ phrase('style_chooser')|for_attr }}" rel="nofollow">
                                <xf:fa icon="fa-paint-brush" /> {$xf.style.title}
                            </a></li>
                        </xf:if>
                        <xf:if is="$xf.visitor.canChangeLanguage()">
                            <li><a href="{{ link('misc/language') }}" data-xf-click="overlay"
                                data-xf-init="tooltip" title="{{ phrase('language_chooser')|for_attr }}" rel="nofollow">
                                <xf:fa icon="fa-globe" /> {$xf.language.title}</a></li>
                        </xf:if>
                    </xf:contentcheck>
                    </ul>
                </div>
            </xf:if>
            <div class="p-footer-row-opposite">
                <ul class="p-footer-linkList">
                    <xf:if is="$xf.visitor.canUseContactForm()">
                        <xf:if is="$xf.contactUrl">
                            <li><a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a></li>
                        </xf:if>
                    </xf:if>

                    <xf:if is="$xf.tosUrl">
                        <li><a href="{$xf.tosUrl}">{{ phrase('terms_and_rules') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.privacyPolicyUrl">
                        <li><a href="{$xf.privacyPolicyUrl}">{{ phrase('privacy_policy') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.helpPageCount">
                        <li><a href="{{ link('help') }}">{{ phrase('help') }}</a></li>
                    </xf:if>

                    <xf:if is="$xf.homePageUrl">
                        <li><a href="{$xf.homePageUrl}">{{ phrase('home') }}</a></li>
                    </xf:if>

                    <li><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}"><span aria-hidden="true"><xf:fa icon="fa-rss" /><span class="u-srOnly">{{ phrase('rss') }}</span></span></a></li>
                </ul>
            </div>
        </div>

        <xf:if contentcheck="true">
            <div class="p-footer-copyright">
            <xf:contentcheck>
                <xf:copyright />
                {{ phrase('extra_copyright') }}
            </xf:contentcheck>
            </div>
        </xf:if>

        <xf:if contentcheck="true">
            <div class="p-footer-debug">
            <xf:contentcheck>
                <xf:macro template="debug_macros" name="debug"
                    arg-controller="{$controller}"
                    arg-action="{$actionMethod}"
                    arg-template="{$template}" />
            </xf:contentcheck>
            </div>
        </xf:if>
    </div>
</footer>

You can see that <xf:fa icon="fa-globe" /> is there for languages, along with the paintbrush for style. Why doesn't this show? It doesn't appear to show on the demo of xenbase, either.

I'd personally like an icon for -

Style chooser, Change width, Toggle Sidebar and Language

If it's something I'm doing wrong - please give us a tip guys! :) Thank you. I also plan on not displaying this on mobile devices after, but I do have the CSS for that already (thanks to @Russ !)
 
Solution
So we removed these icons intentionally. With our options toggle width, toggle sidebar, it felt weird to have icons on all the links as it looked overwhelming.

This in extra.less should add them back easily. This is specific to our styles.

Code:
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }

For your instance, if you want mobile only you can use this:

Code:
@media (min-width: (@xf-responsiveMedium  +...

Russ

Pixel Exit Staff
So we removed these icons intentionally. With our options toggle width, toggle sidebar, it felt weird to have icons on all the links as it looked overwhelming.

This in extra.less should add them back easily. This is specific to our styles.

Code:
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }

For your instance, if you want mobile only you can use this:

Code:
@media (min-width: (@xf-responsiveMedium  + 1)) {
.p-linkList-changeStyle a:before, .p-linkList-changeWidth a:before, .p-linkList-changeLanguage a:before
{
    .m-faBase();
    display: inline-block;
    margin-right: 2px;
}
.p-linkList-changeStyle a:before { .m-faContent(@fa-var-paint-brush); }
.p-linkList-changeWidth a:before { .m-faContent(@fa-var-sliders-h); }
.p-linkList-changeLanguage a:before { .m-faContent(@fa-var-globe); }
}

These icons were removed back in 2020 I believe.
 
Solution

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.