-
AuthorPosts
-
December 6, 2018 at 11:22 am #1041563
Hi there,
I’ve made some cosmetic changes to the wp-login page but am unable to center my logo or the writing below the links below the form.
Is is possible to get some CSS code to do this?
Thanks
HDecember 6, 2018 at 4:46 pm #1041738Hey hbourdillon,
This css code should help fix it :)
body.login div#login h1 a { margin-left: -99px; }
Best regards,
NikkoDecember 6, 2018 at 10:32 pm #1041854Hi Nikko,
I’m viewing the wp-login full page and the logo and the links underneath the login box are still not centered….
Best wishes
HDecember 8, 2018 at 10:33 am #1042413Hi there,
Any other ideas on this as the above code hasn’t done the trick I’m afraid…
Many thanks
HDecember 10, 2018 at 4:32 pm #1043139Hi H,
I inspected the login page and I don’t see the code I gave, so it’s not being reflected.
Where did you add the css code?Best regards,
NikkoDecember 10, 2018 at 7:48 pm #1043292Hi Nikko,
I added it to the Quick CSS box in General Styling. Was is supposed to go somewhere else?
Thanks
HDecember 12, 2018 at 10:58 am #1044247Hi H,
Yes, I thought you would add it in functions.php, since Quick CSS only affects the frontend of the site but not including the login page.
If you have already hooked in login_enqueue_scripts you just need to add the css there, if not you can use this and add at the bottom of functions.php:function my_login_logo() { ?> <style type="text/css"> body.login div#login h1 a { margin-left: -99px; } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );
For more information regarding this, you can check the wordpress codex: https://codex.wordpress.org/Customizing_the_Login_Form
Best regards,
NikkoDecember 12, 2018 at 1:43 pm #1044327til now i have these two things in my child-theme funtions.php for having my own logo on the login page:
function custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url(/wp-content/uploads/logo.png) !important; background-size: contain !important; height: 100px !important; width: 300px !important; } </style>'; } add_action('login_head', 'custom_login_logo'); add_filter( 'login_headerurl', 'custom_loginlogo_url' ); function custom_loginlogo_url($url) { return 'https://url...'; }
the last one is for having a custom link target
but the function above seems to be a better way
December 12, 2018 at 4:54 pm #1044401Hi Nikko,
That’s worked great for my logo, thank you.
But I’m struggling to centralise the Login Footer where you have the options to Register, Lost Password or return to the my website. Please could I have some code for that as well?
Many thanks
HDecember 12, 2018 at 4:59 pm #1044403if you like to center all – even the input fields you can integrate on the function
#login * { text-align: center !important }
so :
function my_login_logo() { ?> <style type="text/css"> body.login div#login h1 a { margin-left: -99px; } #login * { text-align: center !important } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );
December 12, 2018 at 5:13 pm #1044408Hi Guenni007
Thanks for that code edit but I would prefer just the Footer section (where you have the options to Register, Lost Password or return to the my website) centered and this code does the bits inside the login box as well….
Best wishes
HDecember 12, 2018 at 5:42 pm #1044428function my_login_logo() { ?> <style type="text/css"> body.login div#login h1 a { margin-left: -99px; } .login #backtoblog, .login #nav { text-align: center !important } </style> <?php } add_action( 'login_enqueue_scripts', 'my_login_logo' );
December 12, 2018 at 6:20 pm #1044441That is perfect and just what I was hoping for, thank you Guenni007 and Nikko!
Best wishes
HDecember 12, 2018 at 9:25 pm #1044502Hi H,
Glad that we could help :)
Thanks for using Enfold and have a great day!@Guenni: thanks for helping out :)
Best regards,
Nikko -
AuthorPosts
- The topic ‘Centering Logo etc on Login Page’ is closed to new replies.