Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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
    H

    #1041738

    Hey hbourdillon,

    This css code should help fix it :)

    body.login div#login h1 a {
        margin-left: -99px;
    }

    Best regards,
    Nikko

    #1041854

    Hi 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
    H

    #1042413

    Hi there,
    Any other ideas on this as the above code hasn’t done the trick I’m afraid…
    Many thanks
    H

    #1043139

    Hi 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,
    Nikko

    #1043292

    Hi Nikko,
    I added it to the Quick CSS box in General Styling. Was is supposed to go somewhere else?
    Thanks
    H

    #1044247

    Hi 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,
    Nikko

    #1044327

    til 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

    #1044401

    Hi 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
    H

    #1044403

    if 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' );
    #1044408

    Hi 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
    H

    #1044428
    function 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' );
    #1044441

    That is perfect and just what I was hoping for, thank you Guenni007 and Nikko!
    Best wishes
    H

    #1044502

    Hi H,

    Glad that we could help :)
    Thanks for using Enfold and have a great day!

    @Guenni: thanks for helping out :)

    Best regards,
    Nikko

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Centering Logo etc on Login Page’ is closed to new replies.