Lair360 Blog

Version: 18.2
Revision: 33 Build 12

Customize WordPress Login Screen

Wordpress Version: 2.7+

Introduction: this tutorial will help you to replace the boring Wordpress logo, which is located at your login screen! However, you’ll need to be very careful when you’re changing things which are connected with your SQL server, administrator core panel and many more. But, if you’re unsure about it, I would recommend you to leave it alone and don’t take the risk!!

Anyway, if you’re confident about this replacement, please read this tutorial.

Good Luck!

——————————
Recommended procedure: please use your “Hosting Cpanel” for this modification.
If you decide to download the files, modify the strings and uploading it back to the server, the chances are very dull and dangerous. So, please use Cpanel for this procedure…

Warning: If you upload the files, Wordpress might stall itself, cause serious flaws and critical syntax errors. That is why you should modify the files on your server!

1.] Go to your domain and login to your Cpanel. After that, you will need to go into your “File Manager” and direct yourself to Wordpress directory or your subfolder.

With subdirectory: http://domain.co.uk/blog/…
Without subdirectory: http://domain.co.uk/…

2.] Look into these directory in step four and five.

/wp-login.php
/wp-admin/css/login.css

3.] upload your your own logo to this directory…

/wp-admin/images/

Notes: the image must be in PNG or GIF format, and the size must not exceed 400 pixel in width and height.

4.] Now, look for your “wp-login.php” file and look for this line, which is around line 57 – 62.
But, please be extra careful!

——————————

<div id="login"><h1><a href="<?php echo apply_filters('login_headerurl', 'http://wordpress.org/'); ?>" title="<?php echo apply_filters('login_headertitle', __('Powered by WordPress')); ?>"><?php bloginfo('name'); ?></a></h1>

——————————

a.] Replace this phrase: “Powered by Wordpress” with your own creation or imagination.
Then, you’ll need to change wordpress address (http://wordpress.org/) with your main address.
But, don’t remove the comma or the brackets!

b.] Save your progress and exit.

5.] Carefully navigate yourself to this directory and look for this file: login.css

/wp-admin/css/login.css
——————————

h1 a {
	background: url(../images/logo-login.gif) no-repeat top center;
	width: 326px;
	height: 67px;
	text-indent: -9999px;
	overflow: hidden;
	padding-bottom: 15px;
	display: block;
}

——————————

a.] Change the background logo with your own image.
After that, you’ll need to change the logo’s width and height.

b.] Save your progress and exit.

6.] Check your login page and take a look for yourself!

7.] Done!

Notes: if the image doesn’t fit, you’ll need to adjust your logo’s width and height.
That is all…