How to left align entire login form?

  • Resolved Ian

    (@ianonmac)


    10 years, 11 months ago

    Hi Austin,

    I am impressed with your Custom Login plugin. I just have some questions.

    How do I move the entire form and the logo to be 100 pixels off the left side? I have set “Logo Background Position” and “Login Form Background Position” to Top Left, but it makes no difference. I would like to know how to change position of the boxes too, like here: https://extendd.com/wp-content/uploads/2012/01/custom-login-design.png

    I have also had a little difficulty resizing the logo image, it seems changing the “Logo Image width” (and height) just changes the size of the container, not the image itself, so must this be changed in the Media Library from the WP Dashboard? To be sure, I cleared my browser cache but it made no difference. I am using Chrome 32.

    If I get the Pro version, can I upgrade later on to use it with more sites and just pay the difference?

    Thanks for your help for a fantastic app.

    Ian

    https://www.ads-software.com/plugins/custom-login/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Austin

    (@austyfrosty)

    Hi Ian,

    Thanks for the feedback.

    You’ll have to change the form margin from auto to 100px or something along those lines in the custom CSS. Margin auto centers it on the page.

    Correct on the image. You’ll have to target the image in the CSS.

    You can purchase a single site license and upgrade later. It allows one site to be updated for one year.

    Thread Starter Ian

    (@ianonmac)

    After looking at the source code and trying various things to work out the correct CSS class, the following code more or less works for the position, so I hope this helps other searching for this:

    #login {
    margin-top:-50px;
    margin-bottom:0px;
    margin-right:50px;
    margin-left:50px;
    }

    However I have tried various class elements such as #login and the form name “user_login”, but have seen no change in the size or position of the username or password boxes in the form.

    Thread Starter Ian

    (@ianonmac)

    For a moment, I thought I was getting somewhere, I managed eventually to make username box smaller, but then the following code made both the username and password boxes completely disappear:

    #user_login {width:30px; position:absolute; left:10px; top:10px;}
    #user_pass {width:40px; position:absolute; left:100px; top:20px;}

    I just hope the hours put into customising it doesn’t get wiped in literally seconds with an update.

    Thread Starter Ian

    (@ianonmac)

    Still no luck with getting the login username and password boxes side by-side instead of one below the other. Here is the current custom CSS in case anyone knows:

    #login {margin-top:-50px; margin-bottom:00px; margin-right:100px; margin-left:100px;}

    #user_login {width:120px; margin-left:0px; margin-top:5px;}
    #user_pass {width:120px; margin-left:150px; margin-top:5px;}

    Thank you.

    Plugin Author Austin

    (@austyfrosty)

    Hey Ian,

    Maybe you want to give the Pro version a try? It’s got a few default designs where one has side by side image like: (Image).

    Custom Login Pro

    Thread Starter Ian

    (@ianonmac)

    Hi Austin, I am considering it for that reason, but it is just for one site that makes no money and currently has no visitors.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to left align entire login form?’ is closed to new replies.