XF 1.x Transparent background for login overlay

abdfahim

Registered
I wanted to add a button which would open the login prompt in an overlay. So, I added the following code in a notice
Code:
<a class="button OverlayTrigger" href="login/">Log In</a>

It opens the login box in an overlay as expected, but with a totally transparent background. It works fine with the default template, though.

upload_2017-3-10_11-7-17.png
 
Last edited:

Steve

Pixel Exit Staff
Add this to EXTRA.css
Code:
.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: @xb_borderradiusl;
    box-shadow: 0px 25px 50px rgba(0,0,0, 0.5);
    _zoom: 1;
    @property "/formOverlay";
    margin: 0;
}

We do have an option for the normal login bar link to open in an overlay so if that was enabled as well you wouldn't need the above code.

You can find it by searching xb_login_overlay in the ACP search.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.