1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by Amaury, Apr 24, 2015.

  1. Amaury

    Amaury Well-Known Member

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

    Logged Out:

    Nav Bar 1.png

    Logged In:

    Nav Bar 2.png

    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!
     
  2. Amaury

    Amaury Well-Known Member

  3. Dylan V

    Dylan V Well-Known Member

    Hi,

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

    So, go to "navigation" and replace this:
    Code:
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
    with this:
    Code:
    <xen:include template="navigation_visitor_tab" />
    Then, search for "navigation_visitor_tab" and below this:
    Code:
    <xen:hook name="navigation_visitor_tabs_start" />
    add this:
    Code:
    <xen:if is="{$visitor.user_id}">
    After replace this:
    Code:
    <xen:hook name="navigation_visitor_tabs_end" />
    with:
    Code:
        <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:
    Code:
    <form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"
    with this:
    Code:
    <form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" id="pageSignUp"
    Then, go to "sidebar_visitor_panel" and replace this:
    Code:
    <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:
    Code:
    <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:
    Code:
    .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):

    Screenshot_1.png

    Screenshot_2.png

    Screenshot_3.png


    Screenshot_4.png

    Screenshot_5.png
     
    Demon and Amaury like this.
  4. Amaury

    Amaury Well-Known Member

    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:

    upload_2015-4-25_17-18-7.png
     
  5. Dylan V

    Dylan V Well-Known Member

    Hi,

    Simply remove this line to remove the "Log Out" link:
    Code:
    <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:
    Code:
    <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 likes this.
  6. Amaury

    Amaury Well-Known Member

    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?
     
  7. Dylan V

    Dylan V Well-Known Member

    ;)

    Search for "helper_login_form" and below this line of code:
    Code:
    <form action="{xen:link 'login/login'}" method="post" class="xenForm" id="pageLogin">
    add this:
    Code:
    <a class="close OverlayCloser"></a>
     
    Amaury likes this.
  8. Amaury

    Amaury Well-Known Member

    (y)
     

Share This Page