Posts Tagged ‘WordPress’

WordPress VIP conference

Attending the VIP WordPress conference held by Automatic in Napa, California. Great presentations with high level topics ranging from security, plugin architecture, performance to debugging and wp-cli.

Posted: May 15th, 2013
Categories: 9-5
Tags: ,
Comments: No Comments.

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.