Title: Reformat login form
Last modified: February 27, 2019

---

# Reformat login form

 *  Resolved [Will Stocks](https://wordpress.org/support/users/willstockstech/)
 * (@willstockstech)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/)
 * Hi guys,
 * I’ve just started using White Label CMA and so far I’m really happy! 😊
 * One question I have, how would you customise the login form similar to your example(
   [https://www.videousermanuals.com/wp-content/themes/vum/images/wlcms-login-new.png](https://www.videousermanuals.com/wp-content/themes/vum/images/wlcms-login-new.png))
   purely via CSS, as the WP-Login form inputs are all wrapped in their labels etc.
 * Do you have example login page CSS at all (maybe for less CSS capable people?)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [Will Stocks](https://wordpress.org/support/users/willstockstech/)
 * (@willstockstech)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11255542)
 * I’ve managed it at a super basic level, but obviously things like placeholders
   is not “CSS native”
 *  Plugin Author [Video User Manuals](https://wordpress.org/support/users/videousermanuals/)
 * (@videousermanuals)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11274650)
 * Hi Will,
 * You could try adding this to the custom css:
 * background-image: url(‘../images/login-bg1.jpg’);
    background-repeat: no-repeat;
   background-attachment: fixed; background-position: center;
 * This will probably work.
 * Thanks
 *  Thread Starter [Will Stocks](https://wordpress.org/support/users/willstockstech/)
 * (@willstockstech)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11275595)
 * Hey [@videousermanuals](https://wordpress.org/support/users/videousermanuals/)
 * Where is `login-bg1.jpg` coming from? That’s not a file/folder I personally have?
 * Furthermore, having a background image wouldn’t resolve the issue of either having`
   label`s, or `placeholder`s.
 * The problem is, the standard wp-login form is formatted as follows
 *     ```
       <label>
           <input>
       </label>
       ```
   
 * So if you then `display: none;` the form `label`, that also removes the `input`
   box.
 * I’ve hacked around this with some CSS to remove the `label`s, however there are
   no `placeholder`‘s as part of the standard wp-login form. Even if I used a `background-
   image`, that wouldn’t resolve the issue as when a user types in the `input` box,
   the “`placeholder`” would still be there as it’s part of the background, NOT 
   an actual `placeholder`?
 * See: [https://willstocks.co.uk/](https://willstocks.co.uk/) as an example.
 *  Thread Starter [Will Stocks](https://wordpress.org/support/users/willstockstech/)
 * (@willstockstech)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11280149)
 * Thanks [@videousermanuals](https://wordpress.org/support/users/videousermanuals/)!
   No time wasted – a good learning curve for me 🙂
 * I worked out the JS and CSS I need in my case:
 *     ```
       document.getElementById('user_login').placeholder='username';
       document.getElementById('user_pass').placeholder='password';
       ```
   
 *     ```
       input#user_login, 
       input#user_pass {
           text-align: center;
       }
   
       ::-webkit-input-placeholder {
          text-align: center;
          vertical-align: middle;
          opacity: .2;
       }
   
       :-moz-placeholder {
          text-align: center;  
          vertical-align: middle;
          opacity: .5;
       }
   
       ::-moz-placeholder {
          text-align: center;  
          vertical-align: middle;
          opacity: .5;
       }
   
       :-ms-input-placeholder {  
          text-align: center;
          vertical-align: middle;
          opacity: .5;
       }
       ```
   
 * Now I just need to work out how to apply it to the wp-login page only and I’m
   all good 😀
    -  This reply was modified 7 years, 3 months ago by [Will Stocks](https://wordpress.org/support/users/willstockstech/).
 *  Plugin Author [Video User Manuals](https://wordpress.org/support/users/videousermanuals/)
 * (@videousermanuals)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11288241)
 * Hi Will,
 * Hopefully, this javascript will help you out:
 * [https://slack-files.com/T02CBCA9G-FGQKE67LY-34f66dc087](https://slack-files.com/T02CBCA9G-FGQKE67LY-34f66dc087)
 * Thanks
 *  Thread Starter [Will Stocks](https://wordpress.org/support/users/willstockstech/)
 * (@willstockstech)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11308698)
 * All sorted – thanks guys! In the end I went with:
 *     ```
       add_action('login_head', 'wpws_custom_login_scripts', 1);
       function wpws_custom_login_scripts()
       {
           echo '<style>
               input#user_login, 
       	input#user_pass {
       	    text-align: center;
       	}
   
       	::-webkit-input-placeholder {
                   text-align: center;
                   vertical-align: middle;
                   opacity: .2;
       	}
   
       	:-moz-placeholder {
                   text-align: center;  
                   vertical-align: middle;
                   opacity: .2;
       	}
   
       	::-moz-placeholder {
                   text-align: center;  
                   vertical-align: middle;
                   opacity: .2;
       	}
   
       	:-ms-input-placeholder {  
                   text-align: center;
                   vertical-align: middle;
                   opacity: .2;
       	}
       	</style>
       	<script>
                   document.addEventListener("DOMContentLoaded", function(event) { 
                       document.getElementById("user_login").placeholder="username";
                       document.getElementById("user_pass").placeholder="password";
                   })
               </script>';
       }
       ```
   
 * Quick and dirty, but does the trick – thanks for all your help! 😀
 *  Plugin Author [Video User Manuals](https://wordpress.org/support/users/videousermanuals/)
 * (@videousermanuals)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11310343)
 * Hi Will,
 * Thanks for sharing this with everyone, hopefully, other people find it helpful.
 * Cheers

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Reformat login form’ is closed to new replies.

 * ![](https://ps.w.org/white-label-cms/assets/icon-256x256.png?rev=1977768)
 * [White Label CMS](https://wordpress.org/plugins/white-label-cms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/white-label-cms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/white-label-cms/)
 * [Active Topics](https://wordpress.org/support/plugin/white-label-cms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/white-label-cms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/white-label-cms/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [Video User Manuals](https://wordpress.org/support/users/videousermanuals/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/reformat-login-form/#post-11310343)
 * Status: resolved