WordPress: Custom CSS for login page

html { font-size: 62.5%; } body.login { background: #fff; display: flex; font-size: 1.6rem; align-items: center; justify-content: center; font-family: "Source Sans Pro",sans-serif; } .login div#login { padding: 0; } .login #loginform { box-shadow: 0 20px 50px rgba(0,0,0,.2); border-radius: 3px; } .login p#nav,.login p#backtoblog { display: none; } .login label { font-size: 1.6rem; color: #555; } .login .forgetmenot { padding-top: 6px; } .login .forgetmenot label { font-size: 1.4rem!important; } .login input { -moz-appearance: none!important; -webkit-appearance: none!important; appearance: none!important; border-radius: 3px; transition: border-color .1s ease-in-out; background-color: #fff; border: 1px solid #ddd; color: #333; font-size: 1.8rem!important; padding: 10px 20px!important; box-shadow: none; line-height: normal!important; } .login input[type="checkbox"] { width: 16px; height: 16px; padding: initial!important; } .login input[type="checkbox"]::before { font: 400 21px/1 dashicons; margin: -3px 0 0 -4px; } .login input:focus { border: 1px solid #999; outline: none; box-shadow: none; } .login .button-primary { width: auto; height: auto!important; font-size: 1.6rem!important; float: right; background: #333!important; color: #ffffff; border: 0; text-shadow: none; box-shadow: none; text-transform: uppercase; letter-spacing: 1px; transition: .1s ease-in-out; } .login .button-primary:hover,.login .button-primary:active,.login .button-primary:focus { background: #f44347!important; color: #1f1f1f!important; border: 0; box-shadow: none; transform: none; } .jetpack-sso-wrap,.jetpack-sso.button { width: 100%; } .jetpack-sso.button { border: 0!important; box-shadow: none!important; text-shadow: none; padding: 10px 0; height: auto; line-height: normal; font-size: 1.6rem; background: #333; color: #fff; transition: .1s ease-in-out; } .jetpack-sso.button:hover,.jetpack-sso.button:focus { background: #f44347!important; color: #1f1f1f!important; } .jetpack-sso.button:active { transform: none; } .jetpack-sso.button::before { background: none!important; padding-top: 10px!important; top: 0!important; left: 0!important; height: 100%!important; border-radius: 3px!important; } .jetpack-sso.button:hover::before { -webkit-filter: invert(1); filter: invert(1) }
Here's the PHP code you need for customizing the login page: https://codepad.co/snippet/klORGPti

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.