Change login bar to an overlay

[Jake Bunce]

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?

Can you post the URL?

 

[Steve F]

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]

with 1.2 the background is white and not clear , can this be fixed

 

[Jake Bunce]

@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:

.xenOverlay #pageLogin
{
	background-color: #333333;
	color: #ffffff;
	padding: 20px;
	border-radius: 20px;
}

 

[aiman.h.kallaf]

thanks , it works great

 

[AndyB]

Unfortunately this breaks the saved passwords function in Firefox 22. I'm on OSX 10.8.4.

 

[Deepmartini]

Does this increase new member signups? I'm curious if anyone has stats on this and what the response has been? Is there an advantage?

 

[aiman.h.kallaf]

Does this increase new member signups? I'm curious if anyone has stats on this and what the response has been? Is there an advantage?

for me it did , since i'm not a tech geek , i find it easy and more simple

 

[Deepmartini]

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.

 

[aiman.h.kallaf]

attention being at eye level and middle of screen

that is why i used it from the first place

 

[Luxus]

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:

.xenOverlay #pageLogin
{
background-color: #333333;
color: #ffffff;
padding: 20px;
border-radius: 20px;
}

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

.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);
}

 

[aiman.h.kallaf]

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

.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);
}

can you put picture for the result

 

[Luxus]

can you put picture for the result

Click at "Contact Us" on your forum.

 

[DeltaHF]

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?

 

[Jake Bunce]

How the heck does this thing work?

The OverlayTrigger class causes the href of the anchor tag to open as an AJAX request in the overlay.

 

[Luxus]

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.

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:

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

	.xenOverlay .formOverlay .textCtrl:focus,
	.xenOverlay .formOverlay .textCtrl.Focus, .xenOverlay #pageLogin .textCtrl:focus
	{
		@property "formOverlayTextCtrlFocus";
		background: @primaryDarker none;
		@property "/formOverlayTextCtrlFocus";
	}

 

[Deepmartini]

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?

 

[DeltaHF]

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

 

[Deepmartini]

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

There must be a lot to manually change. How did you find them all?

 

[DeltaHF]

I just set them once, in the header. The other "log in"/"register" links I found were already direct links to the login page.