XF 1.2 Overlay For Registration

[thunderup]

What do I need to do with the "Sign Up Now!" button on the sidebar... to make it ignore the login / signup drop down at the very top... and open the registration form in its own overlay?


Thanks!

 

[Jake Bunce]

http://xenforo.com/community/resources/change-login-bar-to-an-overlay.480/

 

[thunderup]

http://xenforo.com/community/resources/change-login-bar-to-an-overlay.480/

I had an old site when XF first came out where it was the actual registration page as the overlay rather than the login / sign up as an overlay like that link.

How would i accomplish this look?

 

[Dylan V]

Hi,

Go to the templates of your style and search for "sidebar_visitor_panel". Then replace this:

<div class="section loginButton">   
    <div class="secondaryContent">
        <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

with:

<div class="section loginButton">   
    <div class="secondaryContent">
        <label id="SignupButton"><a href="{xen:link register}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

Now search for "register_form" and replace this:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

with:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" id="pageSignUp"

After go to "EXTRA.css" and add this:

.xenOverlay #pageSignUp
{
    @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";
    margin: 0;
}

.xenOverlay #pageSignUp .heading
{
    @property "formOverlayHeading";
    font-weight: bold;
    font-size: 12pt;
    color: @primaryLightest;
    background-color: @primaryMedium;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid @primaryDark;
    border-radius: 5px;
    @property "/formOverlayHeading";
}

Result: