News for December 2012

Custom Login Screen for WordPress

Quick an dirty plugin to customize your wordpress admin login screen. Simply install the plugin, activate and upload your logo and background image.
Can download it here: Custom Login Plugin

Adding a custom_login() and defining the paths for the CSS.

function custom_login() {
echo '';
}
add_action('login_head', 'custom_login');

Customizing the CSS:

/* Custom Login Styles */
.background-cover{
        background:url('/wp-content/themes/custom-login/background.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover; 
        -moz-background-size: cover; 
        -o-background-size: cover; 
        background-size: cover; 
        position:fixed; 
        top:0; 
        left:0; 
        z-index:10; 
        overflow: hidden; 
        width: 100%; 
        height:100%;
} 
#login{ z-index:9999; position:relative; }
.login form { box-shadow: 0px 0px 0px 0px !important; border-radius: 10px;}
.login h1 a { background:url('/wp-content/themes/custom-login/logo.png') no-repeat center top !important; display: inline-block; width:130px;} 
input.button-primary, button.button-primary, a.button-primary{ 
        border-radius: 3px !important;
        background:url('/wp-content/themes/custom-login/img/button.jpg'); 
                border:none !important;
                font-weight:normal !important;
                text-shadow:none !important;
        }

.button:active, .submit input:active, .button-secondary:active {
        background:#386CB4 !important; 
        text-shadow: none !important;
        text-decoration: underline !important;
}
input.button-primary, button.button-primary, a.button-primary{ border-color: #ccc;font-weight: bold;color: white;background: #386CB4}
.login #nav a, .login #backtoblog a {
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav a:hover, .login #backtoblog a:hover{
        color:#386CB4 !important;
        text-shadow: none !important;
}
.login #nav, .login #backtoblog{
        text-shadow: none !important;
}
Posted: December 17th, 2012
Categories: code, Design, tutorial
Tags:
Comments: No Comments.