Ultimate branding - Point me to custimize the login bar

Hi
can you please point me to custimize the login bar

How do i change colors, background, add text..

  • James Morris

    Hello Hamid,

    I hope you are well today.

    That section of Ultimate Branding is for customizing the login screen. See screenshot: https://goo.gl/EqFtn7

    You will be able to modify the look of this page using CSS by identifying the classes and ids of the page and defining your custom CSS in that section.

    Here's the relevant HTML that you will need to grab the classes and ids from:

    <body class="login login-action-login wp-core-ui  locale-en-us">
       <div id="login">
          <h1><a href="https://wordpress.org/" title="Powered by WordPress" tabindex="-1">Single Site</a></h1>
          <form name="loginform" id="loginform" action="http://yoursite.tld/wp-login.php" method="post">
             <p>
                <label for="user_login">Username or Email Address<br />
                <input type="text" name="log" id="user_login" class="input" value="" size="20" /></label>
             </p>
             <p>
                <label for="user_pass">Password<br />
                <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
             </p>
             <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> Remember Me</label></p>
             <p class="submit">
                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
                <input type="hidden" name="redirect_to" value="http://yoursite.tld/wp-admin/index.php" />
                <input type="hidden" name="testcookie" value="1" />
             </p>
          </form>
          <p id="nav">
             <a href="http://yoursite.tld/wp-login.php?action=register">Register</a> | 	<a href="http://yoursite.tld/wp-login.php?action=lostpassword">Lost your password?</a>
          </p>
          <p id="backtoblog"><a href="http://yoursite.tld/">&larr; Back to Single Site</a></p>
       </div>
       <div class="clear"></div>
    </body>

    For example, if you wanted to hide the WordPress logo, add a background image to the page, and change the login box to be rounded, you would use something like the following:

    .login.wp-core-ui {
        background:url('http://yoursite.tld/wp-content/uploads/2017/03/ga5ArRk.jpg') fixed top no-repeat;
    }
    .wp-core-ui #login > h1 {
        display:none;
    }
    .wp-core-ui #loginform {
        border-radius:10px;
    }
    .wp-core-ui #nav a, .wp-core-ui #backtoblog a {
        color:white;
    }
    .wp-core-ui #nav a:hover, .wp-core-ui #backtoblog a:hover {
        color:#0073aa;
    }

    Example screenshot: https://goo.gl/HFcaiE

    To add custom text to your login page, you will need to use something like our Login Message plugin.

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • James Morris

    Hello Hamid,

    I see you're already defining a custom image in Ultimate Branding in the image tab. By commenting out the following CSS, the image is displaying correctly now.

    /*.wp-core-ui #login > h1 {
        display:none;
    }*/

    The CSS that controls the login form is the following. You can add whatever style changes you want to this section:

    .wp-core-ui #loginform {
        border-radius:10px;
    }

    The CSS that controls the text at the bottom is the following. Since these are anchors, you need to change the color for regular and :hover states, hence why there are two declarations.

    .wp-core-ui #nav a, .wp-core-ui #backtoblog a {
        color:white;
    }
    .wp-core-ui #nav a:hover, .wp-core-ui #backtoblog a:hover {
        color:#0073aa;
    }

    If you're not familiar with CSS, you may want to take a look at the following site which has some amazing tutorials and definitions. https://www.w3schools.com/css/default.asp

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • Hamid

    Thanks for replying James.

    Yes i managed to change the whole background og the login page.

    So can i apply my logo on top of the login widget within this CSS

    .wp-core-ui #loginform {
    border-radius:10px;
    }

    And the CSS to change text color is straight forward, but if i want to change text and their url links is that done in this CSS

    .wp-core-ui #nav a, .wp-core-ui #backtoblog a {
        color:white;
    }

    Looking forward to hear from you.

    Hamid

  • Hamid

    Hi Ash

    Actually not sure how that logo got there, I mean it was there from the start, but after i installed ULTIMATE BRANDING and started messing around, it was gone. And i have not done anything??

    Anyway, yes please advice on three questions

    1: How do i change the URL or even text of the links on the login page?
    2: How do I change the color of the login form it self, from its standard grey-ish to another color?
    3:The login button, how can i change the style of that?

    thanks in advance..

    /HRB

  • Ash

    Hello Hamid

    1: How do i change the URL or even text of the links on the login page?

    To change register text and link, please try this code:

    add_filter( 'register', function( $url ) {
    	return '<a href="Your custom url">Your custom text</a>';
    } );

    To change "Lost your password", try this:

    add_action( 'login_head', function( $url ) {
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$( 'p#nav a:last-child' )
    				.attr( 'href', 'your custom url' )
    				.text( 'your custom text' );
    		});
    	</script>
    	<?php
    } );

    To change "Back to SITE" please try this:

    add_action( 'login_head', function( $url ) {
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$( 'p#backtoblog a' )
    				.attr( 'href', 'your custom url' )
    				.text( 'your custom text' );
    		});
    	</script>
    	<?php
    } );

    You can use this code in your theme's functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    2: How do I change the color of the login form it self, from its standard grey-ish to another color?

    Try the following code:

    add_action( 'login_head', function( $url ) {
    	?>
    	<style>
    		.login form{
    			background: YOUR COLOR CODE !important;
    		}
    	</style>
    	<?php
    } );

    Or you can use this css in login css module:

    .login form{
    			background: YOUR COLOR CODE !important;
    		}

    Make sure you keep !important in there and add your desired custom color code.

    3:The login button, how can i change the style of that?

    Add your style on p#submit input#wp-submit, like:

    p#submit input#wp-submit{
    color: red !important;
    background: yellow !important
    }

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Hamid

    Hi Ash

    Thank you buddy

    I created a mu-plugins folder and .php file.

    All you above code, i have inserted into that file.

    Here below is the code.

    <?php
    
    /* Change Button color */
    
    p#submit input#wp-submit{
    color: red !important;
    background: yellow !important
    }
    
    /* Change LOGIN FORM color */
    add_action( 'login_head', function( $url ) {
    	?>
    	<style>
    		.login form{
    			background: grey !important;
    		}
    	</style>
    	<?php
    } );
    
    /* Change REGISTER link */
    
    add_filter( 'register', function( $url ) {
    	return '<a href="https://www.bilverdy.dk/register-2/">Sign Up</a>';
    } );
    
    /* Change Lost Password */
    
    add_action( 'login_head', function( $url ) {
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$( 'p#nav a:last-child' )
    				.attr( 'href', 'https://www.bilverdy.dk/my-account/lost-password/' )
    				.text( 'Reset Password?' );
    		});
    	</script>
    	<?php
    } );
    
    /* Change back to website */
    
    add_action( 'login_head', function( $url ) {
    	?>
    	<script type="text/javascript">
    		jQuery(function($){
    			$( 'p#backtoblog a' )
    				.attr( 'href', 'https://www.bilverdy.dk' )
    				.text( 'Visit SOLiD MOTION' );
    		});
    	</script>
    
    	<?php
    } );

    Please see also attached screen dumps..

    [image pos="0"]

    Nothing changed.. Can you look at the code and see if i am missing anything?

    /Hamid

  • James Morris

    Hello Hamid,

    Since you created this as a mu-plugin, we will need to gain access to your server so we can check the code in your plugin file.

    Please visit the Contact page and complete the form with the following information:

    Subject: "Attn: James Morris"

    In the Message box, please provide the following:

    - link back to this thread for reference
    - any other relevant urls

    - Admin login:
    Admin username
    Admin password
    Login url

    - Hosting Control Panel Login
    Admin username
    Admin password
    Login url

    - FTP credentials
    host
    username
    password
    (and port if required)

    Best regards,

    James Morris

  • James Morris

    Hello Hamid,

    Thanks for sending those details through. I've been able to sort this out for you.

    You created your mu-plugins folder inside of wp-content/plugins/. This won't work. The final path has to be wp-content/mu-plugins/. I've corrected this.

    Also, there was some invalid code in your php. Specifically:

    /* Change Button color */
    
    p#submit input#wp-submit{
    color: red !important;
    background: yellow !important
    }

    This was causing a fatal parse error. I've removed this code from that section added it in the correct place.

    There were also some minor issues with your selectors. I've updated them and fine-tuned things a little bit. See the results in the following screenshot: https://goo.gl/IsOCpa

    Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.