Skip to content

Instantly share code, notes, and snippets.

@ksdSnippets
Created January 29, 2013 09:31
Show Gist options
  • Select an option

  • Save ksdSnippets/4663015 to your computer and use it in GitHub Desktop.

Select an option

Save ksdSnippets/4663015 to your computer and use it in GitHub Desktop.
WP: Login Page CSS
/******************************************************************
Site Name: xxx
Author: Kevin Salter
Stylesheet: Login Stylesheet
******************************************************************/
#login {
padding: 50px 0 0 0; }
/* the form box */
/*
This is the Wordpress logo in the admin area.
You'll have to load your own images and mess
with the width and height.
*/
.login h1 a {
background: url(../images/login-logo.png) no-repeat top center;
/* make sure to replace this! */
width: 250px;
height: 250px;
margin: 0 auto;
direction: ltr;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 50px;
display: block; }
form {
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: white;
border: 1px solid #E5E5E5;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
body.login {
background: #222222 url(../images/broken_noise.png) repeat; }
body form .input {
font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
font-weight: 200;
font-size: 24px;
width: 97%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
-moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); }
body.login div#login form#loginform {
background: rgba(255, 255, 255, 0.95) !important;
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7); }
body.login div#login form#loginform p label {
color: #222 !important; }
body.login div#login form#loginform input#user_login {
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.15); }
body.login div#login form#loginform input#user_pass {
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.15); }
body.login div#login form#loginform p.submit input#wp-submit {
background: #9d0700 !important;
border: 1px solid #8a0600;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear; }
body.login div#login form#loginform p.submit input#wp-submit:hover {
border: 1px solid #444;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-ms-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear; }
body.login div#login p#nav {
float: right;
padding: 8px 0; }
body.login div#login p#nav a {
color: #efefef !important;
text-shadow: none;
text-decoration: none; }
body.login div#login p#nav a:hover, body.login div#login p#backtoblog a:hover {
text-decoration: underline; }
body.login div#login p#backtoblog {
float: left;
margin: 0;
padding: 8px 0 0 10px; }
body.login div#login p#backtoblog a {
text-decoration: none;
color: #efefef !important;
text-shadow: none; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment