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

XF 1.4 Login form in sidebar

Discussion in 'Styling and Customization Questions' started by Skylined, Jul 16, 2015.

  1. Skylined

    Skylined Active Member

    To make login easier, I would like to add a login form in the sidebar.

    I would like to have the username, password, remember checkbox and a login button.


    Can somebody please help me with this? :)
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    Do you want something like this?

    Screenshot_1.png
     
  3. Skylined

    Skylined Active Member

    Exactly. :)
     
  4. Amaury

    Amaury Well-Known Member

    In the sidebar_visitor_panel template, add this line:

    Code:
    <xen:include template="helper_login_form" />
    Below this:

    Code:
    <div class="section loginButton">     
        <div class="secondaryContent">
            <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>
        </div>
    </div>
    Now we need to do some styling and organization.

    KHF Login 1.PNG

    Comment out the entire contents of the login_bar template:

    Code:
    <xen:comment><xen:require css="login_bar.css" />
    
    <div id="loginBar">
        <div class="pageWidth">
            <div class="pageContent"> 
                <h3 id="loginBarHandle">
                    <label for="LoginControl"><a href="{xen:link login}" class="concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
                </h3>
             
                <span class="helper"></span>
    
                <xen:edithint template="login_bar_form" />
            </div>
        </div>
    </div></xen:comment>
    In the helper_login_form, replace all this:

    Code:
        <h2 class="textHeading">{xen:phrase log_in_or_sign_up}</h2>
    
        <dl class="ctrlUnit">
            <dt><label for="ctrl_pageLogin_login">{xen:phrase your_name_or_email_address}:</label></dt>
            <dd><input type="text" name="login" value="{$defaultLogin}" id="ctrl_pageLogin_login" class="textCtrl" tabindex="1" /></dd>
        </dl>
    
    <xen:if is="{$xenOptions.registrationSetup.enabled}">
        <dl class="ctrlUnit">
            <dt><label for="ctrl_pageLogin_password">{xen:phrase do_you_already_have_account}</label></dt>
            <dd>
                <ul>
                    <li><label for="ctrl_pageLogin_not_registered"><input type="radio" name="register" value="1" id="ctrl_pageLogin_not_registered" tabindex="5" />
                        {xen:phrase no_create_account_now}</label></li>
                    <li><label for="ctrl_pageLogin_registered"><input type="radio" name="register" value="0" id="ctrl_pageLogin_registered" checked="checked" class="Disabler" tabindex="5" />
                        {xen:phrase yes_my_password_is}:</label></li>
                    <li id="ctrl_pageLogin_registered_Disabler">
                        <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" tabindex="2" />                 
                        <div><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a></div>
                    </li>
                </ul>
            </dd>
        </dl>
    <xen:else />
        <dl class="ctrlUnit">
            <dt><label for="ctrl_pageLogin_password">{xen:phrase password}:</label></dt>
            <dd>
                <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" tabindex="2" />                 
                <div><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a></div>
            </dd>
        </dl>
    </xen:if>
     
        <xen:if is="{$captcha}">
            <dl class="ctrlUnit">
                <dt>{xen:phrase verification}:</dt>
                <dd>{xen:raw $captcha}</dd>
            </dl>
        </xen:if>
    
        <dl class="ctrlUnit submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" tabindex="4" />
                <label class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" tabindex="3" /> {xen:phrase stay_logged_in}</label>
            </dd>
        </dl>
    

    With this:

    Code:
        <div class="section">
            <div class="secondaryContent">
     
        <h3>{xen:phrase log_in}</h3>
    
            <dt><label for="ctrl_pageLogin_login">{xen:phrase your_name_or_email_address}:</label></dt>
            <dd><input type="text" name="login" value="{$defaultLogin}" id="ctrl_pageLogin_login" class="textCtrl" tabindex="1" /></dd>
    
    <xen:if is="{$xenOptions.registrationSetup.enabled}">
            <dt><label for="ctrl_pageLogin_password">{xen:phrase password}</label></dt>
            <dd>
                <ul>
                    <li id="ctrl_pageLogin_registered_Disabler">
                        <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" tabindex="2" />                 
                        <div><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a></div>
                    </li>
                </ul>
            </dd>
    <xen:else />
            <dt><label for="ctrl_pageLogin_password">{xen:phrase password}:</label></dt>
            <dd>
                <input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" tabindex="2" />                 
                <div><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="6">{xen:phrase forgot_your_password}</a></div>
            </dd>
    </xen:if>
     
        <xen:if is="{$captcha}">
                <dt>{xen:phrase verification}:</dt>
                <dd>{xen:raw $captcha}</dd>
        </xen:if>
    
        <dl class="submitUnit">
            <dt></dt>
            <dd>
                <input type="submit" class="button primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" tabindex="4" />
                <label class="rememberPassword"><input type="checkbox" name="remember" value="1" id="ctrl_pageLogin_remember" tabindex="3" /> {xen:phrase stay_logged_in}</label>
            </dd>
        </dl>
     
            </div>
        </div>
    Result:

    KHF Login 2.PNG
     
    Skylined and Gemma like this.
  5. Skylined

    Skylined Active Member

    Thanks @Amaury, that's what I was looking for! :)

    Now I'll try to fix some style problems.
     
  6. Steve F

    Steve F Well-Known Member

    If you comment out the login_bar, how do people login when there is no sidebar? Why not leave it in place as another form of logging in? ;)
     
    Amaury likes this.
  7. Amaury

    Amaury Well-Known Member

    *facepalm*

    On our styles, we have that commented out because we have Log In and Sign Up in the navigation bar, which is on every page, and that was in my head when I was writing that.

    @Skylined, you can ignore that part.
     
  8. Skylined

    Skylined Active Member

    Don't worry, I've ignored that before @Steve F's comment. :)
     
  9. Skylined

    Skylined Active Member

    I would like to:
    • Make the user and password boxes use the whole width (make the right side closer to the right, as the left side is).
    • Adjust the padding between the password box and Forgot your password?
    • Adjust the padding between Forgot your password? and the Log in button.
    • Remove the line between Forgot your password? and the Log in button/Stay logged in.
    • Adjust the Log in button's width.
    • Center the Facebook, Twitter and Google buttons and adjust how close they are between each other and also from XF's login.

    How may I do all that?


    upload_2015-7-30_10-42-29.png
     

Share This Page