Do you know that many people haven’t even looked at their WordPress blogs registration or login pages. There are way to many bloggers that use a theme at face value, in other words the what you see is what you get syndrome. My advice, if you are going to build your own blog make it unique to you and don’t stop designing at the home page, take your designs site wide. With this in mind, lets go so far as to customize our very own Wordpress login page. After all, at some point in time your readers are likely to see it.
Before we start this tutorial, we need to locate and download two files from your server.
<ul>
<li>/wp-login.php</li>
<li>/wp-admin/wp-admin.css</li> </ul>
In a text editor, such as Notepad, open your wp-login.php file. Scroll down the page or do a search and find the reference to WordPress, should be just under the <body> tag, such as:
<h1><a href=?<?php echo apply_filters(’login_headerurl’, ‘http://wordpress.org/’); ?>? title=?<?php echo apply_filters(’login_headertitle’, __(’Powered by WordPress’)); ?>?><span class=?hide?><?php bloginfo(’name’); ?></span></a></h1>
and change it to:
<h1><a href=?<?php echo apply_filters(’login_headerurl’, ‘http://www.cssforwordpress.com’); ?>? title=?<?php echo apply_filters(’login_headertitle’, __(’CSS for WordPress’)); ?>?><span class=?hide?><?php bloginfo(’name’); ?></span></a></h1>
Make sure you change the site url and title to your own, unless you don’t mind sending me some extra traffic. You can now save and upload this file to your server. Next, open up the wp-admin.css file in your text editor and scroll down to #login, which should look something like this:
#login {
position: relative;
background: url(’images/login-bkg-tile.gif’) no-repeat top center;
color: #fff;
margin: 5em auto 1em;
padding: 20px 0 0;
width: 425px;
_width: 390px;
}
#login form {
background: url(’images/login-bkg-bottom.gif’) no-repeat bottom center;
padding: 0 50px 25px;
_width: 325px;
_margin: 0 auto;
}
#login #login_error {
background: #0e3350;
border: 1px solid #2571ab;
color: #ebcd4e;
font-size: 11px;
font-weight: bold;
padding: .6em;
width: 310px;
margin: 0 50px;
text-align: center;
}
This is where you can add or change Read the rest of this entry »
