XF 1.4 Add Log in/Log Out and Sign Up Links to Navigation Bar

[Amaury]

How can I accomplish this? I want to do away with the login/sign up handle and sidebar button.

Logged Out:



Logged In:



Log In would bring up an overlay. Also, not too sure if the second one will be done as the Log Out link is in the dropdown menu, but just in case.

Thanks!

 

[Amaury]

Perhaps you can help, @Dylan V?

 

[Dylan V]

Hi,

Sorry for the delay, I hadn't seen this thread.

So, go to "navigation" and replace this:

<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>

with this:

<xen:include template="navigation_visitor_tab" />

Then, search for "navigation_visitor_tab" and below this:

<xen:hook name="navigation_visitor_tabs_start" />

add this:

<xen:if is="{$visitor.user_id}">

After replace this:

<xen:hook name="navigation_visitor_tabs_end" />

with:

    <li class="navTab logout PopupClosed"><a href="{xen:link logout}" class="navLink OverlayTrigger">{xen:phrase log_out}</a></li>
 
    <xen:else />
 
    <li class="navTab login PopupClosed"><a href="{xen:link login}" class="navLink OverlayTrigger">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in}}</a></li>
 
    <li class="navTab signup PopupClosed"><a href="{xen:link register}" class="navLink OverlayTrigger">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up}}</a></li>
 
    </xen:if>
 
    <xen:hook name="navigation_visitor_tabs_end" />

Now search for "register_form" and replace this:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

with this:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" id="pageSignUp"

Then, go to "sidebar_visitor_panel" and replace this:

<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>

with this:

<label id="SignupButton"><a href="{xen:link register}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>

And for the final step, go to "EXTRA.css" and add this:

.xenOverlay #pageLogin,
.xenOverlay #pageSignUp
{
    @property "formOverlay";
    color: #eee;
    background: rgba(0,0,0, 0.75);
    padding: 15px 25px;
    border: 20px solid rgba(0,0,0, 0.25);
    border-radius: 20px;
    box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
    _zoom: 1;
    @property "/formOverlay";
    margin: 0;
}

.xenOverlay #pageLogin .heading,
.xenOverlay #pageSignUp .heading
{
    @property "formOverlayHeading";
    font-weight: bold;
    font-size: 12pt;
    color: @primaryLightest;
    background-color: @primaryMedium;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid @primaryDark;
    border-radius: 5px;
    @property "/formOverlayHeading";
}

Everything has been tested and it works perfectly (see pictures below):

 

[Amaury]

Thanks, @Dylan V!

So I decided I don't need the Log Out one as it makes the area too cluttered, so how can I remove that? Also, how can I keep registration as a separate page instead of an overlay? There's a slight issue with the registration overlay:

 

[Dylan V]

Thanks, @Dylan V!

So I decided I don't need the Log Out one as it makes the area too cluttered, so how can I remove that? Also, how can I keep registration as a separate page instead of an overlay? There's a slight issue with the registration overlay:

View attachment 104594

Hi,

Simply remove this line to remove the "Log Out" link:

<li class="navTab logout PopupClosed"><a href="{xen:link logout}" class="navLink OverlayTrigger">{xen:phrase log_out}</a></li>

For the registration page, remove the "OverlayTrigger" in:

<li class="navTab signup PopupClosed"><a href="{xen:link register}" class="navLink OverlayTrigger">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up}}</a></li>

 

[Amaury]

You're awesome, @Dylan V!

As a final question, in the log in overlay, how can I add a "close X" to the top right that will close the overlay so that it matches the other XenForo overlays?

 

[Dylan V]

You're awesome, @Dylan V!

As a final question, in the log in overlay, how can I add a "close X" to the top right that will close the overlay so that it matches the other XenForo overlays?

Search for "helper_login_form" and below this line of code:

<form action="{xen:link 'login/login'}" method="post" class="xenForm" id="pageLogin">

add this:

<a class="close OverlayCloser"></a>

 

[Amaury]

Search for "helper_login_form" and below this line of code:

<form action="{xen:link 'login/login'}" method="post" class="xenForm" id="pageLogin">

add this:

<a class="close OverlayCloser"></a>