move DM button for mobile

[🔥Iggy🔥]

hello,
does anyone know if there is a simple addon for this buried somewhere?
ive had a few complains the ppl had a hard time to see the inbox and it should be more visible like next to the lightning bolt perhaps..
or if the code is simple enough i could do it, im not as good with the mobile modifications tho.
regards

 

[Mr Lucky]

You can edit the PAGE_CONTAINER template

Find this:

<a href="{{ link('direct-messages') }}"
                                    class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--conversations js-badge--conversations badgeContainer{{ $xf.visitor.conversations_unread ? ' badgeContainer--highlighted' : '' }}"
                                    data-badge="{$xf.visitor.conversations_unread|number}"
                                    data-xf-click="menu"
                                    data-xf-key="{{ phrase('shortcut.conversations_menu')|for_attr }}"
                                    data-menu-pos-ref="< .p-navgroup"
                                    title="{{ phrase('direct_messages')|for_attr }}"
                                    aria-label="{{ phrase('direct_messages')|for_attr }}"
                                    aria-expanded="false"
                                    aria-haspopup="true">
                                    <i aria-hidden="true"></i>
                                    <span class="p-navgroup-linkText">{{ phrase('nav_inbox') }}</span>
                                </a>
                                <div class="menu menu--structural menu--medium" data-menu="menu" aria-hidden="true"
                                    data-href="{{ link('direct-messages/popup') }}"
                                    data-nocache="true"
                                    data-load-target=".js-convMenuBody">
                                    <div class="menu-content">
                                        <h3 class="menu-header">{{ phrase('direct_messages') }}</h3>
                                        <div class="js-convMenuBody">
                                            <div class="menu-row">{{ phrase('loading...') }}</div>
                                        </div>
                                        <div class="menu-footer menu-footer--split">
                                            <div class="menu-footer-main">
                                                <ul class="listInline listInline--bullet">
                                                    <li><a href="{{ link('direct-messages') }}">{{ phrase('show_all') }}</a></li>
                                                    <xf:if is="$xf.visitor.canStartConversation()">
                                                        <li><a href="{{ link('direct-messages/add') }}">{{ phrase('send_direct_message') }}</a></li>
                                                    </xf:if>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Cut and paste that whole bit further down, after the alerts. ie into where it is indicated here

<div class="menu-footer menu-footer--split">
                                            <div class="menu-footer-main">
                                                <ul class="listInline listInline--bullet">
                                                    <li><a href="{{ link('account/alerts') }}">{{ phrase('show_all') }}</a></li>
                                                    <li><a href="{{ link('account/alerts/mark-read') }}" class="js-alertsMarkRead">{{ phrase('mark_read') }}</a></li>
                                                    <li><a href="{{ link('account/preferences') }}">{{ phrase('preferences') }}</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                INSERT HERE
                            </xf:if>
                        <xf:else />
                            <a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                                data-xf-click="overlay" data-follow-redirects="on">
                                <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                            </a>
                            <xf:if is="$xf.options.registrationSetup.enabled">
                                <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
                                    data-xf-click="overlay" data-follow-redirects="on">
                                    <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
                                </a>
                            </xf:if>
                        </xf:if>
                    </div>

I haven't tested thoroughly but I can't see why not. It will change on both desktop and mobile.

 

[🔥Iggy🔥]

i tried the edit but it didnt quite do the thing....it put the icon very top left and unclickable.....

really i think what some ppl will appreciate here is if it can be the exact same place as desktop(left of the alert button)....theres plenty of room up there i dont see why not...

maybe we can just find the code that says "do it different for mobile" and cut that out?

kind regards

 

[Mr Lucky]

really i think what some ppl will appreciate here is if it can be the exact same place as desktop(left of the alert button)....theres plenty of room up there i dont see why not...

maybe we can just find the code that says "do it different for mobile" and cut that out?

The way I see it is that currently the mobile position is the same as desktop, ie to the left of the alert bell.







But in the OP you said you wanted it next to the lightning icon.

The code I gave you does exactly that (ie on both desktop and mobile moves it to the right of the alert bell), so I would think either you edited it incorrectly or you have a custom style

 

[🔥Iggy🔥]

oh my bad im sorry Mr Lucky, i didnt even realize that was a custom style feature....

you did help me figure that out anyway, im still grateful.