Design WP Login landing page (wp-login.php, wp-login.php?action=lostpassword,etc.)
Design WP Login landing page (wp-login.php, wp-login.php?action=lostpassword,etc.). I’d like to share some CSS code for you, you can enhance it on your own and this is just an example of mine. The 2 screenshot will be the layout output in WP login landing page.
Copy the PHP code to your functions.php of your current WordPress theme folder.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | add_action( 'login_header', 'custom_login_header' );function custom_login_header(){ ?> <style> #login h1 { background-color: #8891a4; padding: 30px 0; } #login h1 a { background-image: url('https://simplecottages.ie/wp-content/uploads/2017/12/login-logo.jpg'); background-size: auto; height: 125px; width: 125px; background-color: #fff; background-position: center center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #login .message {border-color: #c7cb4f;} #login #nav, #login #backtoblog { background-color: #f1f3f7 !important; } #login h1 a, #login .message, #login form, #login #nav, #login #backtoblog { margin-top: 0 !important; margin-bottom: 0 !important; } #login #nav, #login #backtoblog { background-color: #8891a4 !important; text-align: center; } #login #nav { padding-top: 10px; } #login #backtoblog { padding-bottom: 10px; } #login #nav a, #login #backtoblog a { background-color: #c7cb4f !important; display: inline-block; margin: 10px; padding: 0 30px; line-height: 40px; color: #fff; text-transform: uppercase; } </style> <script type="text/javascript" src="<?php echo bloginfo( 'url' ); ?>/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> jQuery( document ).ready(function($) { $( '#login h1' ).remove(); $( '#login #loginform' ).before( '<h1><a href="<?php echo bloginfo( 'url' ); ?>" title="<?php echo bloginfo( 'name' ); ?>"><?php echo bloginfo( 'name' ); ?></a></h1>' ); }); </script> <?php} |
Feel free to change the CSS code depending on your style.
Demo URL:
https://simplecottages.ie/wp-login.php
https://www.anthonypagaycarbon.com/wp-login.php
http://www.soundoflondon.co.uk/wp-login.php
