• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Overlay For Registration

toodlez

Active member
#1
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!
 

Dylan V

Well-known member
#4
Hi,

Go to the templates of your style and search for "sidebar_visitor_panel". Then replace this:
Code:
<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:
Code:
<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:
Code:
<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"
with:
Code:
<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator" id="pageSignUp"
After go to "EXTRA.css" and add this:
Code:
.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:

Screenshot_1.png