XF 2.3 Visitor Menu Logout Button

[hakyangler]

Hello;

does anyone know how I can do this? i couldn't figure it out.

 

[hakyangler]

does anyone have any ideas?

 

[hakyangler]

does anyone have any ideas about the topic?

 

[frm]

Hard to give you a direct answer to this, but the general direction is to edit account_visitor_menu

    <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">{{ phrase('log_out') }}</a>

To:

    <a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow"><xf:fa icon="fas fa-sign-out-alt" />
 {{ phrase('log_out') }}</a>

To get something similar to this:


But to get the block and center it, you're going to need a new CSS class. and replace menu-linkRow with that.

If you send your site, I might be able to help better.

 

[hakyangler]

i think it worked, I'll share the result.

 

[hakyangler]

menu-linkRow / here, when centered with css, it affects all areas. I think this is possible only with template editing.

 

[hakyangler]

that's how I did it and it worked.

 <div style="text-align:center"><a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow">
 {{ phrase('log_out') }}</a></div>

 

[hakyangler]

it works, but it destroys another area. Anyway, that's not going to happen.

 

[Mr Lucky]

Try this

In account_visitor_menu

<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow your-class">
 {{ phrase('log_out') }}</a>

And in template extra.css add this

.your-class
{margin-left:auto;
margin-right:auto;
width:100px}

(alternatively you could style inline as you did with the div, but I think extra.less is better practice

So you are giving it another class in the template

You may need to experiment with the width, it needs to be just wide enough to contain the icon and text

EDIT

or you could do this

.your-class
{margin-left:auto;
margin-right:auto;
display:table}

 

[frm]

Try this

In account_visitor_menu

<a href="{{ link('logout', null, {'t': csrf_token()}) }}" class="menu-linkRow your-class">
 {{ phrase('log_out') }}</a>

And in template extra.css add this

.your-class
{margin-left:auto;
margin-right:auto;
width:200px}

(alternatively you could style inline as you did with the div, but I think extra.less is better practice

So you are giving it another class in the template

You may need to experiment with the width, it needs to be just wide enough to contain the icon and text

You went further than me, but in his example there are borders for depth, and then we're not even accounting for style variant changes if on 2.3, as to why I left it simple.

 

[Mr Lucky]

You went further than me, but in his example there are borders for depth, and then we're not even accounting for style variant changes if on 2.3, as to why I left it simple.

Ah, I thought the question was just about centering the text just of the bottom link

 

[frm]

Ah, I thought the question was just about centering the text just of the bottom link

Too vague to tell.

Hopefully he figures it out or gives an interactive example as it still using menu-linkRow would still (on the default style) create a background hover effect and a left border. It'd need to also be addressed to ignore those in your-class too.

 

[Ozzy47]

You may find this addon useful, https://xenforo.com/community/resources/ozzmodz-center-log-out-on-visitor-menu.9661/