1. 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

Discussion in 'Styling and Customization Questions' started by toodlez, Apr 19, 2014.

  1. toodlez

    toodlez Active Member

    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!
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  3. toodlez

    toodlez Active Member

  4. Dylan V

    Dylan V Well-Known Member

    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
     
    Steve F, Demon and toodlez like this.

Share This Page