Resource icon

Change login bar to an overlay

Overview Reviews (9) Discussion
JulianD said:
Hello, thank you for this modification. Great idea and it is exactly what I was looking for.

After applying the modifications to the templates, this is what I get. I'm running XenForo 1.2, maybe that's why:

Any suggestions?
Click to expand...

Can you post the URL?
 
Jake this isn't working with 1.2 as Julian posted, same results for me also.

The loginBar function changed it seems in 1.2 from previous version in xenforo.js, its not triggering the formOverlay class for the styling.
 
@aiman.h.kallaf

Just added this to the description of this resource:

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-color: #333333;
	color: #ffffff;
	padding: 20px;
	border-radius: 20px;
}
Click to expand...
 
Unfortunately this breaks the saved passwords function in Firefox 22. I'm on OSX 10.8.4.
 
Last edited:
And probably gets more attention being at eye level and middle of screen. Hey every little bit helps to get to a critical mass of members that snowballs.
 
Jake Bunce said:
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-color: #333333;
color: #ffffff;
padding: 20px;
border-radius: 20px;
}
Click to expand...

Jake, this doesn't look like the overlay we are used to know. Transparency and box shadow effects are missing. This is better:

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);
}
 
Luxus said:
Jake, this doesn't look like the overlay we are used to know. Transparency and box shadow effects are missing. This is better:

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);
}
Click to expand...
can you put picture for the result
 
I think I've figured out why browser's aren't auto-filling usernames and passwords.

The original #loginBar div remains in the source, and the browser simply auto-fills your credentials there. I was able to see it in action, behind the transparent mask, by simply removing that line of JavaScript. I suspect browsers don't auto-fill form fields which are dynamically inserted into the DOM.

Sadly, I still have a lot to learn about XenForo's architecture and can't figure out what Jake's script is actually doing here. The login form presented in the overlay doesn't appear to be created from the login_bar_form template, or any template at all. How the heck does this thing work? :confused:
 
Qwk86gn said:
Jake this isn't working with 1.2 as Julian posted, same results for me also.

The loginBar function changed it seems in 1.2 from previous version in xenforo.js, its not triggering the formOverlay class for the styling.
Click to expand...
I noticed this as well. A missing formOverlay class results in white text boxes instead of the black/blue ones. You need to fix this with CSS:

Template: xenforo_overlay.css

Add the red code:

Rich (BB code): 
	.xenOverlay .formOverlay .textCtrl, .xenOverlay #pageLogin .textCtrl
	{
		@property "formOverlayTextCtrl";
		color: @primaryLightest;
		background-color: black;
		border-color: @primaryLighter;
		@property "/formOverlayTextCtrl";
	}

Rich (BB code): 
	.xenOverlay .formOverlay .textCtrl:focus,
	.xenOverlay .formOverlay .textCtrl.Focus, .xenOverlay #pageLogin .textCtrl:focus
	{
		@property "formOverlayTextCtrlFocus";
		background: @primaryDarker none;
		@property "/formOverlayTextCtrlFocus";
	}
 
Is there a simple way to turn off the drop down and also the overlay and just redirect all login traffic to the login page?
 
That's what I ended up doing with some template edits, by linking the words "Register" and "Log In" to the following URLs:

/index.php?register
/login
 
DeltaHF said:
That's what I ended up doing with some template edits, by linking the words "Register" and "Log In" to the following URLs:

/index.php?register
/login
Click to expand...

There must be a lot to manually change. How did you find them all?
 
I just set them once, in the header. The other "log in"/"register" links I found were already direct links to the login page.
 
You must log in or register to reply here.
Back
Top Bottom