I wanted to add a button which would open the login prompt in an overlay. So, I added the following code in a notice
<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.

Last edited:
Add this to EXTRA.css
.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.