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.