CSS question

edited March 2016 in WordPress
Helo,
I'm a beginner in web-sait development so can You help me please. I created my own ajax registration form on my website and pasted "Social Login" php code in this form.
[PHP]
<form id="login" class="ajax-auth" action="login" method="post">
    <h3>New to site? <a id="pop_signup" href="">Create an Account</a></h3>
    <hr />
    <h1>Login</h1>
    <p class="status"></p>  
    
 
    <label for="username">Username</label>
    <input id="username" type="text" class="required" name="username">
    <label for="password">Password</label>
    <input id="password" type="password" class="required" name="password">
    <a class="text-link" href="<?php
echo wp_lostpassword_url('wp-login.php?action=lostpassword'); ?>" target="_blank">Lost password?</a>
   <input class="submit_button" type="submit" value="LOGIN">
<?php wp_nonce_field('ajax-login-nonce', 'security'); ?> 

<b><?php do_action('oa_social_login'); ?></b>

	<a class="close" href="">(close)</a> 
</form>
[/PHP]

So as You can see here: http://letsdo.cf just press the button login in the left conner and You will see a Giant space after Social buttons till "Powered by OneAll Social Login". So how can I delete this space?

Thank you very much in advance =)
Best wishes,
Sergei.

Answers

  • Hi,
    Difficult to say given the custom CSS of your pages.
    However, maybe you can try removing the tag, calling the do_action before the submit button, and why not call the login_form action?

    Regards.
  • Yea I moved it and the space still there between button and icons
    Css is
    [css]
    form.ajax-auth{
    display: none;
    z-index: 9999;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 350px;
    margin-left: -200px;
    padding: 40px 25px 25px 25px;
    background-color: #FFFFFF;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    color: #878787;
    font-size: 11px;
    }

    .ajax-auth h1, .ajax-auth h3{
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    font-weight: 100;
    color: #333333;
    line-height: 1;
    }

    .ajax-auth h1{
    font-size: 27px;
    text-align: center;
    margin: 0 0 20px 0;
    }

    .ajax-auth h3{
    font-size: 18px;
    text-align: left;
    margin: 0;
    }

    .ajax-auth h3 a{
    color: #e25c4c;
    }

    .ajax-auth hr {
    background-color: rgba(0, 0, 0, 0.1);
    border: 0 none;
    height: 1px;
    margin: 20px 0;
    }

    .ajax-auth input#username,
    .ajax-auth input#password,
    .ajax-auth input#signonname,
    .ajax-auth input#email,
    .ajax-auth input#signonpassword,
    .ajax-auth input#password2,
    .ajax-auth input#user_login{
    border: 1px solid #EDEDED;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
    color: #333333;
    font-size: 15px;
    padding: 10px 10px 10px 13px;
    width: 325px;
    margin: 7px 0 20px 0;
    background-color: #F9F9F9;
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    }

    .ajax-auth input#username:focus,
    .ajax-auth input#password:focus,
    .ajax-auth input#signonname:focus,
    .ajax-auth input#email:focus,
    .ajax-auth input#signonpassword:focus,
    .ajax-auth input#password2:focus,
    .ajax-auth input#user_login:focus{
    background-color: #FFF;
    }

    .ajax-auth label.error{
    display: none !important;
    }

    .ajax-auth input.error{
    border: 1px solid #FF0000 !important;
    }

    .ajax-auth input.submit_button{
    font-size: 13px;
    color: #FFF;
    border: 1px solid #b34336;
    background-color: #e25c4c;
    border-radius: 3px;
    text-shadow: 0 1px 0 #ba3f31;
    padding: 9px 31px 9px 31px;
    background: -moz-linear-gradient(top, #ea6656, #df5949);
    border-top: 1px solid #bb483a;
    border-bottom: 1px solid #a63b2e;
    float: right;
    box-shadow: 0 1px 0 #E87A6E inset;
    }

    .ajax-auth a{
    text-decoration: none;
    }

    .ajax-auth a.close{
    color: #DCDCDC;
    position: absolute;
    right: 15px;
    top: 15px;
    }

    .ajax-auth a.text-link{
    color: #B4B2B2;
    float: left;
    margin: 10px 0 0 0;
    }

    .ajax-auth p.status{
    text-align: center;
    margin: -15px 0 20px 0;
    font-weight: 600;
    display: none;
    }

    a.login_button{
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px 7px 5px 7px;
    background-color: #FFF;
    border-radius: 3px;
    border: 1px solid #DCDCDC;
    color: #333;
    text-decoration: none;
    font-size: 11px;
    }

    .login_overlay{
    height: 100%;
    width: 100%;
    background-color: #F6F6F6;
    opacity: 0.9;
    position: fixed;
    z-index: 998;
    }
    [/css]
  • my website is letsdo.space. There's login button in the right top connor
  • Hi,

    The letsdo.space seems to work OK, although not with the Oneall plugin.
    The letsdo.cf is down at the moment.

    Are you sure you want us to look into this? If so, let us know the URL please.

    Regards.
Sign In or Register to comment.