Positioning the “Lost your password?” and “← Back to Site”

Question

I'd like to customize the log-in page for my WordPress theme and although I can play around with the CSS, I would love to re-position the "Lost your password?" and "← Back to Site" links to be inside of the foreground box, rather than below it / or, in other words...so these links are placed inside of the form-field.

How would I be able to achieve this so that I am not modifying any files outside of the Themes directory or would I need to re-create the entire log-in page and link to the new one for this?

Thank you.

Answer 1

although I can play around with the CSS

If you are not going to use CSS (or jQuery) to modify the position of these elements, you have to create your own login form: Customizing_the_Login_Form#Make_a_Custom_Login_Page.

There is no hook in wp-login.php that allows to move these elements inside the form field.

Related: Where to put my code: plugin or functions.php?

Answer 2

Change the height of the box: .login form to whatever suits you, and then position: relative; with negative top value on the links.

eg.

.login form{
     height: 220px;
}
.login p{
     position: relative;
}
#backtoblog{
     top: -80px;
}
#nav{
    top: -70px;
}