Resource icon

Change login bar to an overlay

Overview Reviews (9) Discussion
Here is the link, I used the TMS, but I don't think that my solution is good. cause I just select the entire template by "String Replace" and and use your code (the code in the code box) as the "Replace" option. With the TMS I there is no need for me to mess up the template anymore and if I would like to suspend this change I just can leave an check-box unchecked.
 
Nice idea! You might be able to add the class with jquery and then only have to edit an ad_[template], that's easier for upgrade.
 
CritiKiL said:
Ok. I've added the code to the Default skin...
Click to expand...

It works on the default style so it must be a problem with your custom style.

I noticed that your custom style doesn't have the login bar on the top. Instead the link is in the navbar. You probably need to edit that link in the navbar to make this change. It would be in one of these templates:

navigation
navigation_visitor_tab
 
Oh, I see. I think I've used a code to remove the login from the top, so if this add-on doesn't work by including that login-removal code, then it's best to not try it. I just thought that with 'any' login attempt it would simply change the way the login works ;-) Thanks again man...
 
Oh it doesn't work for me. I had tried earlier by doing it as class="inner OverlayTrigger" but that didn't work. So I tried class="OverlayTrigger inner" and that didn't work either.
 
I really like the idea of this mod. Does the log in or sign up handle still remain at the upper right of the header? The default setup has both the log in or sign up handle and the Sign Up Now button as a trigger. This is fine for me if I can change the position of the handle. I want it to reside in the visitor bar. Ideally it would toggle with the Log Out button. Logged In condition shows Log Out; Logged Out condition shows Log In.

The Log In or Sign Up text is shortened to Log In as a better match text size wise.
The Sign Up Now button remains as is.
 
Neil E. said:
Does the log in or sign up handle still remain at the upper right of the header?
Click to expand...

Yes.

You can hide the loginbar with CSS:

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code: 
#loginBar
{
	display: none;
}

You can add a login link to the right side of the navbar by editing this template:

Admin CP -> Appearance -> Templates -> navigation

Near the bottom, add the red code:

Rich (BB code): 
		<!-- no selection -->
		<xen:if is="!{$selectedTab}">
			<li class="navTab selected"><div class="tabLinks"></div></li>
		</xen:if>
		
	</ul>
	
	<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>

	<xen:if is="!{$visitor.user_id}"><ul class="visitorTabs"><li class="navTab PopupClosed"><a href="{xen:link login}" class="navLink visitorTabItem OverlayTrigger">{xen:phrase log_in}</a></li></ul></xen:if>
</div>

<span class="helper"></span>
			
		</nav>	
	</div>
</div>
 
Thank you sir. Installed using the TMS and the overlay works well. I notice the overlay has a cancel button only. I think most overlays get a circled X for closing.

So the original handle is gone and the overlay gets called by the new nav bar button. Considering that the Sign Up Now button is somewhat redundant, I removed the Sign Up Now section from the page. I could have applied the code change for it if needed.

I created a new phrase called log_in_replace and used that instead of the standard log_in phrase (in the new code supplied by Jake). This was just to change the text to "Log in or Sign up" instead of the plain "Log in".

TMS method

search for:
Code: 
#loginBar
{
    @property "loginBar";
    color: @primaryLighter;
    background-color: @primaryDarker;
    border-bottom: 1px solid @primaryLightish;
    position: relative;
    z-index: 1;
    @property "/loginBar";
}
 
    #loginBar .pageContent
    {
        padding-top: @loginBarCollapsedHeight;
        position: relative;
        _height: 0px;
    }
 
    #loginBar a
    {
        @property "loginBarLink";
        color: @primaryLight;
        @property "/loginBarLink";
    }
 
    #loginBar form
    {
        @property "loginBarForm";
        padding: 5px 0;
        margin: 0 auto;
        display: none;
        line-height: 20px;
        position: relative;
        width: 500px;
        @property "/loginBarForm";
    }
 
        #loginBar .xenForm .ctrlUnit,
        #loginBar .xenForm .ctrlUnit dt label
        {
            margin: 0;
            border: none;
        }
 
        #loginBar .xenForm .ctrlUnit dt
        {
            width: {xen:calc '@loginBarForm.width / 2 - 20 - @ctrlUnitLabel.padding-left - @ctrlUnitLabel.padding-right'}px;
        }
 
        #loginBar .xenForm .ctrlUnit dd
        {
            position: relative;
            width: {xen:calc '@loginBarForm.width / 2'}px;
        }
 
    #loginBar .xenForm .ctrlUnit dd .textCtrl,
    #loginBar .passwordOptions
    {
        width: {xen:calc '@loginBarForm.width / 2'}px;
        box-sizing: border-box;
    }
 
    #loginBar .lostPassword
    {
        margin-top: 38px;
        font-size: 11px;
    }
 
    #loginBar .lostPasswordLogin
    {
        font-size: 11px;
    }
 
    #loginBar .rememberPassword
    {
        font-size: 11px;
    }
 
    #loginBar .textCtrl
    {
        @property "loginBarTextCtrl";
        color: @primaryLightest;
        background-color: @primaryDark;
        border-color: @primaryLightish;
        @property "/loginBarTextCtrl";
    }
 
    #loginBar .textCtrl[type=text]
    {
        @property "loginBarUsername";
        font-weight: bold;
        font-size: 18px;
        @property "/loginBarUsername";
    }
 
    #loginBar .textCtrl:-webkit-autofill /* http://code.google.com/p/chromium/issues/detail?id=1334#c35 */
    {
        background: @loginBarTextCtrl.background-color !important;
        color: @loginBarTextCtrl.color;
    }
 
    #loginBar .textCtrl:focus
    {
        @property "loginBarTextCtrlFocus";
        background: black none;
        @property "/loginBarTextCtrlFocus";
    }
 
    #loginBar input.textCtrl.disabled
    {
        @property "loginBarTextCtrlDisabled";
        color: @primaryLighter;
        background-color: @primaryDarker;
        border-style: dashed;
        @property "/loginBarTextCtrlDisabled";
    }
 
    #loginBar .button
    {
        min-width: @loginButtonWidth;
        *width: @loginButtonWidth;
    }
 
        #loginBar .button.primary
        {
            font-weight: bold;
        }
 
/** changes when eAuth is present **/
 
#loginBar form.eAuth
{
    width: {xen:calc '@loginBarForm.width + @eAuthButtonWidth + 20'}px; /* normal width + 170px */
}
 
    #loginBar form.eAuth .ctrlWrapper
    {
        border-right: 1px dotted @primaryMedium;
        margin-right: {xen:calc '@eAuthButtonWidth + 20'}px;
        box-sizing: border-box;
    }
 
    #loginBar form.eAuth #eAuthUnit
    {
        position: absolute;
        top: 0px;
        right: 0px;
    }
 
        #eAuthUnit li
        {
            margin-top: 10px;
        }
 
            #eAuthUnit li a
            {
                width: @eAuthButtonWidth;
                box-sizing: border-box;
            }
 
/** handle **/
 
#loginBar #loginBarHandle
{
    @property "loginBarHandle";
    font-size: 11px;
    color: @primaryLightest;
    background-color: @primaryDarker;
    padding: 0 10px;
    margin-right: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    right: 0px;
    bottom: -20px;
    text-align: center;
    z-index: 1;
    line-height: 20px;
    box-shadow: 0px 2px 5px @primaryDarker;
    @property "/loginBarHandle";
}

replace with:
#loginBar
{
display: none;
}
Click to expand...

For the navigation template it was:
search for:
<!-- no selection -->
<xen:if is="!{$selectedTab}">
<li class="navTab selected"><div class="tabLinks"></div></li>
</xen:if>

</ul>

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

</nav>
</div>
</div>
Click to expand...

replace with:
<!-- no selection -->
<xen:if is="!{$selectedTab}">
<li class="navTab selected"><div class="tabLinks"></div></li>
</xen:if>

</ul>

<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
<xen:if is="!{$visitor.user_id}"><ul class="visitorTabs"><li class="navTab PopupClosed"><a href="{xen:link login}" class="navLink visitorTabItem OverlayTrigger">{xen:phrase log_in_replace}</a></li></ul></xen:if>
</div>
<span class="helper"></span>

</nav>
</div>
</div>
Click to expand...


xenforo25.webp
 
thanks for the resource Jake you are awesome!
I really want to make the login screen pop-up automatically when the visitor is browsing my site (first visit, after x seconds when scrolling down)
 
I have found an issue with this modification. Saved login data is not automatically pasted in the login fields, making it useless for the browser to save the login data as you always need to enter it manually.
 
You must log in or register to reply here.
Back
Top Bottom