XenBase - Move Light Switch Toggle

[tmayo]

Hi Russ,

Sorry I have yet another question.

Since going live with XenBase a few users have mentioned that they keep hitting the light/dark style toggle button when they intended to check their notifications.

Is it possible to move the toggle to the right of the search button instead? This would help to prevent any accidental clicks.

Many thanks,
Tim

 

[Russ]

You'll need to edit PAGE_CONTAINER. I've heard this issue a few times in the past so it might be worth adding an option to show it on the far right.

For now, template: PAGE_CONTAINER

Around lime 343 (depending on your custom code)

Find:

                    <xf:if is="property('xbStyleSwitch') != '0'">
                        <xf:set var="$StyleSwitchID">{{ property('xbStyleSwitch') }}</xf:set>
                        <a href="{{ link('misc/style', null, { 'style_id': $StyleSwitchID, '_xfRedirect': $redirect, 't': csrf_token() }) }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--switch" data-xf-init="tooltip" aria-label="{{ property('xbStyleSwitchPhrase') }}" title="{{ property('xbStyleSwitchPhrase') }}">
                            <i aria-hidden="true"></i>
                        </a>
                    </xf:if>

Wrap it with xf:comments like so:

                    <xf:comment>
                    <xf:if is="property('xbStyleSwitch') != '0'">
                        <xf:set var="$StyleSwitchID">{{ property('xbStyleSwitch') }}</xf:set>
                        <a href="{{ link('misc/style', null, { 'style_id': $StyleSwitchID, '_xfRedirect': $redirect, 't': csrf_token() }) }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--switch" data-xf-init="tooltip" aria-label="{{ property('xbStyleSwitchPhrase') }}" title="{{ property('xbStyleSwitchPhrase') }}">
                            <i aria-hidden="true"></i>
                        </a>
                    </xf:if>
                    </xf:comment>

Then go down to line 446. You'll see:

                                <xf:csrf />
                            </form>
                        </div>
                    </xf:if>
                </div>
            </div>
            </xf:macro>

Insert it right after the </xfif> like so:

                                <xf:csrf />
                            </form>
                        </div>
                    </xf:if>
                    <xf:if is="property('xbStyleSwitch') != '0'">
                        <xf:set var="$StyleSwitchID">{{ property('xbStyleSwitch') }}</xf:set>
                        <a href="{{ link('misc/style', null, { 'style_id': $StyleSwitchID, '_xfRedirect': $redirect, 't': csrf_token() }) }}" class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--switch" data-xf-init="tooltip" aria-label="{{ property('xbStyleSwitchPhrase') }}" title="{{ property('xbStyleSwitchPhrase') }}">
                            <i aria-hidden="true"></i>
                        </a>
                    </xf:if>
                </div>
            </div>
            </xf:macro>

 

[tmayo]

Brilliant! That's works perfectly. Thanks again Russ!