Change login bar to an overlay

Oxygen · 23-12-2015, 01:27 PM

Change login bar to an overlay
Not my content; Don't come to me because of links not working.

[Image: 2bcff71a170cad6390b585d6e79f4621.png]

Admin CP->Appearance->Templates->login_bar

Add the red code (two pieces, you might have to scroll right):

Code:
<xen:require css="login_bar.css" />
 
 <script>
 XenForo.LoginBar = function(a){};
 </script>
 
 <div id="loginBar">
 <div class="pageWidth">
 <div class="pageContent">
 <h3 id="loginBarHandle">
 <label for="LoginControl"><a href="{xen:link login}" class="OverlayTrigger 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>

Additionally, in XenForo 1.2 this overlay is no longer opaque. You can fix this with some CSS styling by editing this template:

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

Add this code:

Code:
.xenOverlay #pageLogin
 {
 background: rgba(0, 0, 0, 0.75);
 color: #ffffff;
 padding: 20px;
 border: 20px solid rgba(0, 0, 0, 0.25);
 border-radius: 20px;
 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
 }

You may also wish to change this button to an overlay:
[ATTACH=full]2039[/ATTACH]
Admin CP -> Appearance -> Templates -> sidebar_visitor_panel

Add theredcode:

Code:
Quote:</div>
 </div>
 
 <xen:else />
 
 <div class="section loginButton">
 <div class="secondaryContent">
 <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTriggerinner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
 </div>
 </div>
 
 </xen:if>
 
 <xen:include template="ad_sidebar_below_visitor_panel" />

Change login bar to an overlay

Submitted by Oxygen, 23-12-2015, 01:27 PM, Thread ID: 16043