Skip to content

Instantly share code, notes, and snippets.

@jonesch
Created March 13, 2013 15:07
Show Gist options
  • Save jonesch/5153018 to your computer and use it in GitHub Desktop.
Save jonesch/5153018 to your computer and use it in GitHub Desktop.
Here is a SASS file that will help with theming your Wordpress Login page.
@import "compass";
body.login {
// background: transparent url(../img/bg-footer.png) 0 0 repeat;
h1 {
text-align: center;
a {
width: 320px;
height: 92px;
// background: url(../img/logo-login.png) 0 0 no-repeat;
background-size: auto;
text-indent: -9999px;
overflow: hidden;
margin: 0 auto 15px;
padding: 0;
display: block;
}
}
form {
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: white;
border: 1px solid #E5E5E5;
@include border-radius(3px);
@include box-shadow(none);
.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;
@include box-shadow(rgba(200, 200, 200, 0.2) 1px 1px 2px inset);
}
}
}
//Set your two colors for the button
$main-blue: #008fb1;
$dark-blue: #077b97;
//Overwrite the default Blue WP Login button
#wp-submit {
background-color: $main-blue;
@include background-image(linear-gradient($main-blue, $dark-blue));
border: 1px solid $dark-blue;
border-bottom: 1px solid darken($dark-blue, 5%);
@include border-radius(4px);
@include box-shadow(inset 0 1px 0 0 lighten($dark-blue, 40%));
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 7px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 0 darken($main-blue, 10%);
width: 40%;
&:hover {
background-color: darken($main-blue, 2%);
@include background-image(linear-gradient(darken($main-blue, 2%), darken($dark-blue, 2%)));
@include box-shadow(inset 0 1px 0 0 lighten($dark-blue, 20%));
cursor: pointer;
}
&:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
@include box-shadow(inset 0 0 8px 4px darken($main-blue, 10%), 0 1px 0 0 #eee);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment