custom login screens? You want a login screen that ties into your theme; this way your visitors don’t start wondering if they drifted from your site. The next problem is finding a plugin that works with your current version of WordPress.
There are several plugins out there but I have found that several just don’t work. They are for specific versions of WordPress. Others suggest a long process of changing up WordPress’s CSS file and changing out the logo etc. GREAT!!! Now what? Say you finally get the look you want only to loose everything WHEN you DO upgrade. This has happened to me. Actually ALL the above has happened to me. I finally found a plugin that works with no tweaking.
The author’s site offers very little in the way of documentation but if you have rudimentary CSS skills and beginner Photoshop know-how; the rest is a snap.
1) Change the included PSD template.
2) Update the CSS background color to match your graphics.
3) Upload the login-style files to your plugin folder and then activate the plugin. WALLAH!!! You are all done and you now have a custom login screen for your WordPress blog. CONGRATS!
I have used this on my localhost server and two other versions and all worked like a charm.
The basic CSS looks something like this:
#login {
background:url( login-bkg-tile.jpg) center top no-repeat;
width: 380px; }
#login form {
border:none;
margin-top: 0px;
-webkit-box-shadow: none; }
#loginform, #registerform, #lostpasswordform {
background-color: transparent; }
form {
color:#fff;
-moz-box-shadow:none; }
#login label {
color:#fff; }
h1 a {
background: transparent;
height: 122px;
width: 380px; }
#nav {
background:url( login-bkg-bottom.gif ) center bottom no-repeat;
width:380px;
height:45px;
text-indent: 26px;
margin:0px; padding: 0px;
text-shadow:none; }
.login #nav a, .login #nav a:hover {
color:#fff !important; }
#login form .submit input {
margin-right: 11px;
background: #000000; }
#login p.message {
padding: 12px;
margin: 10px 26px 0px 24px;
background: #ffffff; }
#login #login_error {
padding: 12px;
margin: 15px 26px 0px 24px; }
#user_pass, #user_login, #user_email {
font-size: 20px;
width: 94%; }
That wraps up the CSS. Jeff’s CSS stylesheet includes notes so don’t worry about getting lost. All you need is to change the background colors (e.g. #ffffff to #000000 from white to black etc.) to match your background color. Leave the file names the same. You can use his included PSD templates to redesign your look and overwrite the current files. That should be pretty self explanatory.
Next we take a look at the login-style PHP coding. The plugin requires no tweaking. It may look a bit convoluted but it is required for WMU compatibility. This was actually pretty brilliant. The original author wanted this plugin to work with both WordPress and WMU so leave the code intact and add to your login-style plugin directory. For those unfamiliar with WMU… here is a link that is worthy of a visit.
The coding on the PHP file was short and sweet:
/*
Plugin Name: Login Style
Plugin URI: http://wordpress.org/extend/plugins/login-style/
Description: Restyle your login page with custom CSS.
Version: 1.0
Author: Jeff Waugh
Author URI: http://perkypants.org/
*/
function login_style_wp_head() {
$blf = dirname(__FILE__);
if(is_file("$blf/login-style.css")) {
$css = trailingslashit(get_option('siteurl')) . trailingslashit(substr($blf, strpos($blf, 'wp-content'))) . 'login-style.css';
echo '<link rel="stylesheet" href="'.$css.'" type="text/css" media="screen" />';
}
}
add_action('login_head', 'login_style_wp_head');
?>
Again, I have tried this plugin on three different versions of WP and it has not failed me yet. When you update your WP version, the login should still look the same because you are NOT overwriting core files. Plugins are WONDERFUL! So upload four files (CSS, two (2) graphics, and PHP) into your login-style folder and upload that folder into your plugin directory. Jeff Waugh from bethesignal.org did a bang-up job with this little jewel. Thanks Jeff
Tags: Custom, Login, Theme, WordPress
Want Something Else?