XF 2.1 How to move the style selector from footer to top of the page?

The style selector trigger is located in the PAGE_CONTAINER template. On the default style, it's the block from line 538 to 543:

HTML:
<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>

You can basically just move that wherever it's convenient to you, plusminus some style adjustments you'll need to make based on how you want it to display. If you want a more generic button that you can just throw anywhere, try this:


HTML:
<xf:if is="$xf.visitor.canChangeStyle()">
    <xf:button 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}
    </xf:button>
</xf:if>
 
Thanks! I tried to simplified the block and moved it to the top of the page.

I got this:

1585901436205.webp

Why is there such a white spot?

This is the code:

1585901322827.webp


How do I get ride of it?

And it's not vertically aligned.. Also, is this simple code safe enough?

Thanks!
 
Last edited:
Hey @gogo you may like my free add-on. It's a style chooser you can set up in several positions. Header, footer, or in the sub-navigation. It also has a nifty light switch for alternating light and dark styles. It hasn't been updated in a while but works fine with 2.1. It adds little colored boxes of the color of the style you setup to alternate styles.

If you have any issues reach out to me and I will help.

 
Back
Top Bottom