Change login bar to an overlay

[sinful]

There is a duplicate: "login" and "log in or sign up" - essentially the same thing.

I decided to get rid of "log in or sign up" by commenting out

<h2 class="textHeading">{xen:phrase log_in_or_sign_up}</h2>

from helper_login_form template

 

[sinful]

I realised if we replaced {xen:link login} with "yourforum.com/register/", the popup turns into a sign up box:



I think it makes things easier for potential members to sign up. since they dont have to leave the page at all

 

[Luxus]

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.

Just want to note that firefox finally saves and pastes the login details correctly. Not sure since which FF version it was fixed though.

 

[ibaker]

As always with you Jake, thanks so much for what you do.

I am trying to do this mode but a slight difference. Instead of the averlay popping up in the middle of the screen, I have made the overlay come up on the right of the screen. I will have a button on the right of the header for this to occur:


Two things that I would like to know if you can help me with:
1. How to put the "Close" button in the top of the overlay and
2. How can I give the overlay a transition coming out from the right like a slide out panel

Any help is greatly appreciated

 

[Amaury]

@Jake Bunce, when using custom CSS, I like calling either from the color palette or the style properties, but I'm having some problems with this:



I think it's just the border, because the color and background appear fine. Here's the CSS:

.xenOverlay #pageLogin {
    color: @formOverlay.color !important;
    background: @formOverlay.background-color !important;
    border: @formOverlay.border-color !important;
}

What am I missing?

 

[Steve F]

@Jake Bunce, when using custom CSS, I like calling either from the color palette or the style properties, but I'm having some problems with this:

View attachment 96969

I think it's just the border, because the color and background appear fine. Here's the CSS:

.xenOverlay #pageLogin {
    color: @formOverlay.color !important;
    background: @formOverlay.background-color !important;
    border: @formOverlay.border-color !important;
}

What am I missing?

Your CSS isn't right for what you are calling with @formOverlay.border-color, should be @formOverlay.border

Or

border-color: @formOverlay.border-color;

Edit: you also need some padding on the form.

 

[Amaury]

Your CSS isn't right for what you are calling with @formOverlay.border-color, should be @formOverlay.border

Or

border-color: @formOverlay.border-color;

Edit: you also need some padding on the form.

Fixed it, thanks!

I don't know how to call radius and padding properties, so I just used fixed values for those (taken from the @formOverlay style property):

.xenOverlay #pageLogin {
    color: @contentText;
    background-color: @contentBackground;
    border: 10px solid @primaryLight;
    border-radius: 10px;
    padding: 15px 25px 15px 25px;
}

 

[Steve F]

You can also grab styling from other classes by doing this.

.xenOverlay #pageLogin {
    {xen:property formOverlay}
}

It will pull all the styling from that property. Save the template with the above CSS/code then refresh and you will see this.

.xenOverlay #pageLogin
{
    @property "formOverlay";
    color: #eee;
    background: rgba(0,0,0, 0.75);
    padding: 15px 25px;
    border: 20px solid rgba(0,0,0, 0.25);
    border-radius: 20px;
    box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
    _zoom: 1;
    @property "/formOverlay";
}

 

[Amaury]

Some more things I'd like to do:

• I'd like to change the phrase in the header of the overlay from log_in to log_in_or_sign_up. Which template would that be?
• I'd like to add a 5px border radius to the header to match our other overlays with headers.
• I'd like to have "Your name..." and "Do you...." appear on one line, though this one might be one to ask in the support section, I don't know.

 

[jamalfree]

how can i add close button in the top Jake !!!

 

[Amaury]

how can i add close button in the top Jake !!!

https://xenforo.com/community/threa...up-links-to-navigation-bar.97015/#post-928751

 

[jamalfree]

https://xenforo.com/community/threa...up-links-to-navigation-bar.97015/#post-928751

thank you Maru very much